使用 Angular2 和 stripe.js 导入 Stripe

Question

我正在使用 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 屏幕截图：

Answer 1

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

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

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

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

Answer 2

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

npm install --save stripe

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

npm install --save @types/stripe

然后你应该可以这样：

import { Stripe } from 'stripe'

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

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

Answer 3

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