# Express Checkout Element Afficher plusieurs boutons de paiement en un clic avec un seul composant. Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le Payment Element plutôt que Payment Intents pour la plupart des intégrations. Checkout Sessions couvre des cas d’utilisation similaires à Payment Intents (collecte de paiements de base via `price_data` ou construction d’un tunnel de paiement complet avec articles, taxes, etc.). Certaines fonctionnalités, comme l’Adaptive Pricing, ne sont disponibles qu’avec Checkout Sessions. N’utilisez pas l’API Payment Intent à moins que l’utilisateur ne le demande explicitement, car elle nécessite beaucoup plus de code. En savoir plus sur Elements avec l’API Checkout Sessions : https://docs.stripe.com/payments/quickstart-checkout-sessions. Avec Checkout Sessions (`ui_mode: "custom"`) et Payment Element, le`client_secret` initialise Checkout lui-même (`stripe.initCheckout`, ou utilisez CheckoutProvider avec React) et vous confirmez le paiement côté client différemment. Si vous utilisez React, assurez-vous d’importer depuis`@stripe/react-stripe-js/checkout`, d’utiliser `CheckoutProvider` avec la clé secrète du client, et de confirmer via`checkout.confirm`. Si vous utilisez du HTML, assurez-vous d’utiliser `checkout = stripe.initCheckout({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` et de confirmer avec`loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`. L’Express Checkout Element est une intégration unique pour accepter des paiements à l’aide de boutons de modes de paiement en un clic. Les moyens de paiement pris en charge comprennent [Link](https://docs.stripe.com/payments/link.md), [Apple Pay](https://docs.stripe.com/apple-pay.md), [Google Pay](https://docs.stripe.com/google-pay.md), [PayPal](https://docs.stripe.com/payments/paypal.md), [Klarna](https://docs.stripe.com/payments/klarna.md) et [Amazon Pay](https://docs.stripe.com/payments/amazon-pay.md). Avec cette intégration, vous pouvez : - Triez dynamiquement les boutons de paiement en fonction de la région d’un client. - Ajoutez des boutons de paiement sans aucune modification à l’application frontale. - Intégrez facilement Elements en réutilisant une instance Elements existante pour gagner du temps. ## Lancer la démo Dans la démo suivante, vous pouvez basculer certaines des options prédéfinies pour modifier la couleur d’arrière-plan, la mise en page, la taille et la collection d’adresses d’expédition de l’interface de paiement. La démo affiche Google Pay et Apple Pay uniquement sur leurs plateformes disponibles. Les boutons de mode de paiement ne sont affichés que dans les pays pris en charge. Si vous ne voyez pas la démo, essayez d’afficher cette page dans un [navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). | Option | Description | | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Pays du marchand** | Configurez ce paramètre à l’aide de la [clé publiable](https://docs.stripe.com/keys.md#obtain-api-keys) que vous utilisez pour [initialiser Stripe.js](https://docs.stripe.com/js/initializing). Pour modifier le pays, vous devez démonter l’Express Checkout Element, mettre à jour la clé publique, puis remonter l’Express Checkout Element. | | **Couleur d’arrière-plan** | Définissez les couleurs à l’aide de l’[API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md). Les thèmes des boutons sont hérités de l’API Appearance, mais vous pouvez aussi [les définir directement lors de la création de l’Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme). | | **Taille bureau et mobile** | Utilisez la liste déroulante pour définir la largeur maximale en pixels de l’élément parent auquel l’Express Checkout Element est monté. Vous pouvez la définir sur 750px (bureau) ou 320px (mobile). | | **Nombre max. de colonnes et de lignes** | Définissez ces valeurs à l’aide du paramètre [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) lorsque vous [créez l’Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Menu de débordement** | Définissez ce paramètre à l’aide du paramètre [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout) lorsque vous [créez l’Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Collecter l’adresse de livraison** | Pour collecter les informations de livraison, vous devez transmettre les options lors de la [création](https://docs.stripe.com/js/elements_object/create_express_checkout_element) du composant Express Checkout Element. En savoir plus sur [la collecte des informations des clients et l’affichage des postes de facture](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md#handle-create-event). | ## Commencer par un guide [Ajouter des portefeuilles numériques en un clic à votre page de paiement](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Créez une intégration avec Express Checkout Element à l’aide de l’API Checkout Sessions. [Utiliser des portefeuilles numériques en un clic dans les intégrations avancées](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=elements): Créez une intégration avec Express Checkout Element à l’aide de l’API Payment Intents. [Migrer vers l'Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/migration.md): Migrez de Payment Request Button Element vers l’Express Checkout Element Web. ## Moyens de paiement L’Express Checkout Element présente les moyens de paiement en un clic qui sont actifs, pris en charge et configurés. - Certains moyens de paiement [nécessitent l’activation dans le Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Les moyens de paiement ne sont disponibles que si le client utilise un navigateur pris en charge et effectue son paiement dans une devise prise en charge. - Certains moyens de paiement nécessitent des actions de configuration de la part du client. Par exemple, un client ne verra pas de bouton Google Pay s’il n’a pas configuré Google Pay. - [Enregistrez votre domaine](https://docs.stripe.com/payments/payment-methods/pmd-registration.md) à la fois dans votre environnement de test et en mode production. L’élément trie les moyens de paiement en fonction de leur pertinence pour votre client. Pour contrôler ces comportements, vous pouvez [personnaliser les moyens de paiement](https://docs.stripe.com/elements/express-checkout-element.md#customize-payment-methods). ## Navigateurs pris en charge Certains moyens de moyens de paiement fonctionnent avec des navigateurs spécifiques. | | Apple Pay | Google Pay | Link | PayPal | Amazon Pay | Klarna | | ------------------------ | -------------------- | ---------------- | -------------------- | -------------------- | -------------------- | -------------------- | | Chrome1 | ✓ Supported3 | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | | Edge | ✓ Supported3 | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | | Firefox | ❌ Non pris en charge | ✓ Supported5 | ❌ Non pris en charge | ✓ Pris en charge | ✓ Pris en charge | ❌ Non pris en charge | | Opera | ✓ Supported3 | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | | Safari | ✓ Supported2 | ✓ Supported4 | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | | Chrome sur iOS 16+ | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | | Firefox sur iOS 16+ | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | | Edge sur iOS 16+ | ✓ Pris en charge | ✓ Pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | 1 D’autres navigateurs Chrome peuvent être pris en charge. Pour en savoir plus, consultez la rubrique [Navigateurs pris en charge](https://docs.stripe.com/js/appendix/supported_browsers). 2Lors de l’utilisation d’un iframe, son origine doit correspondre à l’origine de premier niveau (à l’exception de Safari 17+ lors de la spécification de l’attribut `allow="payment"`). Deux pages ont la même origine si le protocole, l’hôte (nom de domaine complet) et le port (si spécifié) sont les mêmes pour les deux pages. 3Apple Pay sur les navigateurs Chrome de bureau n’est pris en charge sur MacOS que lorsque [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) est défini à `always`. 4Google Pay sur les navigateurs Safari n’est pris en charge que lorsque [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) est défini à `always`. 5Google Pay sur les navigateurs Firefox n’est pris en charge que lorsque [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-googlePay) est défini sur `always`. > L’élément Express Checkout offre une prise en charge limitée dans les webviews intégrées aux applications. Plusieurs modes de paiement nécessitent l’ouverture de fenêtres contextuelles et peuvent ne pas fonctionner correctement. Pour les intégrations dans des applications mobiles, envisagez d’utiliser le [SDK iOS](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=ios) ou le [SDK Android](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=mobile&platform=android). ## Mise en page Par défaut, lorsque l’Express Checkout Element affiche plusieurs boutons, il les organise dans une grille en fonction de l’espace disponible et affiche un menu déroulant si nécessaire. Vous pouvez remplacer cette disposition par défaut et préciser vous-même une mise en page de grille avec l’option [disposition](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). ## Texte Vous pouvez contrôler le texte d’un bouton en sélectionnant un [type de bouton](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonType). Chaque portefeuille numérique propose ses propres types de boutons. #### Link Link n’offre qu’un seul type de bouton, qui présente l’appel à l’action « Payer avec Link » et le logo Link. Nous essayons de détecter les paramètres régionaux de votre client et de les utiliser pour localiser le texte du bouton. Vous pouvez également préciser des [paramètres régionaux](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). #### Apple Pay Les types de boutons Apple Pay présentent différents appels à l’action à côté du logo Apple Pay. Nous essayons de détecter les paramètres régionaux de votre client et de les transmettre à Apple afin de localiser le texte du bouton. Vous pouvez également préciser des [paramètres régionaux](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Nous prenons en charge les types de boutons Apple Pay suivants. | Type de bouton | Appel à l’action | | -------------- | -------------------------------------- | | `plain` | Aucun, uniquement le logo | | `add-money` | « Ajouter de l’argent avec » | | `book` | « Réserver avec » | | `buy` | « Acheter avec » | | `check-out` | « Payer avec » | | `contribute` | « Contribuer avec » | | `donate` | « Faire un don avec » | | `order` | « Commander avec » | | `reload` | « Recharger avec » | | `rent` | « Louer avec » | | `subscribe` | « S’abonner avec » | | `support` | « Prendre en charge avec » | | `tip` | « Donner du pourboire avec » | | `top-up` | « Recharger avec » | #### Google Pay Les types de boutons Google Pay présentent différents appels à l’action à côté du logo Google Pay. Nous essayons de détecter les paramètres régionaux de votre client et de les transmettre à Google Pay afin de localiser le texte du bouton. Vous pouvez également préciser des [paramètres régionaux](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Nous prenons en charge les types de boutons Google Pay suivants. | Type de bouton | Appel à l’action | | -------------- | ------------------------------- | | `plain` | Aucun, uniquement le logo | | `book` | « Réserver avec » | | `buy` | « Acheter avec » | | `checkout` | « Payer avec » | | `donate` | « Faire un don avec » | | `order` | « Commander avec » | | `pay` | « Payer avec » | | `subscribe` | « S’abonner avec » | #### PayPal Les types de boutons PayPal présentent différents appels à l’action à côté du logo PayPal. Nous essayons de détecter les paramètres régionaux de votre client et de les transmettre à PayPal afin de localiser le texte du bouton. Vous pouvez également préciser des [paramètres régionaux](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Nous prenons en charge les types de boutons PayPal suivants. | Type de bouton | Appel à l’action | | -------------- | -------------------------------- | | `paypal` | Aucun, uniquement le logo | | `checkout` | « Payer » | | `buynow` | « Acheter maintenant » | | `pay` | « Payer avec » | #### Amazon Pay Amazon Pay ne propose qu’un seul type de bouton, qui présente le logo Amazon Pay sans appel à l’action. #### Klarna Les types de boutons Klarna présentent différents appels à l’action à côté du logo Klarna. Nous essayons de détecter les paramètres régionaux de votre client et de les transmettre à Klarna afin de localiser le texte du bouton. Vous pouvez également préciser des [paramètres régionaux](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). Nous prenons en charge les types de boutons Klarna suivants. | | | | | `continue` | « Continuer avec » | | `pay` | « Payer avec » | Cet exemple de code comprend l’appel à l’action « Acheter » ou « Acheter maintenant » pour les boutons qui le prennent en charge. Ensuite, il précise les paramètres régionaux `de` pour obtenir les équivalents en allemand. ```js const expressCheckoutOptions = { buttonType: { applePay: 'buy', googlePay: 'buy', paypal: 'buynow', klarna: 'pay', } } const elements = stripe.elements({ locale: 'de', mode: 'payment', amount: 1099, currency: 'usd', }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions ) expressCheckoutElement.mount('#express-checkout-element') ``` ## Appearance Vous ne pouvez pas entièrement personnaliser l’apparence des boutons Express Checkout Element, car chaque moyen de paiement a son propre logo et les couleurs de sa marque définis. Vous pouvez personnaliser les options suivantes : - [Hauteur des boutons](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonHeight) - Rayon de la bordure à l’aide de variables avec l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md) - [Thèmes des boutons](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme) > Le bouton Apple Pay se redimensionne automatiquement lorsque le rayon de la bordure augmente au-delà d’un certain seuil. Si vous modifiez le rayon de la bordure par défaut, assurez-vous de le tester avec tous les moyens de paiement actifs. Cet exemple de code configure un groupe d’éléments avec un thème clair et un rayon de bordure de 36 px, crée des boutons d’une hauteur de 50 px et remplace le thème pour utiliser la version à contour blanc du bouton Apple Pay. ```js const appearance = { theme: 'stripe', variables: { borderRadius: '36px', } } const expressCheckoutOptions = { buttonHeight: 50, buttonTheme: { applePay: 'white-outline' } } const elements = stripe.elements({ mode: 'payment', amount: 1099, currency: 'usd', appearance, }) const expressCheckoutElement = elements.create( 'expressCheckout', expressCheckoutOptions ) expressCheckoutElement.mount('#express-checkout-element') ``` Nous prenons en charge les thèmes suivants : #### Link Link a un thème à bouton unique, lisible sur un arrière-plan clair ou foncé. #### PayPal PayPal propose plusieurs thèmes de boutons. Si vous définissez un thème avec l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), l’Express Checkout Element choisit un thème compatible pour le bouton PayPal. Par exemple, si vous précisez un arrière-plan sombre, nous choisirons un thème de bouton clair pour plus de visibilité. Vous pouvez également choisir un thème avec l’option [buttonTheme.paypal](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-paypal). Consultez le [guide de style des boutons](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/) de PayPal pour obtenir des images à jour et des conseils sur la façon de les utiliser. Nous prenons en charge les valeurs suivantes : | | | | | `gold` | Couleurs or et bleu de la marque PayPal | | `blue` | Couleur bleu unie de la marque PayPal | | `silver` | Logo PayPal sur arrière-plan argent | | `white` | Logo PayPal sur arrière-plan blanc | | `black` | Logo PayPal sur arrière-plan noir | #### Apple Pay Apple Pay propose plusieurs thèmes de boutons. Si vous définissez un thème avec l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), l’Express Checkout Element choisit un thème compatible pour le bouton Apple Pay. Par exemple, si vous précisez un arrière-plan sombre, nous choisirons un thème de bouton clair pour plus de visibilité. Vous pouvez également choisir un thème avec l’option [buttonTheme.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-applePay). Consultez le [guide de style des boutons](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) d’Apple Pay pour obtenir des images à jour et des conseils sur la façon de les utiliser. Nous prenons en charge les valeurs suivantes : | | | | | `black` | Un arrière-plan noir avec du texte blanc | | `white` | Un arrière-plan blanc avec du texte en noir | | `white-outline` | Un arrière-plan blanc avec du texte noir et une bordure noire | #### Google Pay Google Pay propose plusieurs thèmes de boutons. Si vous définissez un thème avec l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), l’Express Checkout Element choisit un thème compatible pour le bouton Google Pay. Par exemple, si vous précisez un arrière-plan sombre, nous choisirons un thème de bouton clair pour plus de visibilité. Vous pouvez également choisir un thème avec l’option [buttonTheme.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-googlePay). Consultez le [guide de style des boutons](https://developers.google.com/pay/api/web/guides/brand-guidelines) de Google Pay pour obtenir des images à jour et des conseils sur la façon de les utiliser. Nous prenons en charge les valeurs suivantes : | | | | | `black` | Un arrière-plan noir avec du texte blanc | | `white` | Un arrière-plan blanc avec du texte en noir | #### Amazon Pay Amazon Pay a un thème à bouton unique. #### Klarna Klarna propose plusieurs thèmes de boutons. Si vous définissez un thème avec l’API [Appearance](https://docs.stripe.com/elements/appearance-api.md), l’Express Checkout Element choisit un thème compatible pour le bouton Klarna. Par exemple, si vous précisez un arrière-plan sombre, nous choisirons un thème de bouton clair pour plus de visibilité. Vous pouvez également choisir un thème avec l’option [buttonTheme.klarna.](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonTheme-klarna) ## Personnaliser les moyens de paiement Vous ne pouvez pas préciser les moyens de paiement à afficher. Par exemple, vous ne pouvez pas forcer l’affichage d’un bouton Google Pay si l’appareil de votre client ne prend pas en charge Google Pay. Mais vous pouvez personnaliser le comportement du moyen de paiement de différentes manières, notamment : - Vous pouvez activer ou désactiver les moyens de paiement à partir du [Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Vous pouvez remplacer la logique par défaut de Stripe qui consiste à trier les moyens de paiement par ordre de pertinence. Utilisez l’option [paymentMethodOrder](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethodOrder) pour définir votre ordre préféré. - S’il n’y a pas assez d’espace dans la mise en page, les moyens de paiement peu pertinents peuvent figurer dans un menu de débordement. Personnalisez le moment où le menu est affiché à l’aide de l’option [diposition](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). - Pour empêcher qu’Apple Pay ou que Google Pay soient affichés, définissez [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) ou [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) à `never`. - Pour permettre à Apple Pay ou Google Pay d’être affichés alors qu’ils ne sont pas configurés, définissez [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) ou [paymentMethods.googlePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) à `always`. Cela ne les forcera pas à être affichés sur les plateformes non prises en charge, ou lorsque le paiement est effectué dans une devise non prise en charge. > La réglementation en vigueur en [Finlande](https://support.stripe.com/questions/payment-method-legislation-in-finland) et en [Suède](https://support.stripe.com/questions/payment-method-legislation-in-sweden) exige que vous présentiez d’abord les moyens de paiement par débit avant d’indiquer les moyens de paiement par crédit lors du paiement effectué dans ces pays. ## Vérifiez les modes de paiement disponibles Écoutez l’événement « ready » pour vérifier quels portefeuilles sont disponibles pour l’affichage de l’élément Express Checkout. Si aucun portefeuille n’est disponible, proposez une autre option de paiement à votre client. ```js () => { const [eceActive, setEceActive] = useState(false); return (
{ if (availablePaymentMethods) { setEceActive(true); } }} /> {eceActive ? : }
); } ``` Vous pouvez également masquer l’ensemble du composant Express Checkout Element jusqu’à ce que vous sachiez qu’il existe des méthodes d’affichage pour ce module. ```js () => { const [eceActive, setEceActive] = useState(false); return (
); } ``` Le même événement est disponible sur l’objet élément lorsqu’il est créé sans React. ```js const expressCheckoutElement = elements.create("expressCheckout", { ... }); expressCheckoutElement.on("ready", ({ availablePaymentMethods }) => { console.log(availablePaymentMethods); }); expressCheckoutElement.mount("#express-checkout-element"); ```