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.


  1. This comment has been removed by the author.

  2. Hi, I have changed everything, But am getting the below Error.
    RazorpayCheckout is not defined
    at PaymentPayUMoneyPage.webpackJsonp.298.PaymentPayUMoneyPage.pay (http://localhost:8001/build/main.js:837:9)
    at new PaymentPayUMoneyPage

    Can you please help me out

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

      Install it again .

    2. Thank you, your solution works me

  3. Starting PC software engineers should begin immediately building up awesome propensities for making PC programs clear for individuals. integration developers conditions give a strong structure to achieving this objective.

  4. Acccording to video integration developers Investigate the two schools of programming. Some get a kick out of the chance to compose code and aggregate it independently, others jump at the chance to compose the code inside programming worked for programming. Both have their own allure and furthermore have there put in the realm of programming development.

  5. c++ programming tutorial
    Wonderful, just what a blog it is! This blog has provided the helpful data to us continue the good work.

  6. This comment has been removed by the author.

    1. hi i am facing issue follow all step so please help me

      ERROR ReferenceError: RazorpayCheckout is not defined

      i have define declare module '*';

      declare var RazorpayCheckout: any;

      in src > declaration.d.ts

      and i used all code where i click Pay button but now i am getting these error so please help me for solve out as soon as possible.

    2. I have done another way currently working properly

    3. how u did..can u share the sample code..its not working for me

    4. Hai Saroj .Run it in your mobile(ionic cordova run android) or install ionic cordova platform add browser and then run ionic run browser .it Works for me

  7. helo can you find the solutions?

  8. Razorpay payment closing(showing error payment canceled) when reopen the app by clicking on app icon in mobile

  9. Hi sir i have process payment with credit card numberso...how to pass card and cvv number in the options param?

  10. declaration.d.ts is not there in my ionic v 3.9 where should i declare that in that case?

  11. Hi, am getting error while using razorpay in my ionic app which is RazorpayCheckout is not defined. how to solve this issue plz help me

    My ionic info:


    Ionic CLI : 5.0.0 (C:\Users\Ramya\AppData\Roaming\npm\node_modules\ionic)
    Ionic Framework : ionic-angular 3.9.2
    @ionic/app-scripts : 3.2.3


    Cordova CLI : not installed
    Cordova Platforms : not available
    Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 4 other plugins)


    cordova-res : not installed
    native-run : not installed


    NodeJS : v8.12.0 (C:\Program Files\nodejs\node.exe)
    npm : 6.4.1
    OS : Windows 10


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

Most Reading