如何在 Angular 2 中集成 Razorpay？

Question

I'm using angular 2. I've tried below URL's to integrate Razorpay [ https://docs.razorpay.com/docs/checkout-form][1]

When i follow this URL, i got these errors like In my '.ts' file code

var options = {
    "key": "YOUR_KEY_ID",
    "amount": "2000", // 2000 paise = INR 20
    "name": "Merchant Name",
    "description": "Purchase Description",
    "image": "/your_logo.png",
    "handler": function (response){
        alert(response.razorpay_payment_id);
    },
    "prefill": {
        "name": "Harshil Mathur",
        "email": "harshil@razorpay.com"
    },
    "notes": {
        "address": "Hello World"
    },
    "theme": {
        "color": "#F37254"
    }
};
var rzp1 = new Razorpay(options);

document.getElementById('rzp-button1').onclick = function(e){
    rzp1.open();
    e.preventDefault();
}

ORIGINAL EXCEPTION: Cannot Find name 'Razorpay' of undefined

Answer 1

Ok am a little late to the party , but i was stuck in same problem.

Razorpay is undefined because its defined on window object, so you need something like window.Razorpay

And as @Pradeep said in comment declare var Razorpay:any , no this won't work either

And @Rajesh Keerthi In '.ts' file we can't access '.js' file so, 'checkout.js' included in html file you can't put script tags in angular 2 components html , because of sanitization ref this

Now coming to solution, how to do it. First put

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

at index.html Now you have Razorpay object on window , but how to access it in .ts file ? Follow this link and create a WindowRef service and inject it in provider as article says, then in your MyComponent.ts file put

import { WindowRef } from './WindowRef';
@Component({...})
class MyComponent {

    constructor(private winRef: WindowRef) {
    }
    rzp1:any;
    options = {
       "key": "rzp_test_HTQz79bVMhpN4L",
       "amount": "2000",
       "name": "Merchant Name",
       ....
       .....
    };

    public initPay():void {
       this.rzp1 = new this.winRef.nativeWindow.Razorpay(this.options);
       this.rzp1.open();
    }
}

And MyComponent.html will have

<button id="rzp-button1" (click)="initPay();">Pay</button>

And Voila!! you have razorpay integrated

Even if you are trying out some other payment gateways like paytm or so, this approach will help

Answer 2

Step 1:

Declare razorPay at where you imported modules. declare var Razorpay: any;

 import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms'; declare var Razorpay: any; @Component({ selector: 'app-checkout', templateUrl: './checkout.component.html', styleUrls: ['./checkout.component.css'] })

Step 2:

Add script file checkout.js to index

Step 3: Add following required function

 payNow( ) { var options = { "key": "rzp_test_dveDexCQKoGszl", "amount":((this.buyNow==1)?this.shared.totalAmountWithDisocuntBuyNow:this.shared.totalAmountWithDisocunt)*100, // 2000 paise = INR 20 "name": " MARKET", "description": "Order #", "handler": function (response){ console.log(response); alert(response.razorpay_payment_id); }, "prefill": { "name": this.shared.orderDetails.billing_firstname + " " + this.shared.orderDetails.billing_lastname, "email": this.shared.customerData.customers_email_address, "contact": this.shared.customerData.customers_telephone, }, "notes": { }, "theme": { "color": "blue" } }; var rzp1 = new Razorpay(options); rzp1.open(); // body... } paid() {alert();}

Answer 3

Add anywhere in your component html file:

<button  (click)="initPay()">Pay</button>

and update your your component.ts file like so:

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

declare var Razorpay: any; 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'client';
    options = {
        "key": 'your app id', // Enter the Key ID generated from the Dashboard
        "amount": "50000", // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise or INR 500.
        "currency": "INR",
        "name": "Acme Corp",
        "description": "A Wild Sheep Chase is the third novel by Japanese author  Haruki Murakami",
        "image": "https://example.com/your_logo",
        "handler": function (response) {
            alert(response.razorpay_payment_id);
        },
        "prefill": {
            "name": "amin uddin",
            "email": "amidenf9701@gmail.com",
            "contact": "7992239847"
        },
        "notes": {
            "address": "note value"
        },
        "theme": {
            "color": "#F37254"
        }
    };
    initPay() {
        var rzp1 = new Razorpay(this.options);
        rzp1.open();
        console.log("works");
    }
}

Answer 4

declare Razorpay inside polyfills.ts file

// polyfills.ts file
declare global {
    interface Window {
        Razorpay: any;
    }
 }

MyComponent.ts file

@Component({...})
class MyComponent {

constructor() {
}
rzp1:any;
options = {
   "key": "rzp_test_HTQz79bVMhpN4L",
   "amount": "2000",
   "name": "Merchant Name",
   ....
   .....
};

public initPay():void {
   this.rzp1 = new window.Razorpay(this.options);
   this.rzp1.open();
}
}