react-native-razorpay

React Native wrapper around our Android and iOS mobile SDKs

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

Installation

This has 3 steps: add to project, installation and linking iOS SDK.

Add to project

Run the following on terminal from your project directory:

Note: For Windows users, please run this on Git Bash instead of Command Prompt. You can download Git for Windows here.

$ npm i react-native-razorpay --save

Automatic installation

$ react-native link react-native-razorpay

Manual installation

If the above command doesn't work for you (installation), try these steps from wiki.

Additional Steps for Linking iOS SDK

React Native creates static library for each plugin / library / framework / native module being used.

Due to some limitation on the way Xcode links static and dynamic libraries / frameworks to projects, we require some additional steps to be followed to link our iOS SDK to the React Native project.

You can skip steps 1, 2 and 3 if you used npm.

Download Razorpay's iOS SDK from here and unzip it.
Delete the .framework file from path/to/your/project/node_modules/react-native-razorpay/ios.
Copy the .framework file obtained in step 1 to path/to/your/project/node_modules/react-native-razorpay/ios.
Open path/to/your/project/ios/<your_project>.xcworkspace or path/to/your/project/ios/<your_project>.xcodeproj
Also link the .framework file directly to your project in Xcode. You can do this by simply dragging-and-dropping the .framework file into Xcode under directory named your_project. Check the Copy items if needed box and select your project target from the list below.
Add the following line of code in your AppDelegate.m under the imports section:
#import <dlfcn.h>
Add the following line of code in your AppDelegate.m inside the application:didFinishLaunchingWithOptions: method:
dlopen("Razorpay.framework/Razorpay", RTLD_LAZY | RTLD_GLOBAL);

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

Import RazorpayCheckout module to your component:

import RazorpayCheckout from 'react-native-razorpay';

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.

<TouchableHighlight onPress={() => {
  var options = {
    description: 'Credits towards consultation',
    image: 'https://i.imgur.com/3g7nmJC.png',
    currency: 'INR',
    key: 'rzp_test_1DP5mmOlF5G5ag',
    amount: '5000',
    name: 'foo',
    prefill: {
      email: 'akshay@razorpay.com',
      contact: '8955806560',
      name: 'Akshay Bhalotia'
    },
    theme: {color: '#F37254'}
  }
  RazorpayCheckout.open(options).then((data) => {
    // handle success
    alert(`Success: ${data.razorpay_payment_id}`);
  }).catch((error) => {
    // handle failure
    alert(`Error: ${error.code} | ${error.description}`);
  });
}}>

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

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.

Contributing

See the CONTRIBUTING document. Thank you, contributors!

License

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

kashishgrover / react-native-razorpay