React Native

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

SAMPLE EXPERIENCE

• You can refer to the Nimbbl sample app to learn how the SDK has been integrated.
• Nimbbl React Native Sample App

Compatibilities and Dependencies

React Native Version Support

React Native Version	Support Status	Notes
^0.70.0	✅ Supported	Minimum supported version
^0.71.0	✅ Supported	Recommended version
^0.72.0	✅ Supported	Recommended version
^0.73.0	✅ Supported	Latest stable version
^0.74.0	✅ Supported	Latest stable version
^0.75.0	✅ Supported	Latest stable version
^0.76.0	✅ Supported	Latest stable version

Node.js Version Support

Node.js Version	Support Status	Notes
^16.0.0	✅ Supported	Minimum supported version
^18.0.0	✅ Supported	Recommended version
^20.0.0	✅ Supported	Latest LTS version
^21.0.0	✅ Supported	Latest stable version

Platform Support

Platform	Support Status	Minimum Version
Android	✅ Supported	API Level 21 (Android 5.0)
iOS	✅ Supported	iOS 13.0+

Install Nimbbl React Native SDK

npm

npm install nimbbl-mobile-react-native-sdk

yarn

yarn add nimbbl-mobile-react-native-sdk

Import and Initialize the SDK

Import the NimbblSDK class and initialize it before using it in your application.

import { NimbblSDK } from 'nimbbl-mobile-react-native-sdk';

// Get the shared instance
const nimbblSDK = NimbblSDK.getSharedInstance();

// Initialize the SDK (no credentials required)
await nimbblSDK.initialize();

Launching the Nimbbl Checkout

IMPORTANT

In order to invoke the checkout, your server should provide you the following information:

• orderToken - this would have been generated from your server.

The SDK uses a method-based approach for payment processing. You can process payments using the checkout method with your order token.

Understanding Checkout Options

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

Properties	Type	Mandatory?	Description
orderToken	string	true	Order token generated via Creating an Order step
paymentModeCode	string	false	In case of specific payment mode, this property is mandatory. Possible values net_banking, card, upi, wallet. If you don't pass paymentModeCode the customer is shown the full Checkout with all available payment modes.
bankCode	string	false	Only 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
walletCode	string	false	Only 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
paymentFlow	string	false	Only to be passed in case of upi to determine the flow. Possible value is intent. If it isn't passed, Checkout will open with page for the user to pay using a QR or choose a UPI app
upiAppCode	string	false	Only to be passed in case of upi and paymentFlow is intent. Possible values phonepe, gpay. Checkout will open with the transaction initiated for the upi app passed in the upiAppCode field. If it isn't passed, Checkout will show a UPI QR or prompt user to choose a UPI app

Process Payment

Use the checkout method to process payments:

// Process payment using checkout method
const result = await nimbblSDK.checkout({
  orderToken: 'YOUR_ORDER_TOKEN', // Required: Get this from your backend
  paymentModeCode: 'upi', // Optional: 'net_banking', 'card', 'upi', 'wallet' or '' for all
  bankCode: 'hdfc', // Optional: Only for 'net_banking'. Bank code for specific bank
  walletCode: 'jio_money', // Optional: Only for 'wallet'. Wallet code for specific wallet
  paymentFlow: 'intent', // Optional: Only for 'upi' 'intent'
  upiAppCode: 'phonepe' // Optional: Only for 'upi' with paymentFlow 'intent'. 'phonepe' or 'gpay'
});

Response Handling

The SDK returns payment responses directly from the checkout method. Handle the response after the checkout call completes.

import { NimbblSDK } from 'nimbbl-mobile-react-native-sdk';

const nimbblSDK = NimbblSDK.getSharedInstance();

// Initialize SDK
await nimbblSDK.initialize();

// Start payment and handle response
try {
  const checkoutResult = await nimbblSDK.checkout({
    orderToken: 'YOUR_ORDER_TOKEN', // Get from your backend
    paymentModeCode: 'upi', // Optional: 'net_banking', 'card', 'upi', 'wallet' or '' for all
    bankCode: 'hdfc', // Optional: Only for 'net_banking'. Bank code for specific bank
    walletCode: 'jio_money', // Optional: Only for 'wallet'. Wallet code for specific wallet
    paymentFlow: 'intent', // Optional: Only for 'upi' 'intent'
    upiAppCode: 'phonepe' // Optional: Only for 'upi' with paymentFlow 'intent'. 'phonepe' or 'gpay'
  });
  
  // Handle the response
  if (checkoutResult.status === 'success') {
    // Payment successful
    console.log('Payment successful:', checkoutResult);
    console.log('Order ID:', checkoutResult.order_id);
    console.log('Transaction ID:', checkoutResult.transaction_id);
  } else {
    // Payment failed
    console.log('Payment failed:', checkoutResult);
    console.log('Message:', checkoutResult.message);
  }
} catch (error) {
  // Handle SDK errors
  console.error('Payment error:', error);
}

Complete Integration Example

Here's a complete example showing how to integrate the Nimbbl SDK in your React Native app:

import React, { useEffect } from 'react';
import { View, Button, Alert } from 'react-native';
import { NimbblSDK } from 'nimbbl-mobile-react-native-sdk';

const PaymentScreen = () => {
  const nimbblSDK = NimbblSDK.getSharedInstance();

  useEffect(() => {
    // Initialize SDK on component mount
    const initSDK = async () => {
      await nimbblSDK.initialize();
    };
    initSDK();
  }, []);

  const handlePayment = async () => {
    try {
      const result = await nimbblSDK.checkout({
        orderToken: 'YOUR_ORDER_TOKEN', // Get from your backend
        paymentModeCode: 'upi', // Optional: 'net_banking', 'card', 'upi', 'wallet' or '' for all
        bankCode: 'hdfc', // Optional: Only for 'net_banking'. Bank code for specific bank
        walletCode: 'jio_money', // Optional: Only for 'wallet'. Wallet code for specific wallet
        paymentFlow: 'intent', // Optional: Only for 'upi' 'intent'
        upiAppCode: 'phonepe' // Optional: Only for 'upi' with paymentFlow 'intent'. 'phonepe' or 'gpay'
      });
      
      // Handle payment result
      if (result.status === 'success') {
        // Payment successful
        Alert.alert('Success', `Payment successful! Order ID: ${result.order_id}`);
        console.log('Payment successful:', result);
      } else {
        // Payment failed
        Alert.alert('Failed', `Payment failed: ${result.message}`);
        console.log('Payment failed:', result);
      }
    } catch (error) {
      // Handle SDK errors
      Alert.alert('Error', `Payment error: ${error}`);
      console.error('Payment error:', error);
    }
  };

  return (
    <View>
      <Button title="Pay Now" onPress={handlePayment} />
    </View>
  );
};

export default PaymentScreen;

Capture Transaction Response

The SDK returns a unified response object containing all payment details. This response should be sent to your server for validation.

Response Data Structure

Field	Type	Description
status	string	Payment status: "success", "failed", "cancelled"
order_id	string	Your order ID
nimbbl_order_id	string	Nimbbl's internal order ID
transaction_id	string	Transaction ID
nimbbl_transaction_id	string	Nimbbl's internal transaction ID
signature	string	Payment signature for verification
message	string	Status message
reason	string	Failure reason (if applicable)
order	object	Complete order details including amount, currency, etc.

Example Response

{
  "status": "success",
  "order_id": "order_12345",
  "nimbbl_order_id": "order_RoQ7Zl92G2qqB3rg",
  "transaction_id": "txn_67890",
  "nimbbl_transaction_id": "order_RoQ7Zl92G2qqB3rg-20210217071936",
  "signature": "hmac_sha256",
  "message": "Payment successful",
  "order": {
    "amount": 100.0,
    "currency": "INR",
    "invoice_id": "inv_123"
  }
}

IMPORTANT

• Share the complete response object to your server for validation
• Verify the signature on your server before providing goods or services
• More details available on processing the response in Completing the Integration

Platform Setup

iOS Setup

1. Install pods:

cd ios && pod install

2. Add to your Info.plist:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

3. Add URL Schemes to your Info.plist:

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

Note:

• The iOS implementation is written in Swift for modern, type-safe development.
• The SDK uses iOS native SDK v2.0.16.

Android Setup

No additional setup required - the SDK uses autolinking.

1. Add to your android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 21
    }
}

2. Add to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />

Note:

• The Android implementation is written in Kotlin for modern, type-safe development.
• The SDK uses Android native SDK v4.0.9.

Related Reading

Creating an OrderRequired server-side configurationStandard Checkout OverviewIntegration overviewSonic Product OverviewWhat customers see