How to Integrate Razorpay in Angular 2?

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": "[email protected]"
    },
    "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

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();
}
}