Ajouter des moyens de paiement personnalisés

Le Payment Element de Stripe permet à vos utilisateurs de payer avec divers moyens de paiement par le biais d’une seule intégration. Utilisez des moyens de paiement personnalisés si vous avez besoin d’afficher des moyens de paiement supplémentaires qui ne sont pas traités par Stripe. Si vous utilisez des moyens de paiement personnalisés, vous pouvez éventuellement enregistrer les achats traités en dehors de Stripe sur votre compte Stripe à des fins de reporting.

To configure a custom payment method, create it in your Stripe Dashboard, and provide a display name and icon that the Payment Element also displays. The Stripe Dashboard also provides access to over 50 preset custom payment methods. After you create the payment method, follow the guide below to configure the Payment Element. Setting up the Payment Element requires some additional configuration work because custom payment method transactions process and finalize outside of Stripe.

Ce guide ajoute un moyen de paiement personnalisé à l’aide de l’exemple HTML ou JS du guide Collecter les informations de paiement avant de créer un Intent.

Avant de commencer

1. Créez un compte Stripe ou connectez-vous.
2. Suivez le guide Collecter les informations de paiement avant de créer un Intent pour réaliser une intégration des paiements.
3. Ensuite, pour chaque moyen de paiement personnalisé que vous souhaitez proposer, suivez les étapes ci-dessous.

Choisir le bon logo

• Si vous fournissez un logo avec un arrière-plan transparent, tenez compte de la couleur d’arrière-plan du Payment Element sur votre page et veillez à ce qu’il ressorte bien.
• Si vous fournissez un logo avec un arrière-plan rempli, nous ne fournirons pas de coins arrondis : vous devrez les inclure dans votre fichier.
• Choisissez une variante de logo qui peut être réduite à 16 pixels x 16 pixels. Il s’agit souvent du logo autonome d’une marque.

Après avoir créé le moyen de paiement personnalisé, le Dashboard affiche l’identifiant du moyen de paiement personnalisé (commençant par cpmt_) requis à l’étape 2.

Ajouter le type de moyen de paiement personnalisé à votre configuration Stripe Elements

Côté client

Dans votre fichier checkout.js où vous initialisez Stripe Elements, précisez les moyens de paiement personnalisés à ajouter au Payment Element. En plus de l’identifiant de l’étape 1 (qui commence par cpmt_), indiquez le options.type et éventuellement le subtitle.

checkout.js

const elements = stripe.elements({
  // ...
  customPaymentMethods: [
    {
      id: 
'{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}',
      options: {
        type: 'static',
        subtitle: 'Optional subtitle',
      }
    }
  ]
});

Lorsque le Payment Element se charge, il affiche désormais votre moyen de paiement personnalisé.

async function handleSubmit(e) {
  const { submitError, selectedPaymentMethod } = await elements.submit();

  if (selectedPaymentMethod === 
'{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}') {
    // Process CPM payment on merchant server and handle redirect
    const res = await fetch("/process-cpm-payment", { method: 'post' });
    ...
  } else {
    // Process Stripe payment methods
    ...
  }
}