Element Payment Stripe

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.

Pour tester le Payment Element par vous-même, commencez par l’un des exemples suivants :

Créer un Payment Element

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

const stripe = Stripe(
'pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

const appearance = { /* appearance */ };
const options = { /* 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 exemple d’application 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.

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

Moyens de paiement

Le Payment Element affiche tous les moyens de paiement activés et disponibles.

• Certains moyens de paiement nécessitent une activation dans le Dashboard.
• Les moyens de paiement ne sont pas disponibles s’ils ne prennent pas en charge la devise ou les conditions du paiement en cours.

Il trie ces moyens de paiement par pertinence en fonction de la localisation et de la langue de votre client.

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

Vous pouvez également remplacer certains de ces comportements. Pour contrôler vous-même les moyens de paiement, consultez les pages consacrées à la personnalisation des moyens de paiement

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.

Element Payment avec différentes mises en page.

const stripe = Stripe(
'pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

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.

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

const stripe = Stripe(
'pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

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

Consultez la documentation de 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.

const stripe = Stripe(
'pk_test_oKhSR5nslBRnBZpjO6KuzZeX');

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.