com.razorpay.cordova

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

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

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

Integration code

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: '[e-mail]',
    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)

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

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: '[e-mail]',
    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)

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 *">