react-native-razorpay

React Native wrapper around our Android and iOS mobile SDKs

Note: Please update to the latest version of react-native and react.This package has been tested on version react-native 0.58.

Note: We no longer support Swift 3 , moving forward we will only support the latest version of swift.This decision is based on the following link which states that Xcode 10 is the last version to support Swift 3.

https://developer.apple.com/documentation/xcode_release_notes/xcode_10_release_notes

Note: This release is meant for Xcode 10. We strongly recommend you to wait till the stable version of react-native that supports Xcode 10 comes out , we have made our fixes but it is still remommended that you wait.You can see here that react-native is still working on a stable Xcode 10 release.Please use your discretion.

facebook/react-native#19573

Note : To avoid duplicate module name collisions please copy the example project to a separate folder and try.

Note: The iOS framework is shipped with simulator architectures , you have to remove them before you archive, just google stripping simulator architectures and follow the steps.Also remember to enable bitcode on both your iOS project as well as the RazorpayCheckout project.

https://razorpay.com/docs/ios

After this replace the framework in /node_modules/react-native-razorpay/ios/ and link your project either using react-native commands or manually.

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

Android - https://docs.razorpay.com/v1/page/android/

iOS - https://razorpay.com/docs/ios/

To know more about Razorpay payment flow and steps involved, 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, 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

Adding Razorpay to root project

Drag the Razorpay.framework file from the Libraries folder and drop it under the root folder, for more info follow this link, after this go to Target > General Settings> Framework, Libraries and Embedded Content section, set the Embed status of Razorpay.framework to Embed & Sign.

Always Embed Swift Standard Binaries - YES

Also make sure the razorpay framework is added in the embedded binaries section and you have Always Embed Swift Standard Binaries set to yes in build settings.

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.razorpay.rn.RazorpayPackage; to the imports at the top of the file
• Add new RazorpayPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-razorpay'
   project(':react-native-razorpay').projectDir = new File(rootProject.projectDir,   '../node_modules/react-native-razorpay/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile project(':react-native-razorpay')

Manual installation

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

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:

   import 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.

   <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: 'void@razorpay.com',
         contact: '9191919191',
         name: 'Razorpay Software'
       },
       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).

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.

Contributing

See the CONTRIBUTING document. Thank you, contributors!

License

react-native-razorpay is Copyright (c) 2016 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.