ReactコンポーネントでStripe.jsスクリプトを追加する方法

Question

Stripeを支払いプロバイダとして使用して、支払いフォームを作成したいと考えています。

Stripe.js Referenceで、フォームコンポーネントを作成する手順は、ページ内の外部スクリプトを含むjQueryを使用して記述します。それを私のReactコンポーネントにどのように含めることが可能ですか？最善の方法は何ですか？

import React, { Component } from 'react'; 

class PaymentForm extends Component { 
constructor(props) { 
    super(props); 
} 

componentDidMount() { 
    Stripe.setPublishableKey('THE-PUBLIC-KEY'); 
} 

handleSubmit(e) { 
    e.preventDefault(); 
    Stripe.card.createToken(e.currentTarget, (status, response) => { 
    console.log(status, response); 
    }); 
} 

render() { 
    //THE PAYMENT FORM 
} 
} 

注1：これまで私は、次のしていることで、私はそれが積極的に更新されないようReactScriptLoader使いたくありません。

注2：よく練習しているとは思わない解決策dangerouslySetInnerHTMLも見てください。

Answer 1

はあなたの反応するようにStripe Elementsを追加する手助けコンポーネントに反応アプリ。

Answer 2

ストライプにはNPM moduleがありますが、クライアント側アプリケーションには使用できません。あなたのindex.htmlページ（またはどこでもにマウントして反応するスクリプトをインポートしますリアクトHTML要素を生成）にスクリプトタグを介してstripe.jsライブラリを追加する必要があります：

<script src="https://js.stripe.com/v3/"></script> 

これは、 Stripe documentationからお勧めの方法です。グローバルスコープ内にStripeというオブジェクトが作成され、そこからReactコードにアクセスできます。

この目的のために、ReactScriptLoaderとdangerouslySetInnerHtmlを避けることは、開発者のサポート以外の方法でお支払いを行う場合には非常に慎重です。

あなたがESLintを使用する場合は、警告を停止するには、あなたのJSXファイルの先頭にグローバルを指定することができます：ストライプが正式にreact-stripe-elementsモジュールをリリースしました

/* global Stripe */