react-native-razorpay

React Native wrapper around our Android and iOS mobile SDKs

• Prerequisites
• Installation
• Requirements
• Linking
• Usage
• Example App
• Proguard Rules
• Notes
• FAQ's
• Contributing
• License

The following documentation is only focussed on the react-native wrapper around our Android and iOS sdks. To know more about our react-native SDK, refer to the following documentation -

https://razorpay.com/docs/payment-gateway/react-native-integration/

To know more about Razorpay payment flow and steps involved, read up here: https://docs.razorpay.com/docs

Prerequisites

• Learn about the Razorpay Payment Flow.
• Sign up for a Razorpay Account and generate the API Keys from the Razorpay Dashboard. Using the Test keys helps simulate a sandbox environment. No actual monetary transaction happens when using the Test keys. Use Live keys once you have thoroughly tested the application and are ready to go live.

Installation

Using npm:

1npm install --save react-native-razorpay

or using yarn:

1yarn add react-native-razorpay

For Expo Users:

1npx expo install react-native-razorpay

Requirements

• iOS 10.0+ / macOS 10.12+ / tvOS 10.0+ / watchOS 3.0+
• Xcode 11+
• Swift 5.1+

Linking

Automatic

1# install
2npm install react-native-razorpay --save
3cd ios && open podfile # Change the platform from iOS 9.0 to 10.0
4pod install && cd .. # CocoaPods on iOS needs this extra step
5# run
6yarn react-native run-ios

Manual

Note for Expo Applications:

After adding the react-native-razorpay package,the option to prebuild the app must be used(this generates the android/ios platform folders in the project to use native-modules). Command for which,

1npx expo prebuild

After which the application will be installed on the device/emulator.

1npx expo run:[ios|android] --device

Usage

Sample code to integrate with Razorpay can be found in index.js in the included example directory.

To run the example, simply do the following in example directory and then link iOS SDK as explained in the previous section:

$ npm i

Steps

1. Import RazorpayCheckout module to your component:

   1import RazorpayCheckout from 'react-native-razorpay';

2. Call RazorpayCheckout.open method with the payment options. The method returns a JS Promise where then part corresponds to a successful payment and the catch part corresponds to payment failure.

   1<TouchableHighlight onPress={() => {
   2  var options = {
   3    description: 'Credits towards consultation',
   4    image: 'https://i.imgur.com/3g7nmJC.png',
   5    currency: 'INR',
   6    key: '', // Your api key
   7    amount: '5000',
   8    name: 'foo',
   9    prefill: {
   10      email: 'void@razorpay.com',
   11      contact: '9191919191',
   12      name: 'Razorpay Software'
   13    },
   14    theme: {color: '#F37254'}
   15  }
   16  RazorpayCheckout.open(options).then((data) => {
   17    // handle success
   18    alert(`Success: ${data.razorpay_payment_id}`);
   19  }).catch((error) => {
   20    // handle failure
   21    alert(`Error: ${error.code} | ${error.description}`);
   22  });
   23}}>

A descriptive list of valid options for checkout is available (under Manual Checkout column).

Proguard Rules

If you are using proguard for your builds, you need to add following lines to proguard files

-keepattributes *Annotation*
-dontwarn com.razorpay.**
-keep class com.razorpay.** {*;}
-optimizations !method/inlining/
-keepclasseswithmembers class * {
  public void onPayment*(...);
}

Things to be taken care

• The react native plugin is wrapper around native SDK, so it doesn't work with the tools like expo which doesn't support native modules.

FAQ's

• For UPI Intent in iOS, the info.plist in iOS should be modified to include LSApplicationQueriesSchemes
  • For Bare React-Native Apps:
    • info.plist can directly be modified from the xcode project. LSApplicationQueriesSchemes takes as array value and can currently include only ["tez","phonepe","paytmmp"]
  • For Expo Apps:
    • Directly modifying info.plist is discouraged, and hence this should be added in app.json

    1  "ios": {
    2    "infoPlist": {
    3      "LSApplicationQueriesSchemes": [
    4         "tez",
    5         "phonepe",
    6         "paytmmp"
    7      ]
    8    }
    9  }

    • P.S: The apps won't be visible if the application is run with metro builder. The info.plist is generated successfully and integrated only when the app is built as standalone app.
• Still having trouble with integrating our payment gateway? Follow this link for more info.

Contributing

See the CONTRIBUTING document. Thank you, contributors!

License

react-native-razorpay is Copyright (c) 2020 Razorpay Software Pvt. Ltd. It is distributed under the MIT License.

We ♥ open source software! See our other supported plugins / SDKs or contact us to help you with integrations.