React Native Checkout SDK

Implementing Boxpay Checkout React Native SDK

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

Installation

version 1.0.0

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

npm install @boxpay/boxpay-checkout-react-native-sdk

yarn add @boxpay/boxpay-checkout-react-native-sdk

Importing the SDK

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

import React from 'react';
import BoxpayCheckout, { setPaymentHandler } 
from '@boxpay/boxpay-checkout-react-native-sdk';

Initializing the Checkout Component

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

<BoxpayCheckout 
  token={token} 
  sandboxEnv={false}
/>

Props:

token (string, required): The authentication token for processing payments.
sandboxEnv (boolean, required): Set to true for sandbox (test) mode and false for production mode.

Handling Payment Results

To handle payment results, set a payment handler using setPaymentHandler:

setPaymentHandler({
 onPaymentResult: handlePaymentResult,
});

Payment Result Callback

Define a function to handle the payment result:

const handlePaymentResult = (result: PaymentResult) => {
 alert(`Payment ${result.status} : ${result.transactionId}`);
};

Payment Result Object:

status (string): Indicates whether the payment was Success, Failed, NoAction, RequiresAction,Processing or Expired..
transactionId (string): The unique transaction ID for the payment.

Summary

Install the SDK via npm/yarn.
Import BoxpayCheckout and setPaymentHandler.
Use BoxpayCheckout with the required props.
Set up a payment result handler to manage payment responses.

This completes the integration of the @boxpay/boxpay-checkout-react-native-sdk into your application. 🚀

Sample Code

import View from 'react-native';
import React, { useEffect } from 'react';
import BoxpayCheckout from './(boxpayCheckout)/index';
import { setPaymentHandler } from './(boxpayCheckout)/(sharedContext)/paymentStatusHandler'
import PaymentResult from './(boxpayCheckout)/(dataClass)/paymentType';


const Check = () => {
  const token = “”; // token fetched from api call


  useEffect(() => {
    setPaymentHandler({
      onPaymentResult: handlePaymentResult,
    });
  }, []);


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


  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <BoxpayCheckout
          token={token}
          sandboxEnv={false} // for production env set its value as false
        />
    </View>
  );
};     


export default Check;

Checkout Integration