# Documentation React Stripe.js Comprendre les composants React pour Stripe.js et Stripe Elements. # Éléments Checkout > This is a Éléments Checkout for when ui is embedded-components. View the full page at https://docs.stripe.com/sdks/stripejs-react?ui=embedded-components. Vous voulez voir comment fonctionne React Stripe.js ou aider à son développement ? Consultez le [projet sur GitHub](https://github.com/stripe/react-stripe-js). Vous pouvez également consulter le journal des modifications dans l’onglet [Mises à jour](https://github.com/stripe/react-stripe-js/releases). React Stripe.js est un wrapper léger pour [Stripe Elements](https://docs.stripe.com/payments/elements.md) qui vous permet d’ajouter Elements à n’importe quelle application React. La [documentation de Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element) 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](https://docs.stripe.com/.md). > Cette documentation couvre l’intégralité de l’API React Stripe.js. Si vous préférez apprendre par la pratique, consultez la documentation sur [accepter un paiement](https://docs.stripe.com/payments/accept-a-payment.md?platform=web) ou jetez un coup d’œil à un[exemple d’intégration](https://docs.stripe.com/payments/quickstart-checkout-sessions.md). ## Before you begin Ce document suppose que vous avez déjà des connaissances élémentaires en [React](https://reactjs.org/) et que votre projet React est configuré. Si vous découvrez, nous vous suggérons de consulter le guide de [démarrage](https://react.dev/learn) avant de continuer. ## Configuration #### npm Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### yarn Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm. ```bash yarn add @stripe/react-stripe-js @stripe/stripe-js ``` #### umd Nous fournissons également une version UMD pour les sites qui n’utilisent pas npm ni de modules. Incluez le script Stripe.js, qui exporte une fonction `Stripe` globale, ainsi que la version UMD de React Stripe.js, qui exporte un objet `ReactStripe` global. Chargez toujours le script Stripe.js directement à partir de **js.stripe.com** pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie. ```html ``` ## CheckoutElementsProvider Le `CheckoutElementsProvider` vous permet d’utiliser les [composants Element](https://docs.stripe.com/sdks/stripejs-react.md#element-components) et d’accéder à l’[objet Stripe](https://docs.stripe.com/js/initializing) dans n’importe quel composant imbriqué. Générez le rendu d’un `CheckoutElementsProvider` à la racine de votre application React afin qu’il soit disponible partout où vous en avez besoin. Pour utiliser le `CheckoutElementsProvider`, appelez [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#loadstripe) depuis `@stripe/stripe-js` avec votre clé publique. La fonction `loadStripe` charge le script Stripe.js et initialise un objet Stripe de manière asynchrone. Transmettez la `Promise` renvoyée au `CheckoutElementsProvider`. Consultez la page [Créer une session Checkout](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#create-checkout-session) pour voir à quoi pourrait ressembler votre endpoint. ```jsx import {CheckoutElementsProvider} 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('<>'); export default function App() { const promise = useMemo(() => { return fetch('/create-checkout-session', { method: 'POST', }) .then((res) => res.json()) .then((data) => data.clientSecret); }, []); return ( ); } ``` | propriété | description | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stripe` | (required) `Stripe | null | Promise` Un [objet Stripe](https://docs.stripe.com/js/initializing) ou une `Promise` qui se résout en un objet Stripe. Nous vous recommandons d’utiliser le [module wrapper Stripe.js](https://github.com/stripe/stripe-js/blob/master/README.md#readme) pour initialiser un objet Stripe. Après avoir défini cet accessoire, vous ne pourrez plus le modifier. Vous pouvez aussi transmettre `null` ou une `Promise` se résolvant en `null` si vous effectuez un rendu initial côté serveur ou si vous générez un site statique. | | `options` | (required) `Object` Options de configuration de CheckoutElementProvider. [Consulter les options disponibles](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options). Vous devez fournir la clé secrète du client `clientSecret` de la Session Checkout créée. Pour obtenir un exemple, consultez [Créer une Session Checkout](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout#create-checkout-session). | ## 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 `CheckoutElementsProvider`. Veuillez noter que vous ne pouvez monter qu’un seul composant Element de chaque type dans un même ``. ```jsx import {PaymentElement} from '@stripe/react-stripe-js/checkout'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` | propriété | description | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `options` | (Facultatif) `Object` Objet contenant des options de configuration de composant Element. [Consultez les options disponibles](https://docs.stripe.com/js/custom_checkout/create_payment_element) pour le composant Payment Element. | | `onBlur` | (Facultatif) `() => void` Déclenché lorsque le composant Element n’est plus actif. | | `onChange` | (Facultatif) `(event: Object) => void` Déclenché lorsque les données exposées par cet Element sont modifiées. Pour en savoir plus, consultez la [documentation de Stripe.js](https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler). | | `onEscape` | (Facultatif) `(event: Object) => void` Déclenché lorsque la touche Echap est enfoncée dans un Element. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_escape). | | `onFocus` | (Facultatif) `() => void` Déclenché lorsque le composant Element reçoit le focus. | | `onLoaderror` | (Facultatif) `(event: Object) => void` Déclenché lorsque le chargement de l’Element échoue. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_loaderror). | | `onLoaderStart` | (Facultatif) `(event: Object) => void` Déclenché lorsque l’interface utilisateur du [chargeur](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-loader) est montée dans le DOM et prête à être affichée. Ces événements vous sont envoyés uniquement par les composants Elements `payment` et `address`. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_loaderstart). | | `onReady` | (Facultatif) `(element: Element) => void` Déclenché lorsque le composant Element est intégralement rendu et peut accepter des appels `element.focus()` impératifs. Appelé avec une référence à l’instance Element sous-jacente. | ### 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 : | Composant | Utilisation | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `BillingAddressElement` | Collecte les informations d’adresse de facturation pour plus de 236 formats régionaux. Pour en savoir plus, consultez la documentation relative au composant [Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components). | | `CurrencySelectorElement` | Permet aux clients de sélectionner la devise de leur paiement avec Adaptive Pricing. Pour en savoir plus, consultez la documentation relative au composant [Currency Selector Element](https://docs.stripe.com/elements/currency-selector-element.md). | | `ExpressCheckoutElement` | Permet d’accepter des paiements par carte bancaire ou wallet via un ou plusieurs boutons de paiement, notamment Apple Pay, Google Pay, Link ou PayPal. Pour en savoir plus, consultez la documentation relative au [composant Element Express Checkout](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components). | | `PaymentElement` | Collecte les informations de paiement pour [plus de 25 moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) dans le monde entier. Pour en savoir plus, consultez la documentation relative au composant [Payment Element](https://docs.stripe.com/payments/quickstart-checkout-sessions.md). | | `PaymentMethodMessagingElement` | Affiche à vos clients les offres disponibles de paiement différé. Pour en savoir plus, consultez la documentation relative au composant [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md). | | `ShippingAddressElement` | Collecte les informations d’adresse de livraison pour plus de 236 formats régionaux. Pour en savoir plus, consultez la documentation relative au composant [Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?payment-ui=embedded-components). | | `TaxIdElement` | Collecte les informations de numéro fiscal de vos clients, notamment la raison sociale et le numéro fiscal. Pour en savoir plus, consultez la documentation relative au composant [Tax ID Element](https://docs.stripe.com/elements/tax-id-element.md). | ## hook useCheckout #### `useCheckout(): CheckoutValue` Utilisez le hook [useCheckout](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout) pour obtenir l’objet `Checkout`, qui contient les données de la Session Checkout ainsi que les méthodes permettant de mettre la Session à jour et de la confirmer. ```jsx 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 (
Loading...
); } else if (checkoutState.type === 'error') { return (
Error: {checkoutState.error.message}
); } // 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 (
) }; export default CheckoutForm; ``` ## Personnalisation et stylisation Nous sommes conscients que l’utilisation d’iframes complique la stylisation des composants Element. Ils vous permettent néanmoins de vous décharger de la responsabilité du traitement sécurisé des données de paiement et simplifient la [conformité de votre site à la réglementation sectorielle](https://docs.stripe.com/security/guide.md#validating-pci-compliance). Chaque composant Element est monté dans un `iframe`, ce qui signifie qu’Elements ne fonctionnera probablement pas avec les styles et les frameworks de composants existants dont vous disposez. Malgré cela, vous pouvez toujours configurer Elements pour qu’il s’adapte au design de votre site. Pour personnaliser Elements, vous devez [répondre à des événements](https://docs.stripe.com/js/element/events) et configurer Elements à l’aide de l’option d’[apparence](https://docs.stripe.com/elements/appearance-api.md). La mise en page de chaque composant Element reste cohérente, mais vous pouvez modifier les couleurs, les polices, les bordures, le remplissage, etc. ## Prochaines étapes Développez une intégration avec React Stripe.js et Elements à l’aide de l’API Checkout Sessions. - [Accepter un paiement](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) - [Ajouter le composant Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components). - [L’API Elements Appearance](https://docs.stripe.com/payments/checkout/customization/appearance.md?payment-ui=embedded-components) - [Documentation Stripe.js](https://docs.stripe.com/js/custom_checkout) # Intégration avancée > This is a Intégration avancée for when ui is elements. View the full page at https://docs.stripe.com/sdks/stripejs-react?ui=elements. Si vous voulez voir comment fonctionne React Stripe.js ou aider à son développement, consultez le [projet sur GitHub](https://github.com/stripe/react-stripe-js). Vous pouvez également consulter le journal des modifications dans l’onglet [Mises à jour](https://github.com/stripe/react-stripe-js/releases). React Stripe.js est un wrapper léger pour [Stripe Elements](https://docs.stripe.com/payments/elements.md) qui vous permet d’ajouter Elements à n’importe quelle application React. La [documentation de Stripe.js](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options) 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 chemin d’intégration adapté à votre entreprise, [consultez notre documentation](https://docs.stripe.com/.md). > Cette documentation couvre l’intégralité de l’API React Stripe.js. Si vous préférez apprendre sur le tas, reportez-vous à notre documentation sur l’[acceptation d’un paiement](https://docs.stripe.com/payments/accept-a-payment.md?platform=web) ou penchez-vous sur cet [exemple d’intégration](https://docs.stripe.com/payments/quickstart.md). ## Before you begin Dans cette documentation, nous partons du principe que vous disposez de connaissances de base suffisantes sur le fonctionnement de [React](https://reactjs.org/) et que vous avez déjà configuré un projet React. Si vous êtes novice en la matière, nous vous recommandons de lire le [guide de démarrage](https://react.dev/learn) avant de poursuivre. ## Configuration #### npm Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm. ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` #### yarn Installez [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) et le [chargeur Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) à partir du registre public npm. ```bash yarn add @stripe/react-stripe-js @stripe/stripe-js ``` #### umd Nous fournissons également une version UMD pour les sites qui n’utilisent pas npm ni de modules. Incluez le script Stripe.js, qui exporte une fonction `Stripe` globale, ainsi que la version UMD de React Stripe.js, qui exporte un objet `ReactStripe` global. Chargez toujours le script Stripe.js directement à partir de **js.stripe.com** pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie. ```html ``` ## Fournisseur Elements Le fournisseur `Elements` permet d’utiliser les [composants Element](https://docs.stripe.com/sdks/stripejs-react.md#element-components) et d’accéder à l’[objet Stripe](https://docs.stripe.com/js/initializing) depuis n’importe quel composant imbriqué. Installez un fournisseur `Elements` à la racine de votre application React pour qu’il soit accessible partout où vous en avez besoin. Pour utiliser le fournisseur `Elements`, appelez [loadStripe](https://github.com/stripe/stripe-js/blob/master/README.md#loadstripe) depuis `@stripe/stripe-js` avec votre clé publique. La fonction `loadStripe`charge le script Stripe.js et initialise un objet Stripe de manière asynchrone. Transmettez la `Promise` renvoyée à `Elements`. ```jsx import {Elements} 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('<>'); export default function App() { const options = { // passing the client secret obtained from the server clientSecret: '{{CLIENT_SECRET}}', }; return ( ); }; ``` | propriété | description | | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stripe` | (required) `Stripe | null | Promise` [Objet Stripe](https://docs.stripe.com/js/initializing) ou `Promise` se résolvant en un objet Stripe. Le moyen le plus simple d’initialiser un objet Stripe est d’utiliser [le module wrapper Stripe.js](https://github.com/stripe/stripe-js/blob/master/README.md#readme). Une fois que vous avez défini cette propriété, vous ne pouvez plus la modifier. Vous pouvez aussi transmettre `null` ou une `Promise` se résolvant en `null` si vous effectuez un rendu initial côté serveur ou si vous générez un site statique. | | `options` | (Facultatif) `Object` Options de configuration facultatives d’Elements. [Consultez les options disponibles](https://docs.stripe.com/js/elements_object/create#stripe_elements-options). Pour créer des Payments Elements, vous devez inclure le `clientSecret` de l’Intent, à moins que [vous n’affichiez l’Element avant de créer l’Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?platform=web). Les propriétés étant immuables, vous ne pouvez pas modifier les `options` après les avoir définies. Cependant, vous pouvez modifier l’apparence d’un élément en appelant la méthode [elements.update](https://docs.stripe.com/js/elements_object/update#elements_update-options-appearance). | ## Composants Element Les composants Element offrent un moyen flexible de collecter de manière sécurisée les informations de paiement dans votre application React. Vous pouvez monter des composants Element individuels dans votre arbre `Elements`. Veuillez noter que vous ne pouvez monter qu’un seul composant Element de chaque type dans un même groupe ``. ```jsx import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` | propriété | description | | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `id` | (Facultatif) `string` Passe par le [conteneur Element](https://docs.stripe.com/js/element/the_element_container). | | `className` | (Facultatif) `string` Passe par le [conteneur Element](https://docs.stripe.com/js/element/the_element_container). | | `options` | (Facultatif) `Object` Objet contenant les options de configuration d’un Element. [Consultez les options disponibles](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options) pour le Payment Element. | | `onBlur` | (Facultatif) `() => void` Déclenché lorsque le composant Element n’est plus actif. | | `onChange` | (Facultatif) `(event: Object) => void` Déclenché lorsque les données exposées par cet Element sont modifiées (par exemple, lorsqu’il y a une erreur). Pour en savoir plus, consultez la [documentation de Stripe.js](https://docs.stripe.com/js/element/events/on_change?type=paymentElement#element_on_change-handler). | | `onClick` | (Facultatif) `(event: Object) => void` Déclenché par `` lorsqu’il est sélectionné. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_click#element_on_click-handler). | | `onEscape` | (Facultatif) `(event: Object) => void` Déclenché lorsque la touche Echap est enfoncée dans un Element. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_escape). | | `onFocus` | (Facultatif) `() => void` Déclenché lorsque le composant Element reçoit le focus. | | `onLoaderror` | (Facultatif) `(event: Object) => void` Déclenché lorsque le chargement de l’Element échoue. Ces événements vous sont envoyés uniquement par les composants Elements `payment`, `linkAuthentication`, `address` et `expressCheckout`. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_loaderror). | | `onLoaderStart` | (Facultatif) `(event: Object) => void` Déclenché lorsque l’interface utilisateur du [chargeur](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-loader) est montée dans le DOM et prête à être affichée. Ces événements vous sont envoyés uniquement par les composants Elements `payment`, `linkAuthentication` et `address`. Pour en savoir plus, consultez la [documentation Stripe.js](https://docs.stripe.com/js/element/events/on_loaderstart). | | `onReady` | (Facultatif) `(element: Element) => void` Déclenché lorsque le composant Element est intégralement rendu et peut accepter des appels `element.focus()` impératifs. Appelé avec une référence à l’instance Element sous-jacente. | ### Composants Element disponibles Il existe de nombreux types de composants Element, très utiles pour collecter différentes sortes d’informations de paiement. Les composants Elements disponibles à l’heure actuelle sont les suivants : | Composant | Utilisation | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `AddressElement` | Collecte les informations d’adresse pour plus de 236 formats régionaux. Pour en savoir plus, consultez la documentation de l’[Address Element](https://docs.stripe.com/payments/advanced/collect-addresses.md?platform=web&client=react). | | `ExpressCheckoutElement` | Permet d’accepter des paiements par carte bancaire ou wallet via un ou plusieurs boutons de paiement, notamment Apple Pay, Google Pay, Link ou PayPal. Pour en savoir plus, consultez la documentation relative au [composant Element Express Checkout](https://docs.stripe.com/elements/express-checkout-element.md). | | `LinkAuthenticationElement` | Collecte des adresses e-mail et permet aux utilisateurs de se connecter à Link. Pour en savoir plus, consultez la documentation sur l’[élément d’authentification Link](https://docs.stripe.com/payments/elements/link-authentication-element.md). | | `PaymentElement` | Collecte les informations de paiement pour [plus de 25 moyens de paiement](https://docs.stripe.com/payments/payment-methods/integration-options.md) dans le monde entier. Pour en savoir plus, consultez la documentation relative au composant [Payment Element](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout&client=react). | | `PaymentMethodMessagingElement` | Affiche à vos clients les offres disponibles de paiement différé. Pour en savoir plus, consultez la documentation relative au composant [Payment Method Messaging Element](https://docs.stripe.com/elements/payment-method-messaging.md). | | `TaxIdElement` | Collecte les informations de numéro fiscal de vos clients, notamment la raison sociale et le numéro fiscal. Pour en savoir plus, consultez la documentation relative au composant [Tax ID Element](https://docs.stripe.com/elements/tax-id-element.md). | ## hook useElements #### `useElements(): Elements | null` Pour transmettre en toute sécurité les informations de paiement collectées par le composant Payment Element à l’API Stripe, accédez à l’instance `Elements` afin de pouvoir l’utiliser avec [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment). Si vous utilisez l’[API React Hooks](https://react.dev/reference/react), nous vous recommandons d’utiliser `useElements` pour accéder à un composant Element monté. Si vous avez besoin d’accéder à un composant Element depuis un composant de classe, utilisez en revanche [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). > Notez que si vous transmettez une `Promise` au [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) et que cette `Promise` n’a pas été résolue, alors `useElements` renverra `null`. ```jsx import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe();const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({//`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.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 (
) }; export default CheckoutForm; ``` ## hook useStripe #### `useStripe(): Stripe | null` Le [hook](https://react.dev/reference/react) `useStripe` renvoie une référence à l’instance [Stripe](https://docs.stripe.com/js/initializing) transmise au fournisseur [Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Si vous avez besoin d’accéder à l’objet Stripe d’un composant de classe, utilisez plutôt [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer). > Notez que si vous transmettez une `Promise` au [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) et que cette `Promise` n’a pas été résolue, alors `useStripe` renverra `null`. ```jsx import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => {const stripe = useStripe(); const elements = useElements(); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.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 (
) }; export default CheckoutForm; ``` ## ElementsConsumer Pour transmettre en toute sécurité les informations de paiement collectées via le composant Payment Element à l’API Stripe, accédez à l’instance `Elements` afin de l’utiliser avec [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment). Si vous devez accéder à l’objet Stripe ou à un composant Element depuis un composant de classe, `ElementsConsumer` constitue une alternative aux hooks [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook) et [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook). ```jsx import {ElementsConsumer, PaymentElement} from '@stripe/react-stripe-js'; class CheckoutForm extends React.Component { handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); const {stripe, elements} = this.props; if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } const result = await stripe.confirmPayment({ //`Elements` instance that was used to create the Payment Element elements, confirmParams: { return_url: "https://example.com/order/123/complete", }, }); if (result.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`. } }; render() { return (
); } } export default function InjectedCheckoutForm() { return ( {({stripe, elements}) => ( )} ) } ``` | propriété | description | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (required) `({elements, stripe}) => ReactNode` Ce composant prend une [fonction en tant qu’enfant](https://reactjs.org/docs/render-props.html#using-props-other-than-render). La fonction que vous fournissez sera appelée avec l’[objet Elements](https://docs.stripe.com/js/elements_object), qui gère vos composants Element et l’[objet Stripe](https://docs.stripe.com/js/initializing) que vous avez transmis à [](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Notez que si vous transmettez une `Promise` au [fournisseur Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) et que cette `Promise` n’a pas été résolue, alors `stripe` et `elements` renverront `null`. | ## Personnalisation et stylisation Nous sommes conscients que l’utilisation d’iframes complique la stylisation des composants Element. Ils vous permettent néanmoins de vous décharger de la responsabilité du traitement sécurisé des données de paiement et simplifient la [conformité de votre site à la réglementation en vigueur](https://docs.stripe.com/security/guide.md#validating-pci-compliance). Chaque composant Element est monté dans un `iframe`, ce qui signifie qu’Elements ne fonctionnera probablement pas avec les styles et les frameworks de composants existants dont vous disposez. Malgré cela, vous pouvez toujours configurer Elements pour qu’il s’adapte au design de votre site. La personnalisation d’Elements consiste à [répondre à des événements](https://docs.stripe.com/js/element/events) et à configurer Elements à l’aide de l’option d’[apparence](https://docs.stripe.com/elements/appearance-api.md). La mise en page de chaque composant Element reste cohérente, mais vous pouvez modifier les couleurs, les polices, les bordures, le remplissage, etc. ## Prochaines étapes Développez une intégration avec React Stripe.js et Elements. - [Accepter un paiement](https://docs.stripe.com/payments/quickstart.md) - [Accepter un paiement avec le composant Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md) - [Ajouter le bouton de demande de paiement](https://docs.stripe.com/stripe-js/elements/payment-request-button.md) - [En savoir plus sur l’API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Documentation Stripe.js](https://docs.stripe.com/js.md)