Express Checkout Element

Le composant Express Checkout Element vous permet, via une seule intégration, d’accepter des paiements en un clic à l’aide de boutons de paiement. Les moyens de paiement suivants sont pris en charge : Link, Apple Pay, Google Pay, PayPal et Amazon Pay.

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.

Try the demo

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.

Start with a guide

Créer un Express Checkout Element

Ce code permet de créer un groupe d’éléments avec un Express Checkout Element et de le monter sur le DOM.

const appearance = { /* appearance */ }
const options = { /* options */ }
const elements = stripe.elements({
  mode: 'payment',
  amount: 1099,
  currency: 'usd',
  appearance,
})
const expressCheckoutElement = elements.create('expressCheckout', options)
expressCheckoutElement.mount('#express-checkout-element')

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.
• 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.

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.

Navigateurs pris en charge

Certains moyens de paiement ne fonctionnent qu’avec certains navigateurs spécifiques.

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.

Texte

Vous pouvez contrôler le texte d’un bouton en sélectionnant un buttonType. Chaque portefeuille propose ses propres types de bouton.

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.

const expressCheckoutOptions = {
  buttonType: {
    applePay: 'buy',
    googlePay: 'buy',
    paypal: 'buynow',
    klarna: 'pay',
  }
}
const elements = stripe.elements({
  locale: 'de',

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
• Angle des bordures à l’aide de variables avec l’API Appearance
• Thèmes des boutons

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.

const appearance = {
  theme: 'stripe',
  variables: {
    borderRadius: '36px',
  }
}
const expressCheckoutOptions = {
  buttonHeight: 50,
  buttonTheme: {

Nous prenons en charge les thèmes suivants :

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 :

• You can activate or deactivate payment methods from the Dashboard.
• Vous pouvez remplacer la logique de tri par pertinence de Stripe, configurée par défaut. Utilisez l’option 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.
• Pour ne pas afficher Apple Pay ou Google Pay, définissez paymentMethods.applePay ou paymentMethods.googlePay sur never.
• Pour autoriser l’affichage d’Apple Pay ou de Google Pay quand ils ne sont pas configurés, définissez paymentMethods.applePay ou paymentMethods.googlePay 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.