Ajouter des moyens de paiement personnalisés

Pour accéder à la page des moyens de paiement personnalisés, cliquez sur Paramètres > Paiements > Moyens de paiement personnalisés. Créez un nouveau moyen de paiement personnalisé et indiquez le nom d’affichage et le logo que le Payment Element doit afficher.

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.

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.

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é.

Mettez à jour la fonction handleSubmit qui est appelée lorsque les utilisateurs cliquent sur le bouton de paiement sur votre site Web afin que les transactions avec un moyen de paiement personnalisé soient traitées en dehors de Stripe.

La fonction elements.submit() récupère le type de moyen de paiement actuellement sélectionné. Si celui-ci est votre moyen de paiement personnalisé, traitez la transaction en conséquence. Par exemple, vous pouvez afficher une fenêtre modale, puis traiter le paiement sur votre propre serveur, ou rediriger votre client vers une page de paiement externe.

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
    ...
  }
}