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.

Consultez la section consacrée à la création d’une session Checkout pour voir un exemple de ce à quoi peut ressembler votre endpoint.

import {CheckoutProvider} from '@stripe/react-stripe-js/checkout';
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');

export default function App() {
  const promise = useMemo(() => {
    return fetch('/create-checkout-session', {
      method: 'POST',
    })
      .then((res) => res.json())
      .then((data) => data.clientSecret);
  }, []);

  return (
    <CheckoutProvider stripe={stripePromise} options={{clientSecret: promise}}>
      <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/checkout';

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() : CheckoutValue

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/checkout';

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

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

    if (checkoutState.type === 'loading') {
      return (
        <div>Loading...</div>
      );
    } else if (checkoutState.type === 'error') {
      return (
        <div>Error: {checkoutState.error.message}</div>
      );
    }

    // checkoutState.type === 'success'
    const {checkout} = checkoutState;
    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

Each element is mounted in an iframe, which means that Elements probably won’t work with any existing styling and component frameworks that you have. Despite this, you can still configure Elements to match the design of your site. To customize Elements, you respond to events and configure Elements with the appearance option. The layout of each Element stays consistent, but you can modify colors, fonts, borders, padding, and so on.