web-dev-qa-db-ja.com

Angular2とstripe.jsを使用してStripeをインポートします

支払い処理に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

ただし、TypeScriptでimportを使用する必要がある場合、var stripe = require('stripe')(' your stripe API key ');の実行方法がわかりません。

最後に、index.htmlに<script type="text/javascript" src="https://js.stripe.com/v2/"></script>を入れましたが、stripe変数は各コンポーネント内にグローバルに表示されます。ただし、各コンポーネントまたはページ内で使用するまでにstripeオブジェクトの準備ができていない可能性があるため、これが適切な方法であるとは思いません。

Angular2とStripe.jsを使用する適切な方法は何ですか？ Ionic2は特に素晴らしいですが、オプションです。

ありがとう

UPDATE 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'

これがディレクトリ構造のVSCodeスクリーンショットです：

enter image description here

javascriptionic-frameworkangularstripe-paymentsionic2
12
HP.

Index.htmlにscripttagを追加し、home.tsにインポートした後に宣言を配置します

declare var Stripe: any;これがng2に外部ライブラリをインポートする正しい方法だと思います

Src： Nic Raboy そこにはもう少し情報があります。外部ライブラリをインストールするより良い方法は、typedefを DefinitelyTyped からダウンロードし、$ typings installでインストールすることです。そうすれば、通常どおりにインポートできるはずです。

もちろん、これはDefinitelyTypedリポジトリにtypedefがある場合です。ただし、Stripeライブラリのtypedefは存在しないようです。

13
MarcusAsplund

Stripeにはタイプ定義があるようです。

npm install --save stripe

以下を実行して、TypeScript定義を取得することもできます。

npm install --save @types/stripe

そうすれば、次のようなことができるはずです。

import { Stripe } from 'stripe'

上記は私がテストしていないので疑似コードですが、似たようなものになります。

詳細はこちら： https://www.npmjs.com/package/@types/stripe

3
bUKaneer

Stripe.jsライブラリはサーバーを対象としており、child_processモジュールを必要とし、独自のサーバーを作成します。このライブラリをブラウザ環境に直接インポートする良い方法はありません。

1
Julian Gong