Razorpay in ionic 2

Razorpay in ionic 2

Payment gateway

The payment gateway is a service provider to pay a money from authorizes card or directly from the internet banking. A payment gateway is a transaction provider software to receive the amount from the card or net banking

Razorpay

Razor pay is the Cordova plugin to full fill the user payment method. The Razorpay is a transaction plugin to pay money from the card. Razorpay is switching to authorization user and transfer money to the authentication owners

How to generate Razorpay plugin ionic 2

Install ionic

ionic a hybrid open source project, open command prompt and run the command install the ionic.

npm install -g cordova ionic

create an Ionic project

create a new ionic project and install the razorpay plugin to transfer the amount to authenticate the user

ionic start myapp blank

How to use the Razorpay plugin

To install the Razorpay plugin

This command installs all the package of Razorpay plugin in the project. 

cordova plugin add com.razorpay.cordova  --save

To check the plugin installation, open project and check in plugin folder(com.razorpay.cordova) or open the command prompt and run the command(ionic plugin list).

To use javascript in typescript file

Call the javascript function, first declare the variable in the declaration.d.ts file and we can call the function in typescript file.

declare var RazorpayCheckout: any;

Integration code

Declare transid, payment, paymentid. transid is used to get the unique id from the server to check the authenticated user, payment, paymentid is the local variable to store the user data.

var trans = this.trans_id;
let payment;
let paymentid; 

Then declare option variable and it contains the description, image logo, currency type, key identity, transaction amount, name of payment gateway, optional as user details, CSS style for payment and also dismiss function to redirect to normal page

    var options = {
      description: 'Paying gym online',
      image: 'http://alivefitnez.com/asset/img/logo.png',
      currency: 'INR',
      key: this.key,
      amount: this.price,
      name: 'Alive Fitnez',
      prefill: {
        email: this.email,
        contact: this.phone,
        name: this.name
      },
      theme: {
        color: '#F37254'
      },
      modal: {
        ondismiss: function() {
          alert('dismissed')
        }
      }
    }
           

If the payment transaction to authenticated user by card or another method. Then the page redirects to the normal page.  successCallback() function is to indicate the payment success.

    var successCallback = function(payment_id) {
     // alert("Payment Success, Your order has been placed")
    };

cancelCallback() function is to indicate payment error in the page and it will give error message and pass to normal page

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

platformready function is used to check whether the app is ready on a mobile phone. RazorpayCheckout is declared in declaration.d.ts and it can be used to call the function from com.razorpay.cordova plugin.

Now we can call the function with an argument like options, successCallback, cancelCallback. if successcallback function calls then the razorpayment page open to transfer the amount.

    this.platform.ready().then(() => {
      RazorpayCheckout.open(options, successCallback, cancelCallback);
    })