使用Angular2和Stripe .js导入条带

I am using Angular2, Ionic2 and Stripe.js for payment processing. This thread here ionic2 with stripe payment gateway is using the plugin https://github.com/Telerik-Verified-Plugins/Stripe/blob/master/doc/index.md but it's not safe because you have to embed the Secret key inside the app. Even the page is telling people not to use this plugin.

我正在使用Angular2, Ionic2和Stripe。js付款处理。这里的ionic2和stripe支付网关使用的是plugin https://github.com/telerik - verifiedplugins/stripe/master/doc/index.md，但它不安全，因为你必须在应用程序中嵌入秘钥，甚至页面也告诉人们不要使用这个插件。

I tried to use the node.js version here:

我尝试使用节点。js版本:

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

However, I cannot figure out how to do the var stripe = require('stripe')(' your stripe API key '); when in TypeScript, you have to use import.

但是，我不知道如何执行var stripe = require(“stripe”)(“your stripe API key”);在打字稿中，必须使用import。

Finally, I did put <script type="text/javascript" src="https://js.stripe.com/v2/"></script> in index.html and the stripe variable shows globally inside each Component. However, I don't feel like this is the proper way to do it as the stripe object may not be ready by the time I use it inside each Component or Page.

最后，我把 in index。html和stripe变量在每个组件内部显示全局。但是，我不认为这是正确的方法，因为当我在每个组件或页面中使用stripe对象时，它可能还没有准备好。

What's the proper way to use Angular2 and Stripe.js? Ionic2 specifically would be nice but optional.

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

Thanks

谢谢

UPDATE 1

更新1

I tried npm install stripe and then used import '../../node_modules/stripe/lib/stripe.js'; but still got error:

我尝试了npm安装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'

Here is my VS Code screenshot with directory structure:

这是我的VS代码截图，目录结构:

3 个解决方案

#1

Add the scripttag in the index.html and then put a declaration after the imports in home.ts

在索引中添加scripttag。然后在导入后加上一个声明

declare var Stripe: any; I believe this is the correct way to import external libs in ng2

声明var条纹:任何;我相信这是在ng2中导入外部lib的正确方法

Src: Nic Raboy There are a some more info there; the better way to install an external lib is to download the typedefs from DefinitelyTyped and install with $ typings install Then you should be able to import as usual

Nic Raboy有更多的信息;安装外部库的更好的方法是从定义类型下载typedef，然后安装$ typings install，然后您应该可以像往常一样导入

This is, of course, if there are typedefs in the DefinitelyTyped repo. There does not seem to exist typedefs for the Stripe library, though.

当然，这是在确定类型的repo中有typedef时。不过，似乎并没有用于Stripe库的typedef。

#2

Stripe seems to have type definitions now so alongside

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

npm install --save stripe

you can also run the following to get TypeScript definitions:

您还可以运行以下命令来获取打字稿定义:

npm install --save @types/stripe

you should then be able to so something like:

你应该能够做到:

import { Stripe } from 'stripe'

The above is psudo code as Ive not tested it but will will be something similar.

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

More info here: https://www.npmjs.com/package/@types/stripe

更多信息:https://www.npmjs.com/package/@types内缟

#3

The stripe.js library is intended for the server, requires the child_process module, and creates a server of its own. There is not a good way of importing this library directly to a browser environment.

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

#1