2017-06-20 8 views
0

ReactでStripeを実装しています。Reactでフォームの提出を再開しました

フォーム提出が禁止され、ajaxリクエストがストライプに送られます。これは、私たちのサーバーへの後続のリクエストで添付されるべき応答のトークンを与えます。

私はこの後続のリクエストをサーバーに実装/トリガーする方法につまづいていますか?以下は

react-stripe-elementsリポジトリから取ったこのフローの例である:

class _CardForm extends React.Component { 
    props: { 
    fontSize: string, 
    stripe: StripeProps, 
    } 
    handleSubmit = (ev) => { 
    ev.preventDefault(); 
    this.props.stripe.createToken().then((payload) => console.log(payload)); 
    } 
    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Card details 
      <CardElement 
      onChange={handleChange} 
      onFocus={handleFocus} 
      onBlur={handleBlur} 
      onReady={handleReady} 
      {...createOptions(this.props.fontSize)} 
      /> 
     </label> 
     <button>Pay</button> 
     </form> 
    ); 
    } 
} 
const CardForm = injectStripe(_CardForm); 

答えて

1

あなたのトークンを取得したら、あなたはサーバーへの呼び出しをトリガーする必要があり、すなわち約束のthen句でthis.props.stripe.createToken戻っていること。

handleSubmit = (ev) => { 
    ev.preventDefault(); 
    this.props.stripe.createToken() 
    .then((payload) => yourFetchImplementation('path/to/api/endpoint', payloadAsBody)); 
} 
関連する問題