Angular 找不到名称 Razorpay

Posted 2023-02-22

【中文标题】Angular 找不到名称 Razorpay

【英文标题】：Angular Cannot find name Razorpay

【发布时间】：2022-01-10 11:35:50

【问题描述】：

我正在使用 Angular (v12.1.5) 构建一个前端，我想使用 Razorpay API 来获取付款。为此，我安装了 Razorpay 库。

npm -i razorpay

现在，我使用了示例代码，如下所示：

var instance = new Razorpay( key_id: 'YOUR_KEY_ID', key_secret: 'YOUR_SECRET' )

编译器无法找到 Razorpay 并在以下位置失败：

Cannot find name 'Razorpay'

我什至尝试在 tsconfig.json 中添加库引用，但这也无济于事。

 "paths": 
      "exceljs": ["node_modules/exceljs/dist/exceljs.min"]
      "Razorpay": ["node_modules/razorpay/dist/razorpay.js"]

有什么建议吗？

【问题讨论】：

这个库是为nodejs（后端）设计的

【参考方案1】：

你可以这样使用它：

import  Component  from '@angular/core';

import Razorpay from 'razorpay';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
)
export class AppComponent 
  constructor() 
    const instance = new Razorpay(
      key_id: 'YOUR_KEY_ID',
      key_secret: 'YOUR_KEY_SECRET',
    );
  

但这是 nodejs 的库，您需要许多 polyfill 才能使其在前端工作

【参考方案2】：

您是否在 @Component 装饰之前添加了这个？：

declare var Razorpay: any;
 
@Component(
....

我从HERE复制了这些步骤以在角度中使用它：

将名为 Razorpay 的变量声明为 any 类型。 使用 Razorpay 结帐所需的所有参数声明一个名为 options 的变量。 一些参数在表单中被捕获 Razorpay 订单 ID 在 REST API 的响应中返回 由于它是一个演示应用程序，其余参数是硬编码的。但在实际应用中，这些值中的大部分都是从用户那里动态获取的。 定义一个处理函数来创建一个 payment.success 事件。这样当事件发生时，支付响应就可以被捕获和处理。 将表单数据绑定到返回 Observable 对象的 OrderService.createOrder() 方法。如果订单创建成功，那么， 它将响应和表单参数中的订单 ID 填充到选项变量中。 使用选项创建 Razorpay 实例并调用 Razorpay.open() 方法来启动支付过程。 为 payment.failed 事件定义一个处理函数，以便在付款失败的情况下记录错误详细信息并在页面中显示失败原因。确保将付款失败的详细信息存储在数据库的 Order 表中。以便客户可以重试付款。 定义一个名为 onPaymentSuccess 的函数，并使用 @HostListener 装饰器将 payment.success 事件与此函数绑定，正如我们在上一篇文章中已经解释的那样。 每当触发 payment.success 事件时，都会调用此函数来处理支付响应。 此函数调用返回 Observable 对象的 OrderService.updateOrder() 函数。成功响应后，它将从响应中设置 paymentId。这样，付款成功消息将与 paymentId 一起显示。

【讨论】：

但这会将 Razorpay 声明为任何类型，如何将其引用为真正的 Razorpay 函数？

你测试了吗？这似乎是 Razorpay 的官方建议。