Razorpay Integration with Ionic 3 and Angular 4

Saturday, 2 September 2017

Razorpay is provide payment solutions to online merchants. You can easily integrate with your application for payment solution.
Here we provide steps to integrate it with Ionic Framwork 3.

Step - 1

So, first of all install razorpay-cordova plugin plugin in your application.

cordova plugin add https://github.com/razorpay/razorpay-cordova.git --save

Step- 2

Inside the src folder create a file named delclation declaration.d.ts
put these following declaration  inside the declaration.d.ts

declare module '*';

declare var RazorpayCheckout: any;

Now your integrtation is ready to use.


In your application goto page where you want to use Razorpay and use these code sample.

import { Component } from '@angular/core';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  pay() {
    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: 'demo@email.com',
        contact: '1234567890',
        name: 'My Name'
      theme: {
        color: '#F37254'
      modal: {
        ondismiss: function() {

    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);

Reference is taken from gitHub https://github.com/razorpay
If you are facing any problem comment below.Thank You.


Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...

Most Reading