React Native Checkout SDK

BoxPay React Native SDK enables swift creation of a payment process within your React Native application. We offer robust and adaptable UI components ready for immediate use, allowing you to effortlessly accept payments from your shoppers.

To begin integrating with the BoxPay Checkout, the initial step is to register and setup your BoxPay account.

This outlines the typical workflow for integrating a BoxPay React Native checkout SDK –

• The shopper taps on the Buy/Pay button on the Merchant App.
• The Merchant Server processes the request and initiates a checkout session through the Create Checkout Session API.
• The Merchant Server receives the BoxPay Checkout token in the response and returns it back to Merchant App.
• Merchant App initiates the BoxPay payment flow by invoking Checkout SDK. Please refer to the React Native Checkout SDK Integration Steps section for more details around it.
• The shopper completes the payment on the BoxPay Payment Sheet.
• After payment, BoxPay calls the result callback method with the payment status.
• Depending on the payment status received, the Merchant App redirects the customer to either the Order Confirmation page, or to the payment failed/canceled page.

React Native Checkout SDK Integration Steps

This guide will help you integrate the boxpay-checkout-react-native-sdk into your project using the npm or yarn package.

1. Installation

First, install the SDK via npm or yarn as shown:

// latest version is 1.0.0
npm install boxpay-checkout-reactnative-sdk
OR
yarn add boxpay-checkout-reactnative-sdk

2. Add required permissions

Please make sure that required permissions are added in your Apps to ensure seamless working of UPI Intent –

Android App

Following package and intent queries need to be added to AndroidManifest.xml –

<queries>
    <!-- Google Pay specific queries -->
    <package android:name="com.google.android.apps.nbu.paisa.user" />

    <!-- UPI-based payment schemes -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="gpay" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="paytmmp" />
    </intent>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="phonepe" />
    </intent>
    <intent>
         <action android:name="android.intent.action.VIEW" />
         <data android:scheme="upi" />
    </intent>
</queries>

iOS App

Following scheme queries need to be added to Info.plist –

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>gpay</string>
    <string>tez</string>
    <string>paytmmp</string>
    <string>phonepe</string>
    <string>upi</string>
</array>

3. Importing the SDK

After installation, import the BoxpayCheckout component and payment handler into your project, as shown below:

import BoxpayCheckout from 'boxpay-checkout-react-native-sdk';
import { ConfigurationOptions, PaymentResultObject } from 'boxpay-checkout-react-native-sdk/interface';

4. Initializing the Checkout Component

Use the BoxpayCheckout component inside your React Native application and pass the required token and sandboxEnv props:

const CheckoutScreen = () => {

  // Call your server API that will in-turn call the BoxPay create checkout session api to get the checkout token
  const token : string = ""; 

  //From the same api call in payload response shopper_token will be received. This field is **optional**. You can pass `null` or an empty string ("") if you don't want to provide the shopper token.
  const shopperToken : string | null = null;

  // Handle payment result from BoxpayCheckout
  const handlePaymentResult = (result: PaymentResultObject) => {
    alert(`Payment ${result.status} :  + ${result.transactionId}`);
  };

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <BoxpayCheckout
        token={token}
        onPaymentResult={handlePaymentResult}
        configurationOptions={{
          // Flag to control whether BoxPay Success screen should be displayed before executing the callback. It enables merchants to control whether they want to leverage their own success screens. Default value is false meaning merchants should navigate shoppers to their success screen on successful payments.
          [ConfigurationOptions.ShowBoxpaySuccessScreen]: true,

          // Flag to control whether BoxPay Sandbox/test env should be used. It is primarily available for testing purposes. Default value is set to false meaning prod environment will be used to process the payments.
          [ConfigurationOptions.EnableSandboxEnv]: true,

          // Flag to control whether UPI QR should be loaded by default. Default value is set to false to ensure maximum success rate as enabling this flag will result into transactions even though shopper doesn't make UPI payments.
          [ConfigurationOptions.ShowUPIQROnLoad]: true, 
        }}
        shopperToken={shopperToken}
      />

        /*
        If you don't want to pass anything in configurationOptions then simply pass as null and at that time it will be EnableSandboxEnv as false, ShowUPIQROnLoad as false and ShowBoxpaySuccessScreen as false by default -
        <BoxpayCheckout
        token={token}
        onPaymentResult={handlePaymentResult}
        configurationOptions={null}
        shopperToken={shopperToken}
      />
      */
    </View>
  );
};

export default CheckoutScreen;

PaymentResultObject model

5. Verifying the payment status

Once you get the PaymentResultObject in your callback function, you can verify/handle the status as below:

6. Getting the payment details using Operation Inquiry endpoint

If you need to get additional details, you can invoke BoxPay Operation Inquiry API from your server side component using the transactionId and operationId (same as transactionId) received in PaymentResultObject as you must NOT store the BoxPay API key in the React Native App.