Accepter un paiement avec Express Checkout Element
Utilisez une seule intégration pour accepter les paiements par le biais de boutons de paiement en un clic.
Le composant Express Checkout Element est une intégration permettant d’accepter des paiements par le biais de boutons de moyens de paiement en un clic. Les moyens de paiement pris en charge sont les suivants : Link, Apple Pay, Google Pay, PayPal, Klarna, et Amazon Pay.
Les clients voient différents boutons de paiement en fonction de leur appareil et de leur navigateur. Les appareils compatibles prennent automatiquement en charge Google Pay et Link. Vous devez effectuer des étapes supplémentaires pour prendre en charge Apple Pay et PayPal.
Essayer la démonstration
Basculez les options préconfigurées dans la démo pour modifier la couleur d’arrière-plan, la mise en page, la taille et la collecte des adresses de livraison. La démo affiche Google Pay et Apple Pay uniquement sur les plateformes où ils sont disponibles. Les boutons de moyens de paiement ne s’affichent que dans les pays où ils sont pris en charge.
Si vous ne voyez pas la démo, essayez de visualiser cette page dans un navigateur pris en charge.
| Option | Description |
|---|---|
| Pays du marchand | Définissez cette option avec la clé publiable que vous utilisez pour initialiser Stripe.js. 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. 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. |
| 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 lorsque vous créez le composant Express Checkout Element. |
| Menu de débordement | Définissez cette option à l’aide du paramètre layout lorsque vous créez l’Express Checkout Element. |
| Collecter une adresse de livraison | Pour collecter les informations de livraison, vous devez transmettre les options lors de la création de l’Express Checkout Element. En savoir plus sur la collecte des informations des clients et l’affichage des postes de facture. |
Avant de commencer
- Ajoutez un moyen de paiement à votre navigateur. Par exemple, vous pouvez ajouter une carte à votre compte Google Pay ou à Cartes pour Safari.
- Fournir votre application via HTTPS. Cette exigence s’applique à la fois en développement et en production. Vous pouvez également utiliser un service comme ngrok.
- Enregistrez votre domaine à la fois dans un environnement de test et en mode production.
- Créez un compte d’environnement de test PayPal pour tester votre intégration.
Tout d’abord, créez un compte Stripe ou connectez-vous.
Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :
Par défaut, Stripe utilise vos paramètres de moyens de paiement pour déterminer quels moyens de paiement sont activés dans le composant Express Checkout Element. Vous pouvez également configurer des moyens de paiement spécifiques dans votre session Checkout à l’aide de l’attribut payment_method_types.
Moyens de paiement pris en charge
Apple Pay et Google Pay sont automatiquement activés lorsque vous utilisez le type de moyen de paiement card. Lors de l’utilisation de Link, vous devez également transmettre le type de moyen de paiement card.
| Moyens de paiement | Type de moyen de paiement |
|---|---|
| Amazon Pay | amazon_ |
| Apple Pay | card |
| Google Pay | card |
| Klarna | klarna |
| Lien | link, card |
| PayPal | paypal |
Créez une session Checkout sur votre serveur pour contrôler le tunnel de paiement. La session Checkout définit vos éléments de poste, vos options de livraison et d’autres paramètres pour le paiement.
Définissez ui_ sur custom pour intégrer le composant Express Checkout Element. La session Checkout renvoyée comprend une clé secrète du client, que celui-ci utilise pour afficher en toute sécurité l’interface de paiement.
Vous pouvez configurer des options supplémentaires sur la session Checkout :
- phone_number_collection : Collecter les numéros de téléphone des clients
- shipping_address_collection : Collecter les adresses de livraison
- shipping_options: fournir des options de tarifs de livraison
- automatic_tax : Activer le calcul automatique des taxes
Le composant Express Checkout Element contient une iframe qui envoie en toute sécurité les informations de paiement à Stripe via une connexion HTTPS. L’adresse de la page de paiement doit également commencer par https://, au lieu de http://, pour que votre intégration fonctionne.
La session Checkout que vous avez créée sur le serveur détermine automatiquement les postes, le montant total et les moyens de paiement disponibles. Le composant Express Checkout Element utilise ces informations pour afficher l’interface adaptée.
Une fois ajouté, le composant Express Checkout Element n’affichera pas les boutons pendant une brève période. Pour animer l’Element lorsque les boutons apparaissent, écoutez l’événement ready. Examinez la valeur availablePaymentMethods pour déterminer quels boutons s’affichent dans l’Express Checkout Element, le cas échéant.
Vous pouvez appliquer un style différent à chaque bouton de moyen de paiement et contrôler l’apparence générale du composant Express Checkout Element.
Avant de passer en mode production, testez l’intégration de chaque moyen de paiement. Pour déterminer la compatibilité d’un moyen de paiement avec un navigateur, consultez les navigateurs pris en charge. Si vous utilisez Express Checkout Element dans un iframe, l’attribut allow de cet iframe doit être défini sur payment *.
Connect Les plateformes peuvent utiliser le composant Express Checkout Element avec les sessions Checkout en incluant le compte connecté dans la session.
Lors de la création de la session Checkout sur votre serveur, incluez le compte connecté :
Enregistrez tous les domaines sur lesquels vous prévoyez d’afficher le composant Express Checkout Element.
Divulguer Stripe à vos clients
Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre Centre de confidentialité.