Cordova/Phonegap bindings for Razorpay's Mobile SDKs

Official Cordova/Phonegap plugin for integrating Razorpay's checkout.

Supported platforms

Android
iOS
Browser

You can check out the sample apps for cordova, ionic1 & ionic2 in https://github.com/razorpay/razorpay-cordova-sample-app

Usage:

Install the plugin

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

cd your-project-folder
cordova platform add android      # optional
cordova platform add ios          # optional
cordova platform add browser      # optional
cordova plugin add com.razorpay.cordova --save

Note: This release is meant for Xcode 9.3 and above as it uses a framework compiled in Swift 4.1.This will not work in Xcode 9.2 as you will get a "dlyd error : framework not found error".In case you are using an older version of Xcode and need Swift 3.1 visit the following link and download the respective framework.Also make sure that you set Always Embed Swift Standard Libraries of your main target to yes.

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

Note: This release contains a module map embedded in the framework which by default considers that your Xcode is named Xcode.app.If your Xcode is named differently please copy the script added in the scripts/ , paste it and run it in the folder containing the razorpay framework.

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.

For eg:

if the path of the razorpay framework is

/razorpay-cordova/src/ios/Razorpay.framework

paste the script in /razorpay-cordova/src/ios/

and run the scipt , it will perform the required changes to the module map in the framework , you can then copy it and use it like before.

(or, phonegap plugin add com.razorpay.cordova --save)

Integration code

Orders API Flow

With the advent of auto-capture using Order API, the integration needs to change a little (only if you are using this flow). The only change is that the callbacks have to be added as events. Here is a code sample:

var options = {
  description: 'Credits towards consultation',
  image: 'https://i.imgur.com/3g7nmJC.png',
  currency: 'INR',
  key: 'rzp_test_1DP5mmOlF5G5ag',
  order_id: 'order_7HtFNLS98dSj8x'
  amount: '5000',
  name: 'foo',
  prefill: {
    email: 'pranav@razorpay.com',
    contact: '8879524924',
    name: 'Pranav Gupta'
  },
  theme: {
    color: '#F37254'
  }
}

var successCallback = function(success) {
  alert('payment_id: ' + success.razorpay_payment_id)
  var orderId = success.razorpay_order_id
  var signature = success.razorpay_signature
}

var cancelCallback = function(error) {
  alert(error.description + ' (Error '+error.code+')')
}

RazorpayCheckout.on('payment.success', successCallback)
RazorpayCheckout.on('payment.cancel', cancelCallback)
RazorpayCheckout.open(options)

Change the options accordingly. Supported options can be found here.

External Wallets

We also support displaying wallets like Citrus and Paytm, which are currently not a part of the standard Razorpay offering. After the user chooses which one of these they want, control is handed back to you with data like wallet name, contact and email of the user. This helps you take the next steps towards facilitating the payment and Razorpay's role in that payment cycle ends there.

To add a wallet, change the options JSON as follows:

var options = {
  currency: 'INR',
  key: 'rzp_test_1DP5mmOlF5G5ag',
  amount: '5000',
  external: {
    wallets: ['paytm']
  },
  ...
  ...
  ...
}

To get callback for this, add this before calling open:

RazorpayCheckout.on('payment.external_wallet', externalWalletCallback)

Legacy

This is legacy integration code and we will continue to support it till further notice. Your server needs to send capture request in this scenario, after the payment is completed.

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: 'pranav@razorpay.com',
    contact: '8879524924',
    name: 'Pranav Gupta'
  },
  theme: {
    color: '#F37254'
  }
}

var successCallback = function(payment_id) {
  alert('payment_id: ' + payment_id)
}

var cancelCallback = function(error) {
  alert(error.description + ' (Error '+error.code+')')
}

RazorpayCheckout.open(options, successCallback, cancelCallback)

Android Lifecycle Guide

It is recomended that you read this first before proceeding with this section

Since our plugin launches a new activity on Android, the cordova activity goes in the background and might get destroyed by the Android System. For this scenario, you need to add the following code to make sure the payment result is delivered after the cordova activity is recreated:

// You need to register an event listener for the `resume` event
document.addEventListener('resume', onResume, false);
var onResume = function(event) {
        // Re-register the payment success and cancel callbacks
        RazorpayCheckout.on('payment.success', successCallback)
        RazorpayCheckout.on('payment.cancel', cancelCallback)
        // Pass on the event to RazorpayCheckout
        RazorpayCheckout.onResume(event);
      };

Things to be taken care:

Add the integration code snippet after deviceready event.
On browser platform, change the Content Security Policy to whitelist the razorpay.com domain.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://*.razorpay.com data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

Due to the way ionic works, we can't support ionic serve at the moment. Try using ionic run browser instead of ionic serve. ionic serve doesn't support cordova browser plugins at the moment. See driftyco/ionic-cli#354.

bastikikang/razorypay