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.

API compatibles

Stripe propose deux API de paiement de base compatibles avec Elements qui vous donnent la flexibilité d’accepter divers types de paiements de la part de vos clients. Vous pouvez intégrer ces API dans les interfaces de paiement précompilées de Stripe. Les API servent différents cas d’utilisation selon la façon dont vous choisissez de structurer votre flux de paiement et le degré de contrôle dont vous avez besoin. Pour la plupart des cas d’utilisation, nous vous recommandons d’utiliser Checkout Sessions.

• Utilisez l’API Checkout Sessions pour modéliser le tunnel de paiement complet de votre client, y compris les postes de son achat, les adresses de facturation et de livraison, les taux de taxe applicables ainsi que les réductions ou les bons de réduction. L’API Checkout Sessions vous permet de créer des abonnements, de calculer les taux de taxe avec Stripe Tax et d’initier des paiements à l’aide d’une intégration unique.

  Élaborer une page paiement avec l’API Checkout Session.

• Utilisez l’API API Payment Intents pour modéliser uniquement l’étape des paiements avec un contrôle plus granulaire. Contrairement à l’API Checkout Sessions, qui nécessite des informations sur les éléments de ligne, vous ne passez que le montant final que vous souhaitez débiter. Cela convient aux flux de paiement avancés où vous souhaitez calculer manuellement le montant final. Lorsque vous utilisez Payment Intents, vous devez construire des intégrations distinctes avec l’API Stripe Tax si vous souhaitez utiliser Stripe pour calculer les taxes applicables ou avec l’API Subscriptions si vous souhaitez utiliser Stripe pour créer des abonnements.

  Élaborer une intégration avancée avec l’API Payment Intents.

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.

Formulaire de paiement combinant plusieurs éléments

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, consultez la page Personnaliser les moyens de paiement. Pour ajouter des moyens de paiement intégrés en dehors de Stripe, vous pouvez utiliser des moyens de paiement personnalisés.

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.

Element Payment avec différentes mises en page.

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.

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

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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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

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.