Ajouter des boutons de paiement en un clic

The Express Checkout Element is an integration for accepting payments through one-click payment methods buttons. Supported payment methods include Link, Apple Pay, Google Pay, PayPal, Klarna, and Amazon Pay.

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.

Conditions préalables

Avant de commencer, vous devez :

• Activez Link, Apple Pay, Google Pay, PayPal ou Amazon Pay dans le Dashboard.
• Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à votre portefeuille pour Safari.
• Fournissez votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production Vous pouvez utiliser un service comme ngrok.
• Enregistrez votre domaine à la fois dans votre environnement de test et en mode production.

Gérer les paiements en un clic

L’Express Checkout Element émet l’événement de confirmation lorsque votre client finalise son paiement. Créez un gestionnaire qui répond à l’événement en appelant confirm et transmettez-le à l’Express Checkout Element.

L’événement contient également les champs suivants :

• expressPaymentType : L’une des options suivantes : 'apple_pay', 'google_pay', 'link', 'paypal', 'klarna', ou 'amazon_pay'.
• billingDetails : Objet contenant des informations sur les informations de facturation du client.
• shippingAddress : Objet contenant des informations sur l’adresse de livraison du client.
• shippingRate : Objet contenant des informations sur le tarif d’expédition sélectionné.

<div id="express-checkout-element"></div>

const expressCheckoutElement = checkout.createExpressCheckoutElement();
expressCheckoutElement.on('confirm', (event) => {
  checkout.confirm({expressCheckoutConfirmEvent: event})
});
expressCheckoutElement.mount('#express-checkout-element');

Les options suivantes sont également prises en charge :

• buttonHeight
• buttonTheme
• layout
• paymentMethodOrder
• paymentMethods
  • Remarque : La configuration de votre Dashboard et celle de Checkout ont toutes deux une incidence sur la disponibilité des moyens de paiement dans Express Checkout Element. Par défaut, il affiche tous les moyens de paiement disponibles en fonction des deux configurations. Si vous définissez l’option paymentMethods, Express Checkout Element fusionne les options que vous avez spécifiées avec la logique par défaut pour déterminer l’ensemble final de moyens de paiement affichés.

Collecter des informations supplémentaires sur le client

Vous pouvez collecter des informations supplémentaires à partir du composant Express Checkout Element en configurant des options sur votre session Checkout, telles que phone_number_collection, shipping_address_collection et shipping_options.

curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  -d ui_mode=custom \
  -d return_url={{RETURN_URL}} \
  -d "phone_number_collection[enabled]"=true \
  -d "shipping_address_collection[allowed_countries][0]"=US \
  -d "shipping_options[0][shipping_rate]"=
{{SHIPPING_RATE_ID}}