Subscription React Native Integration

Learn more about the subscription react native sdk integration in your app

Setting Up SDK

The React Native SDK is available on npm.org. You can get the latest sdk 2.2.5 here.
The SDK supports Android SDK version 19 and later, and iOS 10.3 and later.

To install the SDK, run the following command in your project directory:

npm

npm install react-native-cashfree-pg-sdk

iOS

Add this to your application’s info.plist file.

<key>LSApplicationCategoryType</key>
<string></string>
<key>LSApplicationQueriesSchemes</key>
<array>
<string>phonepe</string>
<string>tez</string>
<string>paytmmp</string>
<string>bhim</string>
<string>amazonpay</string>
</array>

cd ios
pod install --repo-update

Step 1: Creating a Subscription

Before you can process payments, you must create a subscription. Create an API endpoint on your server that generates the subscription and communicates with your frontend.

Node

Creating Subscription from Node SDK

Java

Creating Subscription from Java SDK

Golang

Creating Subscription from Golang SDK

Dotnet

Creating Subscription from Dotnet SDK

Python

Creating Subscription from Python SDK

PHP

Creating Subscription from PHP SDK

After you create the subscription, you receive a subscription_id and a subscription_session_id.

Step 2: Opening the Subscription Checkout Payment Page

After creating the subscription, open the payment page so the customer can complete the payment.

To complete the payment:

1. Enable Subscription flow flag in Android Manifest
2. Create a CFSubscriptionSession object.
3. Set payment callback.
4. Initiate the payment

Enable Subscription flow flag

Add the following entry inside the <application> tag in your Android manifest file. If you do not enable the cashfree_subscription_flow_enable flag, the SDK will not provide a payment callback.

java

  <application
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name">

      <meta-data
          android:name="cashfree_subscription_flow_enable"
          android:value="true"
          tools:replace="android:value"/>
  </application>

Create a Subscription Session

This object contains essential information about the subscription, including the subscription session ID (subscription_session_id) and subscription ID (subscription_id) obtained from creation step. It also specifies the environment (sandbox or production).

import {
  CFEnvironment,
  CFSubscriptionSession,
} from 'cashfree-pg-api-contract';

try {
      const session = new CFSubscriptionSession(
        'subscription_session_id',
        'subscription_id',
        CFEnvironment.SANDBOX
      );
}
catch (e: any) {
      console.log(e.message);
}

Setup payment callback

You need to set up callback handlers to handle events after payment processing. This must be set before calling doSubscriptionPayment.

onVerify(orderID: string)
onError(error: CFErrorResponse, orderID: string)

Make sure to set the callback at componentDidMount and remove the callback at componentWillUnmount as this also handles the activity restart cases and prevents memory leaks.

Always call setCallback before calling doSubscriptionPayment method of SDK

import {
  CFErrorResponse,
  CFPaymentGatewayService,
} from 'react-native-cashfree-pg-sdk';

export default class App extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    console.log('MOUNTED');
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        this.changeResponseText('orderId is :' + orderID);
      },
      onError(error: CFErrorResponse, orderID: string): void {
        this.changeResponseText(
          'exception is : ' + JSON.stringify(error) + '\norderId is :' + orderID
        );
      },
    });
  }

  componentWillUnmount() {
    console.log('UNMOUNTED');
    CFPaymentGatewayService.removeCallback();
  }
}

Initiate the Payment

Call doSubscriptionPayment() to open the Cashfree subscription checkout screen. This will present the user with the payment options and handle the payment process.

async _startSubscriptionCheckout() {
    try {
        const session = CFSubscriptionSession(
            'subscription_session_id',
            'subscription_id',
            CFEnvironment.PRODUCTION/SANDBOX,
        );
        CFPaymentGatewayService.doSubscriptionPayment(session);

    } catch (e: any) {
        console.log(e.message);
    }
}

Sample Code

import * as React from 'react';
import {Component} from 'react';

} from 'react-native';
import {
  CFErrorResponse,
  CFPaymentGatewayService,
  CFCard,
} from 'react-native-cashfree-pg-sdk';
import {
  CFEnvironment,
  CFSubscriptionSession,
} from 'cashfree-pg-api-contract';


export default class App extends Component {
  componentWillUnmount() {
    console.log('UNMOUNTED');
    CFPaymentGatewayService.removeCallback();
  }

  componentDidMount() {
    console.log('MOUNTED');
    CFPaymentGatewayService.setCallback({
      onVerify(orderID: string): void {
        console.log('orderId is :' + orderID);
      },
      onError(error: CFErrorResponse, orderID: string): void {
        console.log(
          'exception is : ' +
            JSON.stringify(error) +
            '\norderId is :' +
            orderID,
        );
      },
    });
  }

  async _startSubscriptionCheckout() {
    try {
      const session = CFSubscriptionSession(
            'subscription_session_id',
            'subscription_id',
            CFEnvironment.PRODUCTION/SANDBOX,
        );
      CFPaymentGatewayService.doSubscriptionPayment(session);
    } catch (e: any) {
      console.log(e.message);
    }
  }

  render() {
    return (
      <ScrollView>
          <View style={styles.button}>
            <Button
              onPress={() => this._startSubscriptionCheckout()}
              title="Start Subscription Checkout"
            />
      </ScrollView>
    );
  }
}

This SDK is compatible with expo framework. Sample Expo framework

Step 4: Confirming the Payment

After the payment is completed, confirm the subscription status to verify whether the payment was successful. The user will return to your activity after checkout.

You must always verify payment status from your backend. Before delivering the goods or services, please ensure you call check the subscription status from your backend. Ensure you check the subscription status from your server endpoint.

Testing

To test your integration:

1. Open the Network tab in your browser’s developer tools.
2. Click the button and check the console logs.
3. Use console.log(session) inside your button click listener to confirm the correct error returned.