Ok, llegué un poco tarde a la fiesta, pero estaba atrapado en el mismo problema.

Razorpay no está definido porque está definido en el objeto de la ventana, por lo que necesita algo como window.Razorpay

Y como dijo @Pradeep en el comentario declare var Razorpay:any, no, esto tampoco funcionará

Y @Rajesh Keerthi In '.ts' file we can't access '.js' file so, 'checkout.js' included in html file no puede colocar etiquetas de secuencia de comandos en angular 2 componentes html, debido a la desinfección ref esto

Ahora llegando a la solución, cómo hacerlo. primero puesto

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

en index.html Ahora tiene el objeto Razorpay en la ventana, pero ¿cómo acceder a él en el archivo .ts? Siga este enlace y cree un servicio WindowRef e inyéctelo en el proveedor como dice el artículo, luego en su archivo MyComponent.ts coloque

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

Y MyComponent.html tendrá

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

¡¡Y voilá!! tienes razorpay integrado

Incluso si está probando otras pasarelas de pago como paytm, este enfoque lo ayudará.

Paso 1:

Declare razorPay en el lugar donde importó los módulos. 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'] })

Paso 2:

Agregue el archivo de script checkout.js al índice

Paso 3: agregue la siguiente función requerida

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

Agregue en cualquier parte de su archivo html de componente:

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

y actualice su archivo componente.ts así:

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