Tpay React Native SDK

About

This SDK allows your app to make payments with Tpay. Documentation is available here.

Install

npm install react-native-tpay
Copy

Configuration

Initialization

At first, you have to configure your app to be able to make any requests by providing SDK info about your merchant account. Info about client_id and client_secret you will find in your merchant's panel at Integration -> API.

new Merchant(
  new MerchantAuthorization(
    'client_id',
    'client_secret'
  ),
  TpayEnvironment.sandbox,
  new CertificatePinningConfiguration('ssl_pinning'),
  'blik_alias',
  new WalletConfiguration(
    new GooglePayConfiguration('merchant_id'),
    new ApplePayConfiguration('merchant_id', 'country_code')
  )
);
Copy

Environment

Tpay SDK provides two types of environments you can use in your app:

• TpayEnvironment.sandbox - used only for tests and in stage/dev flavor.
• TpayEnvironment.production - used for production flavors.

Payment methods

For users to be able to use a specific payment method you have declare it in the configuration.

new PaymentMethods(
  [PaymentMethod.card, PaymentMethod.blik, PaymentMethod.transfer],
  [DigitalWallet.googlePay, DigitalWallet.applePay],
  [InstallmentPayment.ratyPekao, InstallmentPayment.payPo],
);
Copy

Card

If you decide to enable the credit card payment option, you have to provide SSL certificates.

new CertificatePinningConfiguration('ssl_pinning')
Copy

Google Pay configuration

In order to be able to use Google Pay method you have to provide your merchant_id to the SDK.

  new WalletConfiguration(
    new GooglePayConfiguration('merchant_id'),
  )
Copy

Apple Pay configuration

In order to be able to use Apple Pay method you have to provide your merchant_id and country_code to the SDK.

  new WalletConfiguration(
    new ApplePayConfiguration('merchant_id', 'country_code')
  )
Copy

Languages

Tpay SDK lets you decide what languages will be available in the Tpay's screen and which one of them will be preferred/default.

Right now, SDK allows you to use 2 languages:

• Language.pl - polish
• Language.en - english

new Languages(Language.pl, [Language.en, Language.pl]);
Copy

Merchant details

As a merchant, you can configure how information about you will be shown. You can set up your display name, city/headquarters and regulations link. You can choose to provide different copy for each language, or simply use one for all.

new MerchantDetails(
  [
    new LocalizedString(Language.pl, 'Sklep'),
    new LocalizedString(Language.en, 'Merchant'),
  ],
  [
    new LocalizedString(Language.pl, 'Warszawie'),
    new LocalizedString(Language.en, 'Warsaw'),
  ],
  [
    new LocalizedString(Language.pl, 'polish URL'),
    new LocalizedString(Language.en, 'english URL'),
  ]
);
Copy

Summary

Beneath you will find how a complete configuration should look like.

const merchant = new Merchant(
  new MerchantAuthorization(
    'client_id',
    'client_secret'
  ),
  TpayEnvironment.sandbox,
  new CertificatePinningConfiguration('ssl_pinning'),
  'blik_alias',
  new WalletConfiguration(
    new GooglePayConfiguration('merchant_id'),
    new ApplePayConfiguration('merchant_id', 'country_code')
  )
);

const merchantDetails = new MerchantDetails(
  [
    new LocalizedString(Language.pl, 'Sklep'),
    new LocalizedString(Language.en, 'Merchant'),
  ],
  [
    new LocalizedString(Language.pl, 'Warszawie'),
    new LocalizedString(Language.en, 'Warsaw'),
  ],
  [
    new LocalizedString(Language.pl, 'polish URL'),
    new LocalizedString(Language.en, 'english URL'),
  ]
);

const languages = new Languages(Language.pl, [Language.en, Language.pl]);

const paymentMethods = new PaymentMethods(
  [PaymentMethod.card, PaymentMethod.blik, PaymentMethod.transfer],
  [DigitalWallet.googlePay, DigitalWallet.applePay],
  [InstallmentPayment.ratyPekao, InstallmentPayment.payPo]
);

const configuration = new TpayConfiguration(
  merchant,
  merchantDetails,
  languages,
  paymentMethods
);

await configure(configuration);
Copy

Android

Tpay UI module is a native Android bottom sheet. In order to handle system backpress events you need to add the following code to your Activity.

import com.tpay.util.TpayBackpressUtil;

class MainActivity : ReactActivity() {
  override fun onBackPressed() {
    if (TpayBackpressUtil.isModuleVisible) {
      TpayBackpressUtil.onBackPressed()
    } else {
      super.onBackPressed()
    }
  }
}
Copy

Proguard/R8

If you are using Proguard/R8 in your project, you have to add the following rules to the android/app/proguard-rules.pro file, to keep Tpay SDK classes.

# Keep all Tpay SDK classes
-keep class com.tpay.sdk.** { *; }
Copy

iOS

When integrating the Tpay payment module into your app, it’s important to ensure that the necessary permissions are correctly set up to ensure a smooth user experience. The module allows the user to automatically fill the credit card form for secure payment processing. This feature requires you to setup the “Privacy - Camera Usage Description”.

React Native CLI

Integration Steps:

1. Open your project’s Info.plist file.
2. Add the key-value pair for the “Privacy - Camera Usage Description” permission, explaining the purpose of camera access. Clearly state that the camera is used to facilitate the automatic filling of the credit card form for secure payment processing.

Example:

<key>NSCameraUsageDescription</key>
<string>We need access to your camera to automatically fill the credit card form for secure payment processing.</string>
Copy

Expo Workflow

Integration Steps:

1. Open your project’s app.json file.
2. Add the key-value pair for the “Privacy - Camera Usage Description” permission, explaining the purpose of camera access. Clearly state that the camera is used to facilitate the automatic filling of the credit card form for secure payment processing.
3. Add it under ios -> infoPlist -> NSCameraUsageDescription

Example:

"ios": {
  "infoPlist": {
    "NSCameraUsageDescription": "We need access to your camera to automatically fill the credit card form for secure payment processing."
  }
},
Copy

Handling payments

Tpay SDK provides two ways of handling payments:

• Official SDK screens - you can use Tpay's official screens where you just need to provide "soft" information, like price, description or payer info.
• Screenless - you can use screenless functionalities, where you set callbacks for payments and display all necessary information on your own screens.

Official SDK screens

To make integration with the SDK faster, we created 3 types of sheets that can be used to handle payments:

• SingleTransaction - the most simple screen where the user can choose any payment method and proceed with it,
• Tokenization - screen that handles generating payment token from the credit card,
• TokenPayment - screen that handles payment with previously created token for credit card,

SingleTransaction

SingleTransaction flow opens a UI module and allows the customer to pick one of the defined payment methods. This method requires setting up a few things in order to fulfill payment:

• amount - simply the price of the transaction
• description - transaction description
• hiddenDescription (optional) - description visible only to the merchant
• payerContext - information about payer
  • payer - information about person who is making the payment
    • name - payer name
    • email - payer email
    • phone - payer phone number
    • address - payer address
      • city - city name
      • countryCode - country code in ISO 3166-1 alpha-2 format
      • address - street address
      • postalCode - postal code
  • automaticPaymentMethods - configuration of automatic payments
    • tokenizedCards - previously saved credit cards
      • token - card token
      • cardTails - last 4 digits of the card
      • brand - card brand
    • blikAlias - previously saved BLIK alias
      • value - alias value
      • label - alias label
• notifications - info about where the merchant should be notified about new transactions
  • notificationEmail - email address to send notification to
  • notificationUrl - URL to send notification to / URL to send tokens for tokenization

const transaction = new SingleTransaction(
  new PayerContext(
    new Payer(
      'John Doe',
      'john.doe@example.com',
      '123456789',
      new Address(
        'Test Street1',
        'Warsaw',
        'PL',
        '00-007',
      ),
    ),
    new AutomaticPaymentMethods(
      [
        new TokenizedCard(
          'token',
          '1234',
          CreditCardBrand.visa,
        ),
        new TokenizedCard(
          'token',
          '1234',
          CreditCardBrand.mastercard,
        ),
      ],
      new BlikAlias(
        true,
        'alias value',
        'label'
      ),
    ),
  ),
  39.99,
  'transaction description',
  'hidden description',
  new Notifications(
    'https://yourdomain.com/notifications',
    'email@address'
  )
);

await startPayment(transaction);
Copy

Automatic Payments

Using SingleTransaction screen you can set up automatic BLIK or card payments. Thanks to that, user will not have to enter BLIK/card data all over again each time making the payment.

If user using a card as a payment method will opt-in saving card, on successful payment, on the link specified as Notifications -> url Tpay backend will send information about the saved card token, tail and brand. Next, your backend has to send it to you, so you can use this info next time the same user will want to pay with the card. When you already have all required information, you can add automaticPaymentMethods to the payerContext.

new AutomaticPaymentMethods(
  [
    new TokenizedCard(
      'token',
      '1234',
      CreditCardBrand.visa,
    ),
    new TokenizedCard(
      'token',
      '1234',
      CreditCardBrand.mastercard,
    ),
  ],
  new BlikAlias(
    true,
    'alias value',
    'label'
  ),
);
Copy

Tokenization

Tpay SDK allows you to make credit card transactions without need of entering card's data each time. Instead, you can create and use a token, associated with a specific card and user.

Creating card token

const transaction = new Tokenization(
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  'https://yourdomain.com/notifications',
);

await tokenizeCard(transaction);
Copy

Token payment

If you already have card token payment, you can simply proceed with an actual tokenization transaction.

const transaction = new TokenPayment(
  'card_token',
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  10.99,
  'Payment description',
  'Hidden description',
  new Notifications(
    'https://yourdomain.com/notifications',
    'email@address',
  )
);

await startCardTokenPayment(transaction);
Copy

Common

Each transaction with a predefined screen returns a result that you can use to either show information to the user or e.g. log errors.

function handleResult(result: Result) {
  if (result instanceof TokenizationCompleted) {
    // credit card was tokenized successfully
  }
  if (result instanceof TokenizationFailure) {
    // credit card was not tokenized
  }
  if (result instanceof ConfigurationSuccess) {
    // Tpay package was configured successfully
  }
  if (result instanceof ModuleClosed) {
    // User closed the Tpay UI module
  }
  if (result instanceof ValidationError) {
    // provided data is invalid
    // check error message via result.message
  }
  if (result instanceof PaymentCreated) {
    // payment completed successfully
    // read transactionId via result.transactionId
  }
  if (result instanceof PaymentCompleted) {
    // payment completed successfully
    // read transactionId via result.transactionId
  }
  if (result instanceof PaymentCancelled) {
    // payment was cancelled by user
    // result.transactionId might not exist if
    // an error occurred during payment creation
  }
  if (result instanceof MethodCallError) {
    // package error occurred
    // read error message via result.message
  }
}
Copy

Screenless Payments

Screenless payments are a special type of payment functionality that gives you the whole power of payment process, but do not limit you to using predefined Tpay screens.

Get payment channels

To be able to use screenless functionalities you will need to know which payment methods are available to your merchant account. To get them, you can simply call getAvailablePaymentChannels method on the TpayPlatform.instance and set up result observer for them.

async function getPaymentMethods() {
  const result = await getAvailablePaymentChannels();

  if (result instanceof PaymentChannelsSuccess) {
    result.channels.forEach(channel => {
      channel.constraints.forEach(constraint => {
        switch (constraint.type) {
          case PaymentConstraintType.amount:
            // check if your payment amount is between
            // - amountConstraint.minimum
            // - amountConstraint.maximum
            // this constraint can have:
            // - only minimum value
            // - only maximum value
            // - minimum and maximum values
            const amountConstraint = constraint as AmountPaymentConstraint;
            break;
        }

        // display payment channel if all payment constraints are satisfied
      });
    });
  }

  if (result instanceof PaymentChannelsError) {
    // handle error
  }
}
Copy

Configuration

Before you run any screenless payment we do recommend setting up a function to handle specific payment results. You will need this to be able to monitor each payment status, i.e. it's status in real time. To do so, create a function, that will accept ScreenlessResult as a parameter and handle each of them.

function handleScreenlessResult(result: ScreenlessResult) {
  if (result instanceof ScreenlessPaid) {
    // payment completed successfully
  }
  if (result instanceof ScreenlessPaymentCreated) {
    // payment created, use result.paymentUrl to redirect the user to the payment page
  }
  if (result instanceof ScreenlessPaymentError) {
    // creating payment failed
  }
  if (result instanceof ScreenlessConfiguredPaymentFailed) {
    // creating payment failed because of error with:
    // - credit card data or credit card token
    // - BLIK code or BLIK alias
  }
  if (result instanceof ScreenlessBlikAmbiguousAlias) {
    // single alias has been registered multiple times, use result.aliases to let user choose desired one
  }
  if (result instanceof ScreenlessValidationError) {
    // passed data is incorrect
  }
  if (result instanceof ScreenlessMethodCallError) {
    // something went wrong with the plugin
  }
}
Copy

Screenless Credit Card Payment

CreditCardPayment allows you to create payments with credit card data.

const transaction = new CreditCardPayment(
  new CreditCard(
    'card_number',
    new ExpirationDate('12', '24'),
    '123',
    new CreditCardConfig(
      false,
      'yourstore.com',
      null,
    ),
  ),
  null,
  new PaymentDetails(
    19.99,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  )
);

const result = await screenlessCreditCardPayment(transaction);

handleScreenlessResult(result);
Copy

Tokenization

You can also Opt-in to generate a credit card token for future payments if you want to let users pay for transactions with previously used card. To do so, in creditCard -> config object, set the shouldSave to true.

new CreditCardConfig(
  true,
  'yourstore.com',
  null,
)
Copy

If you already have a credit card token, you can then set up token payment omitting credit card info. To do so, use creditCardToken instead of creditCard field.

const transaction = new CreditCardPayment(
  null,
  'creadit_card_token',
  new PaymentDetails(
    19.99,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  )
);

const result = await screenlessCreditCardPayment(transaction);

handleScreenlessResult(result);
Copy

Recurring Payments

Screenless BLIK payment

Tpay SDK let's make transactions with BLIK as well. Simply use BLIKPayment class.

const blikPayment = new BlikPayment(
  'blik_code',
  null,
  new PaymentDetails(
    27.99,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  ),
);

const screenlessResult = await screenlessBLIKPayment(blikPayment);

handleScreenlessResult(screenlessResult);
Copy

BLIK Alias Payment

If you have for example a returning users and you want to make their payments with BLIK even smoother, you can register BLIK Alias for them, so they will only be prompted to accept payment in their banking app, without need of entering BLIK code each time they want to make the payment.

const blikPayment = new BlikPayment(
  '777123',
  new BlikAlias(false, '1234', 'label_1234'),
  // rest of the BLIKPayment configuration
);
Copy

If the payment were successful, you can assume an alias was created and can be used for the future payments.

const blikPayment = new BlikPayment(
  null,
  new BlikAlias(false, '1234', 'label_1234'),
  // rest of the BLIKPayment configuration
);
Copy

BLIK Ambiguous Alias Payment

Sometimes, there is a possibility for one alias to be registered more than once. For example, if you register alias associated with one user for the multiple banks. In such a situation, you have to fetch those aliases from Tpay API and show them to user to let him choose one for the payment.

In BLIKPayment's call in the execute method you can get ScreenlessBlikAmbiguousAlias type of result, that will indicate that current alias was registered more than once. This result holds all possible variations of the alias you used to start payment with in aliases field. You have to simply show them to the user, let him choose, and then use the chosen alias to retry the payment.

if (result instanceof ScreenlessBlikAmbiguousAlias) {
  showAmbiguousAliases(result.aliases);
}
Copy

const blikPayment = new AmbiguousBlikPayment(
  transactionId,
  new BlikAlias(true, '1234', 'label_1234'),
  new AmbiguousAlias('name','code',),
);

const screenlessResult = await screenlessAmbiguousBLIKPayment(blikPayment);

handleScreenlessResult(screenlessResult);
Copy

Screenless Transfer Payment

Tpay SDK allows you to make transfer payments with bank available to your merchant account.

After your customer chooses their bank from the list, you can use it's channelId to make the payment.

const transaction = new TransferPayment(
  15,
  new PaymentDetails(
    0.15,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  ),
);

const screenlessResult = await screenlessTransferPayment(transaction);

handleScreenlessResult(screenlessResult);
Copy

Screenless Installment Payments

Tpay SDK allows you to create long term installment payments.

const transaction = new RatyPekaoPayment(
  15,
  new PaymentDetails(
    71.15,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  ),
);

const screenlessResult = await screenlessRatyPekaoPayment(transaction);

handleScreenlessResult(screenlessResult);
Copy

Screenless Deferred Payments

Tpay SDK allows you to create deferred payments (BNPL) using PayPo method.

async function startScreenlessPayPoPayment() {
  const payPoPayment = new PayPoPayment(paymentDetails, payer, callbacks);
  const screenlessResult = await screenlessPayPoPayment(payPoPayment);
  handleScreenlessResult(screenlessResult);
}
Copy

Screenless Google Pay payment (Android only)

Google Pay payment requires a Google Pay token.

const transaction = new PayPoPayment(
  new PaymentDetails(
    71.15,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  ),
);

const screenlessResult = await screenlessPayPoPayment(transaction);

handleScreenlessResult(screenlessResult);
Copy

Screenless Google Pay Payment (Android only)

Tpay SDK allows you to perform Google Pay transactions.

const transaction = new GooglePayPayment(
  'google_pay_token',
  new PaymentDetails(
    71.15,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  ),
);

const screenlessResult = await screenlessGooglePayPayment(transaction);

handleScreenlessResult(screenlessResult);
Copy

Google Pay Utils (Android only)

If you do not want to configure whole Google Pay functionality, you can use GooglePlayUtil class. It will handle all payment, with additional info in bottom sheet and send you all the needed info in callback.

const config = new GooglePayUtilsConfiguration(
  19.71,
  'Test Merchant',
  'merchant_id',
  GooglePayEnvironment.test,
  null,
);

const configResult = await configureGooglePayUtils(config);

if (configResult instanceof GooglePayConfigureError) {
  // handle error
} else if (configResult instanceof GooglePayConfigureSuccess) {
  // handle success
}
Copy

const isAvailable = await isGooglePayAvailable()

if (isAvailable) {
  // display Google Pay button
}
Copy

Next, you can open Google Pay module and let the user choose his credit card, so you can use it to make the payment.

const googlePayResult = await openGooglePay()

if (googlePayResult instanceof GooglePayOpenSuccess) {
  // credit card data was received
}
else if (googlePayResult instanceof GooglePayOpenCancelled) {
  // user closed Google Pay
}
else if (googlePayResult instanceof GooglePayOpenNotConfigured) {
  // Google Pay utils not configured
}
else if (googlePayResult instanceof GooglePayOpenUnknownError) {
  // unknown error has occurred
}
Copy

Screenless Apple Pay payment

Tpay SDK allows you to perform Apple Pay transactions.

const applePayPayment = new ApplePayPayment(
  'apple_pay_token',
  new PaymentDetails(
    71.15,
    'transaction description',
    'hidden description',
    Language.pl,
  ),
  new Payer(
    'John Doe',
    'john.doe@example.com',
    '123456789',
    new Address(
      'Test Street1',
      'Warsaw',
      'PL',
      '00-007',
    ),
  ),
  new Callbacks(
    new Redirects('https://success.url', 'https://error.url'),
    new Notifications(
      'https://yourdomain.com/notifications',
      'email@address',
    ),
  ),
);

const screenlessResult = await screenlessApplePayPayment(applePayPayment);

handleScreenlessResult(screenlessResult);
Copy

License

This library is released under the MIT License.