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.

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.

11 comments

  1. This comment has been removed by the author.

    ReplyDelete
  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

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

      Install it again .

      Delete
    2. Thank you, your solution works me

      Delete
  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.

    ReplyDelete
  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.

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

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
    Replies
    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.
      thankyou

      Delete
  7. helo can you find the solutions?

    ReplyDelete

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

Most Reading

Labels