React Native SDK

The Jio Payment SDK is a modular react-native-based payment solution supporting both real payments and test/simulated transactions. It allows easy integration of credit/debit card payments, net banking, and UPI, with a complete in-app UI and WebView experience.

• In Test Mode, you can simulate transactions without hitting real APIs. This is useful for development, QA, and staging environments.
• In Live Mode, the SDK performs secure, real transactions with merchant credentials and HMAC-signed requests.

Steps

1. Installing the SDK

To integrate the SDK into a React Native project, you must first install the package.

Official JS Wrapper Installation:

• Using yarn: yarn add react-native-jio-payment-sdk
• Using npm: npm install react-native-jio-payment-sdk --save

Linking:

• For RN >= 0.60, the module should autolink automatically.
• For older React Native versions, run: react-native link react-native-jio-payment-sdk.

Note: If no official wrapper exists, native SDKs must be added manually to Android and iOS, and a native module must be created.

2. Android Configuration

You must edit the android/app/src/main/AndroidManifest.xml file to ensure the application has internet permissions: <uses-permission android:name="android.permission.INTERNET" />

If the native SDK requires any Activity or metadata entries, add them according to the SDK docs

3. iOS Configuration

Open: ios/Runner/Info.plist (or your RN iOS project Info.plist) and add: Query schemes (for UPI / other apps):

<key>LSApplicationQueriesSchemes</key>
<array>
<string>freecharge</string>
<string>gpay</string>
<string>paytm</string>
<string>phonepe</string>
<string>cred</string>
<string>upi</string>
</array>

Allow arbitrary loads (if required by SDK; only if SDK needs it):

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

4. Example usage (JavaScript)

Here’s a complete React Native example (JS) mapping your Flutter call to a JS/native call.

import React, {useEffect} from 'react';
import { View, Button, Alert, NativeModules, NativeEventEmitter } from 'react-native';

const { JioPaymentSdk } = NativeModules; 
const sdkEmitter = JioPaymentSdk ? new NativeEventEmitter(JioPaymentSdk) : null; [cite: 55, 57]

export default function PaymentScreen() {
  useEffect(() => {
    let sub;
    if (sdkEmitter && JioPaymentSdk.EVENT_PAYMENT_COMPLETED) {
      sub = sdkEmitter.addListener('onPaymentCompleted', (result) => {
        handlePaymentResult(result);
      });
    }
    return () => sub && sub.remove(); [cite: 62, 63, 64, 67]
  }, []);

  const handlePaymentResult = (result) => {
    if (result.success) {
      Alert.alert('Payment Success', `Txn ID: ${result.txnId}`);
    } else {
      Alert.alert('Payment Failed', result.errorMessage || 'Unknown error');
    }
  }; [cite: 70, 73, 74, 76]

  const startPayment = async () => {
    try {
      const paymentParams = {
        amount: 100.0,
        env: 'prod', // 'uat' or 'prod'
        merchantId: 'JP2000000000016',
        agregatorId: 'JP2000000000001',
        secretKey: 'abc',
        email: '[email protected]',
        userName: 'Test User',
        merchantName: 'Reliance',
        merchantImage: 'asset/Ajio logo.png',
        merchantTrId: 'ORDER123456',
        isAssetMerchantImage: true,
        orderSummary: {
          title: 'Order Summary',
          items: [
            { name: 'Item 1', qty: 1, price: 50.0 },
            { name: 'Item 2', qty: 1, price: 50.0 },
          ],
        },
        theme: {
          primaryColor: '#E39B2B',
          secondaryColor: '#000000',
        },
        allowedPaymentTypes: ['CARD', 'NB', 'UPI'],
        timeOut: 1000, 
      }; [cite: 82, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 96, 97, 98, 99, 100, 103, 104, 105, 109, 110]

      // Promise-based Bridge
      if (JioPaymentSdk && JioPaymentSdk.initializeJioPayments) {
        const result = await JioPaymentSdk.initializeJioPayments(paymentParams);
        handlePaymentResult(result);
        return;
      }

      // Callback-based Bridge
      if (JioPaymentSdk && JioPaymentSdk.initializeJioPaymentsWithCallback) {
        JioPaymentSdk.initializeJioPaymentsWithCallback(paymentParams, (err, result) => {
          if (err) {
            Alert.alert('Error', err.message || 'Payment error');
            return;
          }
          handlePaymentResult(result);
        });
        return;
      }
      Alert.alert('Error', 'JioPaymentSdk native module not found.');
    } catch (err) {
      Alert.alert('Payment Error', err.message || String(err));
    }
  }; [cite: 114, 115, 116, 118, 121, 122, 123, 124, 128, 132, 134]

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Start Jio Payment" onPress={startPayment} />
    </View>
  ); [cite: 139, 140]
}

5.TypeScript typings (optional)

Optional interfaces are available for better type safety:

// jio-payment.d.ts (or in a .ts file)
export interface OrderItem {
  name: string;
  qty?: number;
  price?: number;
}

export interface OrderSummary {
  title?: string;
  items?: OrderItem[];
}

export interface Theme {
  primaryColor?: string; // hex string
  secondaryColor?: string;
}

export interface PaymentParams {
  amount: number;
  env: 'uat'|'prod' | string;
  merchantId: string;
  agregatorId?: string;
  secretKey?: string;
  email?: string;
  userName?: string;
  merchantName?: string;
  merchantImage?: string;
  merchantTrId?: string;
  isAssetMerchantImage?: boolean;
  orderSummary?: OrderSummary;
  theme?: Theme;
  paymentMethod?: string;
  allowedPaymentTypes?: string[];
  timeOut?: number;
}

export interface PaymentResult {
  success: boolean;
  txnId?: string;
  errorMessage?: string | null;
  rawJson?: any;
}

Checkout and Payment UI

The SDK provides a prebuilt UI with selectable payment methods including Card Payments (Visa/MasterCard/Amex), Net Banking, and UPI (note: UPI is not active in test mode). Once launched, the SDK handles:

• Input forms and validation.
• Request signing and redirects.
• In-app WebView for processing or simulation.

UI Highlights include:

• Card Number formatting.
• Validation for Expiry and CVV fields.
• Dynamic bank listing for NetBanking.
• Integrated loader and result screens.