Express Checkout Element

L’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 et PayPal.

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.

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'
  }
}
const elements = stripe.elements({
  locale: 'de',
  mode: 'payment',

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 faire s’afficher Apple Pay ou Google Pay, configurez wallets.applePay ou wallets.googlePay sur never.
• Pour autoriser l’affichage d’Apple Pay ou de Google Pay quand ils ne sont pas configurés, définissez wallets.applePay ou wallets.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.