React Native Integration

Zoho Payments provides a React Native SDK to securely collect payments in your cross-platform app for iOS and Android. React Native integration allows your app to communicate with Zoho Payments, handle transactions, and manage checkout flows across platforms using a pre-built, secure checkout UI.

Platform Requirements for Android

Before using the SDK, ensure your project is properly configured so it functions correctly on Android and supports all required dependencies:

1. Set minSdkVersion to 26 or higher in android/app/build.gradle.
2. Add the Zoho Maven repository in android/build.gradle:

allprojects {
    repositories {
        maven { url 'https://maven.zohodl.com' }
    }
}

Platform Requirements for iOS

1. Go to your project’s root directory and run cd ios && pod install.
2. Add the below snippet inside the app target’s Podfile.

source 'https://github.com/zoho/zpayments-ios-sdk.git'

3. Run pod install again to apply the changes.

1. Add React Native SDK

To begin the integration, add the Zoho Payments React Native SDK to your application.

npm install zoho-payments-react-native-sdk

Or using Yarn:

yarn add zoho-payments-react-native-sdk

2. Create Payment Session

To initiate the payment process, you need to create a payment session. Based on your payment type, you can create the session for one-time or recurring payments.

3. Integrate SDK

To integrate the SDK and enable payment processing in your React Native application, you need to configure and initialize it within your project. The SDK provides methods to initialize, launch checkout, and handle payment results. Here are the main SDK methods you’ll use:

Import the SDK

Import the initialize and showCheckout methods from the SDK.

import { initialize, showCheckout } from 'zoho-payments-react-native-sdk';

Initialize SDK

Initialize the SDK with your API Key, Account ID, Domain, and Environment before invoking the checkout widget. This is required before starting any checkout process.

initialize('YOUR_API_KEY', 'YOUR_ACCOUNT_ID', 'india', 'live');

Configure checkout options

Set up the checkout options by providing your payment session details along with the customer’s information as shown below:

const options = {
  paymentSessionId: 'YOUR_PAYMENT_SESSION_ID',   // Required
  description: 'Order #12345',                   // Optional
  invoiceNumber: 'INV-001',                      // Optional
  referenceNumber: 'REF-001',                    // Optional
  name: 'John Doe',                              // Optional
  email: 'john@example.com',                     // Optional
  phone: '+919876543210',                        // Optional
  paymentMethod: 'upi'                           // Optional: 'card' | 'netbanking' | 'upi'

};

4. Invoke Checkout Widget

Invoke the checkout widget to initiate the payment process. Use the sandbox environment for testing, and switch to production when you’re ready to go live.

try {
  const result = await showCheckout({
  paymentSessionId: 'ps_1234567890',
  description: 'Order #12345',
  name: 'John Doe',
  email: 'john@example.com',
  phone: '+919876543210',
  paymentMethod: 'upi',

  });

  // Payment succeeded
  console.log('Payment ID:', result.paymentId);
  console.log('Signature:', result.signature);
  if (result.mandateId) {
    console.log('Mandate ID:', result.mandateId);
  }
} catch (e: any) {
  // Payment failed or cancelled
  console.log('Error Code:', e?.code);
  console.log('Error Message:', e?.message);
}

If you’re facing any errors while processing payments via mobile app, refer to the error messages to identify and resolve the issue.

5. Handle Payment Result

After calling showCheckout, the SDK returns a success result upon completion or throws an error if the payment fails.

6. Confirm the Payment

Once the customer completes the payment, the SDK will return a paymentId and signature. Send these to your backend server to confirm the payment and update your system.

7. Verify Payment Status

You can verify your payment status in three ways:

• Verify via Widget Response: After receiving the paymentId, verify the payment status using the Payment Retrieve API. For recurring payments, use the Retrieve Mandate API to check specific mandates. Based on the status returned (success, failure, or pending), update your system.

• Verify via Webhooks: Use your configured webhooks for the events payment.success and payment.failed to receive the final payment status directly.

• Verify via Session ID: If you haven’t received the payment status via the widget response or webhooks, use the Payment Session Retrieve API to verify the payment result.