Payment Element 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 frontaux de votre application Web.

Stripe offers two core payments APIs compatible with Elements that give you the flexibility to accept various types of payments from your customers. You can integrate these APIs into Stripe’s prebuilt payment interfaces. While we recommend using Checkout Sessions for most users, the APIs serve slightly different use cases depending on how you choose to structure your checkout flow and how much control you require. You can build a checkout page with the Checkout Session API or build an advanced integration with the Payment Intents API.

• The Checkout Sessions API allows you to model your customer’s checkout flow. This includes the line items included in their purchase, billing and shipping addresses, applicable tax rates, and coupons or discounts. The Checkout Session allows you to create subscriptions, calculate tax rates with Stripe Tax, and initiate payments.
• The Payment Intents API allows you to model the payments step. Unlike the Checkout Sessions API, which requires line item details, you only pass in the final amount you want to charge. This is suitable for payment flows, such as off-session payments. If you want to use Stripe to calculate applicable taxes or create subscriptions, you must integrate with the Stripe Tax API or Subscriptions API, respectively.

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, 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 numériques 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

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 modes de paiement, par exemple en filtrant les marques de cartes que vous ne souhaitez pas prendre en charge, consultez la section Personnaliser les modes de paiement. Pour ajouter des modes de paiement intégrés en dehors de Stripe, vous pouvez utiliser les modes 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.

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.

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx');

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

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(
'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, vous pouvez afficher 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 ci-après. Reportez-vous à la documentation de chaque option pour obtenir plus d’informations.

Erreurs

Payment Element affiche automatiquement des messages d’erreur localisés côté client 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 associés à d’autres types d’erreurs, reportez-vous aux sections Codes d’erreur et Gestion des erreurs.