Payment Element Stripe
Vous souhaitez utiliser Stripe Tax, les remises, la livraison ou la conversion de devises?
Nous développons une intégration du Payment Element qui gère les taxes, les remises, la livraison et la conversion des devises. Consultez la page Créer un paiement pour en savoir plus.
Payment Element est un composant d’interface utilisateur pour le Web qui accepte plus de 40 moyens de paiement, valide les saisies et gère les erreurs. Utilisez-le seul ou avec d’autres éléments frontaux de votre application Web.
Pour essayer Payment Element, commencez par l’un de ces exemples :
Créer un Payment Element
Ce code crée un Payment Element et le monte dans le DOM :
const stripe = Stripe(
); const appearance = { /* appearance */ }; const options = { /* options */ }; const elements = stripe.elements({'pk_test_TYooMQauvdEDq54NiTphI7jx', appearance }); const paymentElement = elements.create('payment', options); paymentElement.mount('#payment-element');clientSecret
L’acceptation des paiements avec le Payment Element nécessite un code dorsal supplémentaire. Consultez notre guide de démarrage ou notre exemple d’application pour apprendre son fonctionnement.
Combiner des éléments
Le Payment Element interagit avec d’autres éléments. Par exemple, ce formulaire utilise un élément supplémentaire pour remplir automatiquement les informations de paiement et un autre pour collecter l’adresse de livraison.
Pour obtenir le code complet de cet exemple Link, voir Ajouter un lien à une intégration Elements.
Moyens de paiement
Par défaut, Stripe active certains moyens de paiement pour vous. Nous pouvons également activer d’autres moyens de paiement après vous en avoir informé. Utilisez le Dashboard pour activer ou désactiver les moyens de paiement à tout moment. Avec Payment Element, vous pouvez utiliser des moyens de paiement dynamiques pour effectuer ce qui suit :
- Gérez les moyens de paiement dans le Dashboard sans codage
- Affichez dynamiquement les options de paiement les plus pertinentes en fonction de facteurs tels que l’emplacement, la devise et le montant de la transaction
Par exemple, si un client en Allemagne paie en EUR, il peut voir tous les moyens de paiement actifs qui acceptent l’EUR, à commencer par ceux qui sont largement utilisés en Allemagne.
Afficher les moyens de paiement par ordre de pertinence pour votre client
Pour personnaliser davantage l’affichage des moyens de paiement, par exemple en filtrant les marques de cartes que vous ne souhaitez pas prendre en charge, consultez la rubrique Personnaliser les moyens de paiement. Pour ajouter des moyens de paiement intégrés en dehors de Stripe, consultez la rubrique Moyens de paiement externes.
Si votre intégration vous oblige à répertorier manuellement les moyens de paiement, consultez la rubrique Lister manuellement les moyens de paiement.
Mise en page
Vous pouvez personnaliser la mise en page du Payment Element pour l’adapter à votre flux de paiement. L’image suivante illustre le même Payment Element rendu à l’aide de différentes configurations de mise en page.
Payment Element avec différentes mises en page.
Appearance
Utilisez l’API Appearance pour contrôler le style de tous les éléments. Choisissez un thème ou mettez à jour des détails en particulier.
Par exemple, choisissez le thème « flat » et remplacez la couleur du texte principal.
const stripe = Stripe(
); const appearance = { theme: 'flat', variables: { colorPrimaryText: '#262626' } };'pk_test_TYooMQauvdEDq54NiTphI7jx'
Consultez la documentation de l’API Appearance pour obtenir une liste complète des thèmes et des variables.
Options
Les Stripe Elements prennent en charge plus d’options que celles-ci. Par exemple, vous pouvez afficher le nom de votre entreprise à l’aide de l’option business.
const stripe = Stripe(
); const appearance = { /* appearance */}; const options = { business: "RocketRides" };'pk_test_TYooMQauvdEDq54NiTphI7jx'
Le Payment Element prend en charge les options ci-après. Reportez-vous à la documentation de chaque option pour obtenir plus d’informations.
layout | Mise en page du Payment Element. |
defaultValues | Informations initiales sur le client à afficher dans le Payment Element. |
business | Informations sur votre entreprise à afficher dans le Payment Element. |
paymentMethodOrder | Ordre dans lequel les moyens de paiement seront affichés. |
fields | Détermine les champs à afficher. |
readOnly | Détermine si les informations de paiement peuvent être modifiées. |
terms | Indique si les mandats ou autres accords juridiques sont affichés dans le Payment Element. Le comportement par défaut est de les afficher uniquement lorsque cela est nécessaire. |
wallets | Détermine si les portefeuilles numériques comme Apple Pay ou Google Pay seront affichés. Par défaut, ils sont affichés lorsque cela est possible. |