Razorpay Integration with Ionic 3 and Angular 4

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.

Step-3

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

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

@Component({
  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() {
          alert('dismissed')
        }
      }
    };

    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.