Question

我使用了角度2.我已尝试在URL下面集成Razorpay [https://docs.razorpay.com/docs/checkout-form][1]

当我按照这个URL时，我得到了这些错误在我的＆＃39;＆＃39;文件代码

stringLength + 1

原始例外：找不到姓名＆＃39; Razorpay＆＃39;未定义的

Answer 1

好的，我有点迟到了，但我遇到了同样的问题。

Razorpay未定义，因为它在window对象上定义，所以你需要像window.Razorpay

这样的东西

正如@Pradeep在评论中所说，var razorpay：任何，没有，这不会起作用

和@Rajesh Keerthi In '.ts' file we can't access '.js' file so, 'checkout.js' included in html file由于清理引用this

，您无法将脚本标记放入角度2组件html中

现在要解决，如何做到这一点。先放

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

index.html 现在你在窗口上有Razorpay对象，但是如何在.ts文件中访问它？按照此link创建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>

和Voila !!你有razorpay整合

即使您正在尝试其他支付网关，例如paytm等，这种方法也会有所帮助

Answer 2

第1步：

在您导入模块的位置声明razorPay。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="btn-Preview-Image" type="button" value="Preview"/> <div id="previewImage"></div> <a id="btn-Convert-Html2Image" href="#">Download</a>

declare var Razorpay: any;

第2步：

将脚本文件checkout.js添加到索引

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

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']
})

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

在 Ployfills.ts 文件中

声明 Rozorpay

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

如何在Angular 2中集成Razorpay？

4 个答案: