如何在 Angular 2 中集成 Razorpay？

Question

我正在使用 angular 2。我嘗試在 URL 下方集成 Razorpay [ https://docs.razorpay.com/docs/checkout-form][1]

當我跟隨這個 URL 時，我得到了這些錯誤，比如在我的 '.ts' 文件代碼中

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

原始例外：找不到未定義的名稱“Razorpay”

Answer 1

好吧，我參加聚會有點晚了，但我遇到了同樣的問題。

Razorpay是未定義的，因為它定義在 window 對象上，所以你需要像window.Razorpay這樣的東西

正如@Pradeep 在評論中所說的 declare var Razorpay:any ，不，這也行不通

並且@Rajesh Keerthi In '.ts' file we can't access '.js' file so, 'checkout.js' included in html file不能將腳本標簽放在 angular 2 組件 html 中，因為清理引用了這個

現在來到解決方案，如何去做。 先放

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

在index.html現在您在窗口上有 Razorpay 對象，但如何在 .ts 文件中訪問它？ 按照此鏈接創建一個WindowRef服務並將其注入提供者，如文章所述，然后在您的 MyComponent.ts 文件中放入

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

而 MyComponent.html 將有

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

瞧！！ 你已經集成了razorpay

即使您正在嘗試其他一些支付網關，如 paytm 左右，這種方法也會有所幫助

Answer 2

第1步：

在您導入模塊的位置聲明 razorPay。 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'] })

第2步：

將腳本文件 checkout.js 添加到索引

第 3 步：添加以下所需功能

 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

在組件 html 文件中的任何位置添加：

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

並像這樣更新你的 component.ts 文件：

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

聲明Razorpay內polyfills.ts文件

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

MyComponent.ts 文件

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