使用Angular2和stripe.js导入带

Question

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

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

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

但是，我不知道如何在var stripe = require('stripe')(' your stripe API key ');中执行TypeScript，您必须使用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代码屏幕截图：

​

​

Answer 1

在index.html中添加scripttag，然后在home.ts导入之后放置一个声明

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

Src：Nic Raboy还有一些更多的信息；安装外部库的更好方法是从DefinitelyTyped下载typedefs并使用$ typings install进行安装，这样您就可以像往常一样导入

当然，这是如果DefinitelyTyped回购中有类型防御的话。不过，Stripe库似乎不存在类型防御。

Answer 2

条纹现在似乎已经有了类型定义。

npm install --save stripe

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

npm install --save @types/stripe

然后，你应该能够这样做：

import { Stripe } from 'stripe'

上面是psudo代码，因为我还没有对它进行测试，但是将是类似的代码。

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

Answer 3

stripe.js库用于服务器，需要child_process模块，并创建自己的服务器。没有一种很好的方法可以直接将这个库导入浏览器环境。