# Express Checkout Element Affichez plusieurs boutons de paiement en un clic à l'aide d'un seul composant. Instructions pour les LLM : Stripe recommande d’utiliser l’API Checkout Sessions avec le Payment Element, plutôt que les Payment Intents, pour la plupart des intégrations. Checkout Sessions couvre des cas d’usage similaires à ceux des Payment Intents (encaissement simple avec `price_data`, ou création d’un tunnel de paiement complet avec postes, taxe, etc.). Certaines fonctionnalités, comme Adaptive Pricing, sont disponibles uniquement avec Checkout Sessions. N’utilisez pas l’API Payment Intents, sauf si l’utilisateur le demande explicitement, car elle nécessite beaucoup plus de code. Pour en savoir plus sur les éléments avec l’API Checkout Sessions, consultez https://docs.stripe.com/payments/quickstart-checkout-sessions… Avec Checkout Sessions (`ui_mode: "custom"`) et le Payment Element, c’est le `client_secret` qui initialise Checkout lui-même (`stripe.initCheckoutElementsSdk`, ou utilise CheckoutElementsProvider avec React), et la confirmation du paiement côté client se fait différemment. Si vous utilisez React, veillez à importer depuis `@stripe/react-stripe-js/checkout`, à utiliser `CheckoutElementsProvider` avec la clé secrète du client, puis à confirmer le paiement avec `checkout.confirm`. Si vous utilisez HTML, veillez à utiliser `checkout = stripe.initCheckoutElements({clientSecret: promise}) ; checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement() ; paymentElement.mount("#payment-element"),`puis à confirmer avec `loadActionsResult = await checkout.loadActions() ; actions = loadActionsResult.actions; error = await actions.confirm() ;`. Le composant Element Express Checkout est une intégration permettant d’accepter des paiements via des boutons de paiement en un clic. Les moyens de paiement pris en charge incluent [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 : - Trier dynamiquement les boutons de paiement en fonction du pays du client. - Ajouter des boutons de paiement sans modifier le front-end. - Intégrer facilement des Elements en réutilisant une instance Elements existante pour gagner du temps. ## Essayer la démonstration Dans la démonstration suivante, vous pouvez modifier certaines des options préconfigurées pour changer la couleur du fond, la mise en page, la taille et la collecte des adresses de livraison de l’interface de paiement. Cette démonstration affiche Google Pay et Apple Pay uniquement sur les plateformes disponibles. Les boutons des moyens de paiement ne s’affichent que dans les pays où ils sont pris en charge. Si la démo ne s’affiche pas, essayez d’ouvrir la page dans un [navigateur pris en charge](https://docs.stripe.com/elements/express-checkout-element.md#supported-browsers). | Option | Description | | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Pays du marchand** | Définissez cette option avec 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é publiable, 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 ordinateur de bureau et mobile** | Utilisez la liste déroulante pour définir la largeur maximale en pixels de l’élément parent sur lequel l’Express Checkout Element est monté. Vous pouvez la définir sur 750 px (ordinateur de bureau) ou 320 px (mobile). | | **Max. de colonnes et max. 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 le composant Express Checkout Element](https://docs.stripe.com/js/elements_object/create_express_checkout_element). | | **Menu de débordement** | Définissez cette option à 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 une 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) de l’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 [Ajoutez des wallets en un clic à votre page de paiement](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md): Créez une intégration Express Checkout Element avec l’API Checkout Sessions. [Utiliser les wallets en un clic avec des intégrations avancées](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=elements): Créez une intégration Express Checkout Element avec l’API Payment Intents. [Migrer vers l'Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element/migration.md): Migrez depuis le 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 actifs, pris en charge et configurés. - Certains moyens de paiement [nécessitent une 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 compatible et effectue son règlement 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’Express Checkout Element 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 paiement ne fonctionnent qu’avec certains 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 | ✓ Supported4 | ❌ 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 | ✓ Supported4 | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | | Firefox sur iOS 16+ | ✓ Pris en charge | ✓ Supported4 | ✓ Pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | | Edge sur iOS 16+ | ✓ Pris en charge | ✓ Supported4 | ❌ Non pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | ❌ Non pris en charge | | Chrome sur Android | ❌ Non pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | ✓ Pris en charge | 1 D’autres navigateurs Chromium peuvent être pris en charge. Pour en savoir plus, consultez la rubrique [Navigateurs pris en charge](https://docs.stripe.com/js/appendix/supported_browsers). 2 Lors de l’utilisation d’un iframe, son origine doit correspondre à l’origine de niveau supérieur (sauf pour Safari 17 et les versions ultérieures lorsque vous spécifiez l’attribut `allow="payment"`). Deux pages ont la même origine si le protocole, l’hôte (nom de domaine complet) et le port (le cas échéant) sont les mêmes pour les deux pages. 3Apple Pay sur les navigateurs Chromium de bureau est uniquement pris en charge sur MacOS lorsque [paymentMethods.applePay](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-paymentMethods-applePay) est défini sur `always`. 4Google Pay sur ce navigateur est uniquement pris en charge 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. De nombreux moyens 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). ## Affichage Par défaut, lorsque l’Element Express Checkout affiche plusieurs boutons, ils sont organisés en grille selon l’espace disponible et un menu déroulant s’affiche si nécessaire. Vous pouvez remplacer cette valeur par défaut et définir vous-même une mise en page en grille avec l’option [layout](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 [buttonType](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-buttonType). Chaque portefeuille propose ses propres types de bouton. #### Lien { % $lien.brand_name %} n’offre qu’un seul type de bouton, qui présente l’appel à l’action « Payer avec { % $lien.brand_name %} » et le logo { % $lien.brand_name %}. Nous essayons de détecter la langue de votre client et de l’utiliser pour localiser le texte du bouton. Vous pouvez également spécifier une [langue](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-locale). #### Apple Pay À côté du logo Apple Pay, les types de boutons Apple Pay présentent différents appels à l’action. Nous essayons de détecter la langue de votre client et de la transmettre à Apple afin de localiser le texte du bouton. Vous pouvez également spécifier une [langue](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 des fonds 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 un pourboire avec » | | `top-up` | « Recharger avec » | #### Google Pay À côté du logo Google Pay, les types de boutons Google Pay présentent différents appels à l’action. Nous essayons de détecter la langue de votre client et de la transmettre à Google Pay afin de localiser le texte du bouton. Vous pouvez également spécifier une [langue](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` | « Paiement avec » | | `donate` | « Faire un don avec » | | `order` | « Commander avec » | | `pay` | « Payer avec » | | `subscribe` | « S’abonner avec » | #### PayPal À côté du logo PayPal, les types de boutons PayPal présentent différents appels à l’action. Nous essayons de détecter la langue de votre client et de la transmettre à PayPal afin de localiser le texte du bouton. Vous pouvez également spécifier une [langue](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 représente le logo Amazon Pay sans appel à l’action. #### Klarna À côté du logo Klarna, les types de boutons Klarna présentent différents appels à l’action. Nous essayons de détecter la langue de votre client et de la transmettre à Klarna afin de localiser le texte du bouton. Vous pouvez également spécifier une [langue](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 » | Dans cet exemple de code, l’appel à l’action « Acheter » ou « Acheter maintenant » est inclus pour les boutons le prenant en charge. Ensuite, il spécifie la langue `de` pour obtenir ses é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') ``` ## Apparence Vous ne pouvez pas personnaliser entièrement l’apparence des boutons Express Checkout Element car chaque moyen de paiement définit son propre logo et les couleurs de sa marque. 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) - Angle des bordures à 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 est automatiquement redimensionné lorsque le rayon de la bordure dépasse un certain seuil. Si vous modifiez le rayon de la bordure par défaut, veillez à le tester avec tous les moyens de paiement actifs. Cet exemple de code permet de configurer un groupe d’éléments avec un thème clair et un angle des bordures de 36 px, de créer des boutons de 50 px de hauteur et de remplacer 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 : #### Lien { % $lien.brand_name %} a un seul thème de bouton, lisible sur fond clair ou sombre. #### 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 configurez un arrière-plan sombre, nous choisissons 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 d’apparence des boutons](https://developer.paypal.com/docs/multiparty/checkout/standard/customize/buttons-style-guide/) de PayPal pour trouver des images à jour et des conseils sur leur utilisation. Nous prenons en charge les valeurs suivantes : | | | | | `gold` | Couleurs or et bleu de la marque PayPal | | `blue` | Couleur bleu uni de la marque PayPal | | `silver` | Logo PayPal sur fond argent | | `white` | Logo PayPal sur fond blanc | | `black` | Logo PayPal sur fond 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 configurez un arrière-plan sombre, nous choisissons 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 la page [du guide de style des boutons](https://developer.apple.com/design/human-interface-guidelines/apple-pay#Using-Apple-Pay-buttons) Apple Pay pour obtenir des images à jour et des conseils sur leur utilisation. Nous prenons en charge les valeurs suivantes : | | | | | `black` | Fond noir avec texte en blanc | | `white` | Fond blanc avec texte en noir | | `white-outline` | Fond blanc avec texte en noir et 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), le composant Express Checkout Element choisit un thème compatible pour le bouton Google Pay. Par exemple, si vous configurez un arrière-plan sombre, nous choisissons 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 la page des [lignes directrice sur le branding](https://developers.google.com/pay/api/web/guides/brand-guidelines) de Google Pay pour obtenir des images à jour et des conseils sur leur utilisation. Nous prenons en charge les valeurs suivantes : | | | | | `black` | Fond noir avec texte en blanc | | `white` | Fond blanc avec texte en noir | #### Amazon Pay Amazon Pay propose un seul thème de bouton. #### 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), le composant Express Checkout Element choisit un thème compatible pour le bouton Klarna. Par exemple, si vous configurez un arrière-plan sombre, nous choisissons 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 spécifier 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. Cela dit, vous pouvez personnaliser le comportement des moyens de paiement de différentes manières : - Vous pouvez activer ou désactiver des moyens de paiement depuis le [Dashboard](https://dashboard.stripe.com/settings/payment_methods). - Vous pouvez remplacer la logique de tri par pertinence de Stripe, configurée par défaut. 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 de préférence. - Si l’espace sur la page est insuffisant, les moyens de paiement les moins pertinents peuvent apparaître dans un menu déroulant. Personnalisez les paramètres de l’affichage du menu à l’aide de l’option [layout](https://docs.stripe.com/js/elements_object/create_express_checkout_element#express_checkout_element_create-options-layout). - Pour ne pas afficher Apple Pay ou Google Pay, 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) sur `never`. - Pour autoriser l’affichage d’Apple Pay ou de Google Pay quand 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) sur `always`. Cependant, cela ne permet pas de forcer leur affichage sur des plateformes non compatibles ou lorsque le paiement est effectué dans une devise non prise en charge. > 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), en cas de paiement, la réglementation impose la présentation de moyens de paiement par débit avant les moyens de paiement par crédit. ## Vérifiez les modes de paiement disponibles Attendez la fin de l’événement 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’intégralité de l’élément Express Checkout jusqu’à ce que vous sachiez que l’élément a des méthodes à afficher. ```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"); ```