Documentation React Stripe.js

React Stripe.js est un wrapper léger pour Stripe Elements qui vous permet d’ajouter Elements à n’importe quelle application React.

La documentation de Stripe.js fournit toutes les informations utiles pour la personnalisation d’Elements.

Vous pouvez utiliser Elements avec n’importe quel produit Stripe pour encaisser des paiements en ligne. Pour trouver le meilleur chemin d’intégration dans votre cas de figure, consultez notre documentation.

Avant de commencer

Nous partons du principe que vous disposez de connaissances de base suffisantes sur le fonctionnement de React et que vous avez déjà configuré un projet React. Si tel n’est pas le cas, nous vous recommandons de lire notre guide de démarrage avant de poursuivre.

Configuration

npm install --save @stripe/react-stripe-js @stripe/stripe-js

Checkout Provider

Le fournisseur CheckoutProvider vous permet d’utiliser les composants Element et d’accéder à l’objet Stripe dans n’importe quel composant imbriqué. Générez un rendu d’un CheckoutProvider à la racine de votre application React afin qu’il soit disponible partout où vous en avez besoin.

Pour utiliser le CheckoutProvider, appelez loadStripe depuis @stripe/stripe-js avec votre clé publique. La fonction loadStripecharge le script Stripe.js et initialise un objet Stripe de manière asynchrone. Transmettez la Promise renvoyée au fournisseur CheckoutProvider.

See Create a Checkout Session for an example of what your endpoint might look like.

import {CheckoutProvider} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret)
};

export default function App() {
  return (
    <CheckoutProvider stripe={stripePromise} options={{fetchClientSecret}}>
      <CheckoutForm />
    </CheckoutProvider>
  );
}

Composants Element

Les composants Element vous permettent de collecter en toute sécurité des informations de paiement dans votre application React et de placer ces composants à l’emplacement de votre choix de votre page de paiement. Vous pouvez également personnaliser l’apparence.

Vous pouvez monter des composants Element individuels dans votre arbre CheckoutProvider. Veuillez noter que vous ne pouvez monter qu’un seul composant Element de chaque type dans un même groupe <CheckoutProvider>.

import {PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  return (
    <form>
      <PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;

Composants Element disponibles

Vous pouvez utiliser différents types d’Elements pour collecter des informations sur votre page de paiement. Voici les composants Elements disponibles :

hook useCheckout

useCheckout(): CheckoutContextValue | null

Utilisez le hook useCheckout dans vos composants pour obtenir l’objet Checkout, qui contient les données de la session Checkout ainsi que des méthodes permettant de mettre à jour et de confirmer cette session.

import {useCheckout, PaymentElement} from '@stripe/react-stripe-js';

const CheckoutForm = () => {
  const checkout = useCheckout();

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    const result = await checkout.confirm();

    if (result.type === 'error') {
      // Show error to your customer (for example, payment details incomplete)
      console.log(result.error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button>Submit</button>
    </form>
  )
};

export default CheckoutForm;

Personnalisation et stylisation

Chaque Element est monté dans un iframe, raison pour laquelle les Elements ne fonctionnent généralement pas avec vos frameworks de stylisation et de composants existants. Cela dit, vous pouvez toujours configurer vos Elements pour qu’ils s’intègrent au design de votre site. La personnalisation d’Elements consiste à répondre aux événements et à configurer Elements avec l’option d’apparence. La disposition de chaque Element reste la même, mais vous pouvez modifier les couleurs, les polices, les bordures, les marges intérieures, etc.