Reprendre la soumission de formulaire prévenu dans React

Question

J'implémente Stripe avec React. Lors d'un clic de soumission, la soumission de formulaire est empêchée et une requête ajax est envoyée à Stripe - nous donnant un jeton dans la réponse qui doit être jointe dans la requête suivante à notre serveur.

Je trébuche sur la façon d'implémenter/déclencher cette demande ultérieure à notre serveur?

Ci-dessous un exemple de ce flux provenant du dépôt 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); 

Answer 1

Vous devez déclencher votre appel vers le serveur une fois que vous obtenez votre jeton, par exemple dans la then clause de la promesse que this.props.stripe.createToken retours .

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