React jsストライプチェックアウトが機能しない

Question

React jsアプリケーションでストライプチェックアウトのデフォルトフォームをレンダリングしようとしています。

<form action="/your-server-side-code" method="POST"> 
    <script 
    src="https://checkout.stripe.com/checkout.js" className="stripe-button" 
    data-key="pk_test_oDALA0jNyxDzbRz5RstV4qOr" 
    data-amount="999" 
    data-name="test" 
    data-description="Widget" 
    data-image="https://stripe.com/img/documentation/checkout/marketplace.png" 
    data-locale="auto"> 
    </script> 
</form> 

これは何も表示されず、エラーも表示されません。 どうすればその支払いボタンとフォームを取得できますか？

Answer 1

主な問題は、React内にスクリプトを読み込むことです。

1つのアプローチは、必要なときにチェックアウトスクリプトを読み込むことです（何らかの形のスパを想定しています）。 https://stripe.com/docs/checkout#integration-custom

checkout.jsを既に読み込んでいる場合（「app.js」の前など）、手動ではなく以下のように簡略化することができますスクリプトの読み込み。

import React from 'react'; 

export default class Cards extends React.Component { 

    constructor(props:Object) { 
     super(props); 
     this.state = { 
      loading: true, 
      stripeLoading: true, 
     }; 
    } 

    loadStripe(onload:Function) { 
     if(! window.StripeCheckout) { 
      const script = document.createElement('script'); 
      script.onload = function() { 
       console.info("Stripe script loaded"); 
       onload(); 
      }; 
      script.src = 'https://checkout.stripe.com/checkout.js'; 
      document.head.appendChild(script); 
     } else { 
      onload(); 
     } 
    } 

    componentDidMount() { 

     this.loadStripe(() => { 
      this.stripehandler = window.StripeCheckout.configure({ 
       key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', 
       image: 'https://stripe.com/img/documentation/checkout/marketplace.png', 
       locale: 'auto', 
       token: (token) => { 
        this.setState({ loading: true }); 
        axios.post('/your-server-side-code', { 
         stripeToken: token.id, 
        }); 
       } 
      }); 

      this.setState({ 
       stripeLoading: false 
      }); 
     }); 
    } 

    componentWillUnmount() { 
     if(this.stripehandler) { 
      this.stripehandler.close(); 
     } 
    } 

    onStripeUpdate(e:Object) { 
     this.stripehandler.open({ 
      name: 'test', 
      description: 'widget', 
      panelLabel: 'Update Credit Card', 
      allowRememberMe: false, 
     }); 
     e.preventDefault(); 
    } 

    render() { 
     const { stripeLoading, loading } = this.state; 
     return (
      <div> 
       {(loading || stripeLoading) 
        ? <p>loading..</p> 
        : <button onClick={this.onStripeUpdate}>Add CC</button> 
       } 
      </div> 
     ); 
    } 
} 

Answer 2

Chrisの回答は優れていましたが、コードを機能させるために少し変更を加えなければなりませんでした。私はTypeScriptの関数型を削除しました（TypeScriptを使用していない関数型のもの）。回答が変更された場合、コメントが追加されます。 FYIこれは私の最初の投稿です、これが答えの代わりにコメントでなければならないかどうかお知らせください。

export default class Cards extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      loading: true, 
      stripeLoading: true, 
     }; 
     // onStripeUpdate must be bound or else clicking on button will produce error. 
     this.onStripeUpdate = this.onStripeUpdate.bind(this); 
     // binding loadStripe as a best practice, not doing so does not seem to cause error. 
     this.loadStripe = this.loadStripe.bind(this); 
    } 

    loadStripe(onload) { 
     if(! window.StripeCheckout) { 
      const script = document.createElement('script'); 
      script.onload = function() { 
       console.info("Stripe script loaded"); 
       onload(); 
      }; 
      script.src = 'https://checkout.stripe.com/checkout.js'; 
      document.head.appendChild(script); 
     } else { 
      onload(); 
     } 
    } 

    componentDidMount() { 

     this.loadStripe(() => { 
      this.stripeHandler = window.StripeCheckout.configure({ 
       key: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx', 
       image: 'https://stripe.com/img/documentation/checkout/marketplace.png', 
       locale: 'auto', 
       token: (token) => { 
        this.setState({ loading: true }); 
        // use fetch or some other AJAX library here if you dont want to use axios 
        axios.post('/your-server-side-code', { 
         stripeToken: token.id, 
        }); 
       } 
      }); 

      this.setState({ 
       stripeLoading: false, 
       // loading needs to be explicitly set false so component will render in 'loaded' state. 
       loading: false, 
      }); 
     }); 
    } 

    componentWillUnmount() { 
     if(this.stripeHandler) { 
      this.stripeHandler.close(); 
     } 
    } 

    onStripeUpdate(e) { 
     this.stripeHandler.open({ 
      name: 'test', 
      description: 'widget', 
      panelLabel: 'Update Credit Card', 
      allowRememberMe: false, 
     }); 
     e.preventDefault(); 
    } 

    render() { 
     const { stripeLoading, loading } = this.state; 
     return (
      <div> 
       {(loading || stripeLoading) 
        ? <p>loading..</p> 
        : <button onClick={this.onStripeUpdate}>Add CC</button> 
       } 
      </div> 
     ); 
    } 
}