Element Payment Stripe

Acceptez les moyens de paiement du monde entier grâce à un composant d'interface utilisateur intégré et sécurisé.

Vous souhaitez utiliser Stripe Tax, les remises, les frais de livraison ou la conversion de devises ?

Nous développons actuellement une intégration de Payment Element qui gère les taxes, les remises, les frais d’expédition et la conversion de devises. Pour en savoir plus, lisez le guide Créer une page de paiement.

Le Payment Element est un composant d’interface utilisateur pour le Web qui accepte plus de 40 moyens de paiement, valide la saisie et gère les erreurs. Utilisez-le seul ou avec d’autres éléments du front-end de votre application Web.

Pays concernés

Au Brésil et en Thaïlande, Payment Elements ne prend pas en charge Link.

Cette démo affiche uniquement Google Pay ou Apple Pay si vous disposez d'une carte active sur l'un de ces portefeuilles.

Vous pouvez intégrer le composant Payment Element avec :

L’API Checkout Sessions pour créer une page de paiement.
L’API Payment Intents pour créer une intégration avancée.

Créer une page de paiement à l'aide du composant Payment Element

Créez une intégration au composant Payment Element à l’aide de l’API Payment Intents.

Version bêta publique

Développer une intégration avancée avec le composant Payment Element

Créez une intégration au composant Payment Element à l’aide de l’API Payment Intents.

Cloner une application test sur GitHub

HTML · React · Vue

Consulter la documentation Stripe.js

Créer un Payment Element

Ce code crée un Payment Element et le monte sur le DOM :

index.js
Afficher l'exemple dans son intégralité
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = { layout: 'accordion', /* options */ };
const elements = stripe.elements({clientSecret
, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

L’acceptation des paiements avec le Payment Element nécessite du code back-end supplémentaire. Consultez notre guide QuickStart ou notre application test pour en savoir plus sur la manière de procéder.

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 récupérer l’adresse de livraison.

Remarque

Vous ne pouvez pas supprimer l’accord juridique Link, car il est nécessaire pour garantir le respect des conditions d’utilisation et des politiques de confidentialité par les utilisateurs. L’objet terms ne s’applique pas aux conditions juridiques de Link.

Un formulaire avec les informations de contact, l'adresse de livraison et les champs de paiement. Les coordonnées sont libellées Link Authentication Element, l'adresse de livraison est libellée Address Element et les champs de paiement sont libellés Payment Element.

Pour obtenir le code complet de cet exemple, consultez la page Ajouter Link à une intégration Elements.

Vous pouvez également combiner le Payment Element avec l’Express Checkout Element. Dans ce cas, les portefeuilles électroniques tels qu’Apple Pay et Google Pay ne sont affichés que dans l’Express Checkout Element afin d’éviter les doublons.

Moyens de paiement

Stripe active certains moyens de paiement par défaut. Nous pourrons également activer d’autres moyens de paiement après vous en avoir informé(e). Utilisez le Dashboard pour activer ou désactiver des moyens de paiement à tout moment. Avec le composant Payment Element, vous pouvez utiliser des moyens de paiement dynamiques pour :

Gérer vos moyens de paiement dans le Dashboard sans rédiger une seule ligne de code
Afficher de manière dynamique les options de paiement les plus pertinentes en fonction de facteurs tels que la localisation, la devise et le montant de la transaction

Par exemple, si un client allemand paie en EUR, il voit 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 Personnaliser les moyens de paiement. Pour ajouter des moyens de paiement intégrés en dehors de Stripe, consultez Moyens de paiement externes.

Si votre intégration nécessite de répertorier manuellement les moyens de paiement, consultez Répertorier les moyens de paiement manuellement.

Affichage

Vous pouvez adapter la mise en page du Payment Element à votre tunnel de paiement. L’image suivante présente différents affichages du même Payment Element.

Exemples des trois formulaires de paiement. L'image montre la disposition en onglets, où les clients choisissent parmi les moyens de paiement présentés en cliquant sur l'onglet correspondant, ainsi que les deux dispositions en accordéon, qui répertorient les moyens de paiement verticalement. Vous pouvez choisir d'afficher ou non les boutons radio dans la vue en accordéon.

Element Payment avec différentes mises en page.

Les moyens de paiement sont affichés horizontalement à l’aide d’onglets. Pour utiliser cette mise en page, définissez la valeur de layout.type sur tabs. Vous pouvez également spécifier d’autres propriétés, telles que layout.defaultCollapsed.

index.js
Afficher l'exemple dans son intégralité
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */ };
const options = {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
};

Apparence

Utilisez l’API Appearance pour contrôler le style de tous les éléments. Choisissez un thème ou mettez à jour des informations spécifiques.

Exemples de modes clair et sombre pour le formulaire de paiement du Payment Element.

Par exemple, choisissez le thème « flat » et remplacez la couleur principale du texte.

index.js
Afficher l'exemple dans son intégralité
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = {
  theme: 'flat',
  variables: { colorPrimaryText: '#262626' }
};

Consultez la documentation relative à l’API Appearance pour obtenir la liste complète des thèmes et des variables.

Options

Les Stripe Elements prennent en charge davantage d’options que celles-ci. Par exemple, affichez le nom de votre entreprise à l’aide de l’option business.

index.js
Afficher l'exemple dans son intégralité
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const appearance = { /* appearance */};
const options = {
  business: "RocketRides"
};

Le Payment Element prend en charge les options suivantes. Reportez-vous à la documentation de chaque option pour plus d’informations.

layout	Mise en page du Payment Element.
defaultValues	Informations initiales du client à afficher dans le Payment Element.
business	Informations sur votre entreprise à afficher dans le Payment Element.
paymentMethodOrder	Ordre dans lequel répertorier les moyens de paiement.
champs	Détermine les champs à afficher.
readOnly	Détermine si les données 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 consiste à les afficher uniquement lorsque cela est nécessaire.
wallets	Détermine si les portefeuilles comme Apple Pay ou Google Pay seront affichés. Par défaut, ils sont affichés lorsque cela est possible.

Erreurs

Le composant Payment Element affiche automatiquement des messages d’erreur localisés lors de la confirmation du client pour les codes d’erreur suivants :

generic_decline
insufficient_funds
incorrect_zip
incorrect_cvc
invalid_cvc
invalid_expiry_month
invalid_expiry_year
expired_card
fraudulent
lost_card
stolen_card
card_velocity_exceeded

Pour afficher des messages pour d’autres types d’erreurs, reportez-vous aux sections Codes d’erreur et Gestion des erreurs.