Express Checkout Element

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

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.

Commencer par un guide

Moyens de paiement

The Express Checkout Element presents click-to-pay payment methods that are active, supported, and set up.

• Certains moyens de paiement nécessitent l’activation dans le Dashboard.
• 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 à 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.

Navigateurs pris en charge

Certains moyens de moyens de paiement fonctionnent avec des navigateurs spécifiques.

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.

Texte

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

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.

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

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

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.

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 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.
• 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 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.
• Pour empêcher qu’Apple Pay ou que Google Pay soient affichés, définissez paymentMethods.applePay ou paymentMethods.googlePay à never.
• Pour permettre à Apple Pay ou Google Pay d’être affichés alors qu’ils ne sont pas configurés, définissez paymentMethods.applePay ou paymentMethods.googlePay à 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.