Skip to main content

Integrate this SDK with your React Native App ( both iOS and Android ) and start accepting payments from your customers.

SAMPLE EXPERIENCE

Compatibilities and Dependencies​

  1. React Native version 0.63.0 or higher.
  2. Kindly make sure that the React Native version and Webview versions are compatible. For eg: React Native is 0.63.0 compatible with Webview 10.10.2.

Install Nimbbl React Native SDK​

$ npm install nimbbl_react_native_sdk --save

Import / Add the Checkout library​

Import the NimbblReactNative component to your file where checkout will be initiated.

import NimbblReactNative from "nimbbl_react_native_sdk";

Launching the Nimbbl Checkout​

Nimbbl React Native Checkout offers a versatile range of props, allowing you to tailor the checkout experience to your specific needs. By simply configuring the relevant properties in <NimbblReactNative {...props} /> component, you can seamlessly integrate Nimbbl into your platform.

Launching Nimbbl React Native Checkout will require props to be passed to <NimbblReactNative {...props} /> component.

let props: IProps = {
  //add properties here
};

<NimbblReactNative {...props} />;

Understanding Checkout Options​

Read more about props below.

Properties to Identify Yourself​

These four properties are always required to launch the checkout

PropertiesTypeMandatory?Description
showbooleantrueThis will handle the web view show hide state
access_keystringtrueAccess Key generated from the Nimbbl Dashboard.
order_idstringtrueOrder ID generated via Creating an Order step.
onClosefunctiontrueThis callback func will return the response that you need to capture and send to your server

Furthermore, you can utilize custom property to store additional information as key-value pairs.

Option PropertiesTypeMandatory?Description
customobjectfalseKey-value pair that can be used to store additional information.

Nimbbl lets you enforce a payment mode on the Checkout. This can be done by passing the payment_mode_code property.There are other related properties in to each different payment mode, you can read it in the table below. If you don't pass payment_mode_code the consumer is shown the full Checkout with all available payment modes.

PropertiesTypeMandatory?Description
payment_mode_codestringfalseIn case of specific payment mode, this property is mandatory. Possible values net_banking, card, upi, wallet. If you don't pass payment_mode_code the consumer is shown the full Checkout with all available payment modes.
bank_codestringfalseOnly to be passed in case of net_banking. Example: hdfc. To get the full list of banks supported for you, please use this API. If it isn't passed, Checkout will open with a page for the user to choose their bank from enabled banks
wallet_codestringfalseOnly to be passed in case of wallet. Example: jio_money. To get the full list of wallets supported for you, please use this API. If it isn't passed, Checkout will open with a page for the user to choose their wallet from enabled wallets
payment_flowstringfalseOnly to be passed in case of upi to determine the flow. Possible values collect, intent. If it isn't passed, Checkout will open with page for the user to enter their UPI ID or pay using a QR or choose a UPI app
upi_idstringfalseOnly to be passed in case of upi and payment_flow is collect. It is the UPI ID of the customer. Example:wonderwoman@ybl. Checkout will open with the transaction initiated for the upi id passed in the upi_id field. If it isn't passed, Checkout will open with page for the user to enter their UPI ID
upi_app_codestringfalseOnly to be passed in case of upi and payment_flow is intent. Possible values phonepe, gpay. Checkout will open with the transaction initiated for the upi app passed in the upi_app_code field. If it isn't passed, Checkout will show a UPI QR or prompt user to choose a UPI app
Get the UPI Intent list​

For fetching the list of Available UPI Intent from the user device, you will have to import a function from nimbbl_react_native_sdk and use as below to get a JSON object with a list of UPI Intent

import { getListOfUpiIntent } from "nimbbl_react_native_sdk";

const getApps = async () => {
  const result = await getListOfUpiIntent();
  console.log("getApps():", result);
};

getApps();

Setting the Props and Invoking React Native Checkout​

Set all the relevant properties for your use case in the props as shown below

import { NimbblReactNative } from 'nimbbl_react_native_sdk';

<NimbblReactNative
    {
        show: boolean;
        accessKey: string;
        orderId: string;
        onClose: (responseObj) => void;

        // only if you want to enforce a specific payment method
        payment_mode_code: string;
        bank_code: string;
        wallet_code: string;
        payment_flow: string;
        upi_id: string;
        upi_app_code: string;
    }
/>

Capture Transaction Response​

The final step in completing the client integration is capturing the response and sending it to your server

After a successful transaction or close event of webview, the close callback function will return a response from checkout. You need to store these fields in your server.

onClose: (responseObj) => {
  // send  the response to your server for processing
};
IMPORTANT
  • Share the response parameters received to your server
  • This will need to be validated on your server before you decide to provide goods or services
  • More details available on processing the response in Completing the Integration :::