使用 Angular2 和 stripe.js 导入 Stripe

Posted 2023-02-22

【中文标题】使用 Angular2 和 stripe.js 导入 Stripe

【英文标题】：Import Stripe using Angular2 and stripe.js

【发布时间】：2016-08-01 07:45:18

【问题描述】：

我正在使用 Angular2、Ionic2 和 Stripe.js 进行支付处理。这里ionic2 with stripe payment gateway 的线程正在使用插件https://github.com/Telerik-Verified-Plugins/Stripe/blob/master/doc/index.md，但这并不安全，因为您必须在应用程序中嵌入密钥。甚至页面都在告诉人们不要使用这个插件。

我在这里尝试使用 node.js 版本：

https://www.npmjs.com/package/stripe

但是，我无法弄清楚在 TypeScript 中如何使用 var stripe = require('stripe')(' your stripe API key ');，您必须使用 import。

最后，我确实将<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 放入了 index.html 中，stripe 变量在每个组件中全局显示。但是，我觉得这不是正确的方法，因为当我在每个组件或页面中使用 stripe 对象时，它可能还没有准备好。

使用 Angular2 和 Stripe.js 的正确方法是什么？ Ionic2 特别好，但可选。

谢谢

更新 1

我尝试了npm install stripe，然后使用import '../../node_modules/stripe/lib/stripe.js';，但仍然出现错误：

TypeScript error: /Users/username/Documents/StripePayment/app/pages/home/home.ts(16,23): Error TS2304: Cannot find name 'Stripe'.
Error: Cannot find module '../../node_modules/stripe/lib/stripe.js' from '/Users/username/Documents/StripePayment/app/pages/home'

这是我的带有目录结构的 VS Code 屏幕截图：

【问题讨论】：

import 'path/to/stripe.js'; 应该解决导入问题。但不要包含.js。

我更新了问题，因为该建议不起作用。

@MarcusAsplund 请在下面发布答案，我会接受。谢谢。

很高兴我能提供帮助，我删除了评论并作为答案发布。

此模板包含完整的源代码以及有关如何将 Stripe 集成到您的 Ionic2 应用程序的文档：noodl.io/market/product/P201702241736843/…

【参考方案1】：

在 index.html 中添加 scripttag，然后在 home.ts 中的 import 之后添加声明

declare var Stripe: any; 我相信这是在 ng2 中导入外部库的正确方法

源：Nic Raboy 那里有更多信息；安装外部库的更好方法是从 DefinitelyTyped 下载 typedefs 并使用 $ typings install 安装 然后你应该可以像往常一样导入

当然，这是如果DefinitelyTyped repo 中有typedef。 不过，Stripe 库似乎不存在 typedef。

【讨论】：

我想我可能找到了一个：github.com/DefinitelyTyped/DefinitelyTyped/blob/master/stripe/…

还有这个：github.com/DefinitelyTyped/DefinitelyTyped/blob/master/…

【参考方案2】：

Stripe 现在似乎也有类型定义了

npm install --save stripe

您还可以运行以下命令来获取 TypeScript 定义：

npm install --save @types/stripe

然后你应该可以这样：

import  Stripe  from 'stripe'

以上是伪代码，我没有测试过，但会是类似的。

更多信息在这里： https://www.npmjs.com/package/@types/stripe

【讨论】：

由于stripe 包不导出命名的Stripe 类，您需要改为使用import * as Stripe from 'stripe';。

这是服务器（节点）的类型定义。对于客户端 Stripe.js，请参阅 alligator.io/angular/stripe-elements。

【参考方案3】：

stripe.js 库用于服务器，需要 child_process 模块，并创建自己的服务器。将此库直接导入浏览器环境并不是一种好方法。

【讨论】：

不是 100% 正确的。您可能指的是 NodeJS 服务器代码，是的，它必须在 NodeJS 服务器上。但是，完整的条带集成需要前端和后端的 JS 代码，因此 Stripe 提供