Monday, 28 November 2016

Cordova/Phonegap/Ionic payment gateway integration for Razorpay

Supported platforms

Android
iOS
Browser
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 https://github.com/razorpay/razorpay-cordova.git --save
(or, phonegap plugin add https://github.com/razorpay/razorpay-cordova.git --save)

Integration code

<button ng-click="check();">pay</button>

$scope.check=function(){
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)

}


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

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

6 comments:

  1. it is working fine on browser but not working on android simulator/mobile. It goes in waiting state. Internet connection is proper.

    ReplyDelete
    Replies
    1. Hi Shahid
      It is working fine for me. Here is the source code.
      https://firebasestorage.googleapis.com/v0/b/test-5b8d6.appspot.com/o/mani%2Fwww%200.1.zip?alt=media&token=7f35d7f7-3d14-4db1-8d89-60f725a64971

      Make sure you are including lib folder of ionic inside www folder. once u click the pay button inapp browser will be opened.

      Delete
    2. it showing error. some files are missing like cordova.js

      Delete
    3. U can Get the library files from https://ionicframework.com/

      Delete
  2. @Mani can you please give a look on bellow mentioned link :-

    http://stackoverflow.com/questions/42648382/uncaught-securityerror-blocked-a-frame-with-origin-https-api-razorpay-com-f

    ReplyDelete
    Replies
    1. Hi Siddharth, It seems a big issue if you can share your app(apk) I can investigate further.

      Delete