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.

6 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
  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

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

Most Reading

Labels