如何在Angular 2中集成Razorpay? [英] How to Integrate Razorpay in Angular 2?

问题描述

我正在使用angular2.我尝试在URL下方集成Razorpay [ https://docs.razorpay.com/docs/checkout-form][1 ]

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

当我遵循此URL时，出现以下错误: 在我的".ts"文件代码中

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": "[e-mail]"
    },
    "notes": {
        "address": "Hello World"
    },
    "theme": {
        "color": "#F37254"
    }
};
var rzp1 = new Razorpay(options);

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

原始例外:找不到未定义的名称"Razorpay"

ORIGINAL EXCEPTION: Cannot Find name 'Razorpay' of undefined

推荐答案

好的，聚会晚了一点，但我陷入了同样的问题.

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

Razorpay是未定义的，因为它是在窗口对象上定义的，因此您需要类似window.Razorpay

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

正如@Pradeep在评论中所说的，声明var Razorpay:any，这也不行

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

和@Rajesh Keerthi In '.ts' file we can't access '.js' file so, 'checkout.js' included in html file一样，您不能将脚本标签放置在angular 2组件html中，因为进行了消毒ref

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>

在index.html 现在您在窗口上有Razorpay对象，但是如何在.ts文件中访问它呢? 遵循此链接并创建WindowRef服务并注入如文章中所述，在提供程序中，然后在您的 MyComponent.ts文件放

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

而MyComponent.html将具有

And MyComponent.html will have

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

还有瞧！您已经集成了razorpay

And Voila!! you have razorpay integrated

即使您正在尝试使用其他付款网关(例如paytm左右)，这种方法也将有所帮助

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

这篇关于如何在Angular 2中集成Razorpay?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！