Needlessly Provoking Marsupials


    2.2.9 • Public • Published


    npm NPM Version NPM Downloads install size


    React Native wrapper around our Android and iOS mobile SDKs

    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 -

    To know more about Razorpay payment flow and steps involved, read up here:


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


    Using npm:

    npm install --save react-native-razorpay

    or using yarn:

    yarn add react-native-razorpay


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




    For React Native 0.60+

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

    For React Native 0.59 and lower

    1. $ npm install react-native-razorpay --save // Install the Razorpay React Native Standard SDK using the npm command.

    2. react-native link react-native-razorpay // Link the SDK with React Native Project using Xcode.

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

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


    iOS (via CocoaPods)

    Add the following line to your build targets in your Podfile

    pod 'react-native-razorpay', :path => '../node_modules/react-native-razorpay'

    Then run pod install

    iOS (without CocoaPods)

    In XCode, in the project navigator:

    • Right click Libraries
    • Add Files to [your project's name]
    • Go to node_modules/react-native-razorpay
    • Add the .xcodeproj file

    In XCode, in the project navigator, select your project.

    • Add the libRNDeviceInfo.a from the deviceinfo project to your project's Build Phases ➜ Link Binary With Libraries
    • Click .xcodeproj file you added before in the project navigator and go the Build Settings tab. Make sure All is toggled on (instead of Basic).
    • Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React
    • Mark both as recursive (should be OK by default).

    Run your project (Cmd+R)

    1. Open up android/app/src/main/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
    1. 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')
    2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':react-native-razorpay')


    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


    1. Import RazorpayCheckout module to your component:

      import RazorpayCheckout from 'react-native-razorpay';
    2. Call 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: '',
          currency: 'INR',
          key: '', // Your api key
          amount: '5000',
          name: 'foo',
          prefill: {
            email: '',
            contact: '9191919191',
            name: 'Razorpay Software'
          theme: {color: '#F37254'}
        } => {
          // 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.


    • Still having trouble with integrating our payment gateway? Follow this link for more info.


    See the CONTRIBUTING document. Thank you, contributors!


    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.


    npm i react-native-razorpay

    DownloadsWeekly Downloads






    Unpacked Size

    654 kB

    Total Files


    Last publish


    • vivek_shindhe9604
    • captn3m0
    • razorpay-dev
    • pronav
    • kamleshchandnani
    • abhinav-95
    • sumedht