React JSのストライプ

Question

React JSでStripe.jsを使ってトークンを作成する必要がありますが、簡単な方法はありません。 Node.jsのでは、私はこのようなものだろう：

stripeClient.tokens.create({ 
     card: { 
     number: '4242424242424242', 
     exp_month: 12, 
     exp_year: 2050, 
     cvc: '123' 
     } 

をしかし、ストライプNPMモジュールは、JSを反応させるのでは私のために動作しません。これは明らかにノードpibraryであることから、私は

<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 

しかしを使用したい私は外部のライブラリを実装するためのベストプラクティスがどうあるべきかわからないので、

Cannot resolve module 'child_process'

：私はエラーを取得していますReact

Answer 1

過去に行ったように、他のクライアントサイドライブラリと同じように追加できます。

は、このスクリプトタグを含める：

<script type="text/javascript" src="https://js.stripe.com/v2/"></script> 

その後、それはあなたのコード内で公開しているグローバルを使用しています。

import React from 'react'; 

// we didn't have to import stripe, because it's already 
// in our global namespace. 
Stripe.setPublishableKey('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); 

NPMから要求できるほどクリーンではありませんが、正常に動作します。

Answer 2

ストライプをReactで使用する際のガイダンスをお探しの方：Accept Stripe Payments with React and Expressはストレイプ・イン・リアクト（create-reaction-app）と支払い要求を処理して転送する最小限のExpressサーバーストライププラットフォームに接続します。この記事では、定型文を最小限に保ち、あなた自身で簡単に試すことができるオープンソースプロジェクトが付属しています。

Answer 3

ブレインに切り替え
彼らはcreate-react-app（Webpack/Browserify）で使用することができ、クライアント側のNPMパッケージをサポート：「https://developers.braintreepayments.com/guides/client-sdk/setup/javascript/v3#npm

npm install --save braintree-web

残念ながらストライプをドンと反応一緒にうまく合わせる
Stripe on NPMのバージョンはサーバー側でのみ使用できます。ライブラリをWebpack/Browserify（のようにcreate-react-app）しても、公開鍵を設定してクレジットカード情報をトークン化するためのクライアント側機能が欠落しています。
クライアント側では、ストライプは"stripe.js"を外部URL（https://js.stripe.com/v3/）から使用するほうを優先します。残念ながら、外部URLはには適していません。たとえば、ES6 importなどのcreate-react-appは使用できません。外部ファイルはWebpackにバンドルされていません。さらに、バージョン（v3）はユーザーにelementsメソッドを使用させ、DOMを照会するように強制します（基本的にReactに対して）。