Razorpay checkout in angular or How to integrate Razorpay in angular

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

 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