Ajouter des moyens de paiement personnalisés

Ajoutez des moyens de paiement personnalisés au Payment Element.

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.

Pour configurer un moyen de paiement personnalisé, créez-le dans votre Dashboard Stripe et indiquez un nom d’affichage et une icône que le Payment Element affiche également. Le Dashboard Stripe permet également d’accéder à plus de 50 moyens de paiement personnalisés prédéfinis. Après avoir créé le moyen de paiement, suivez les instructions du guide ci-dessous pour configurer le Payment Element. La configuration du Payment Element nécessite un travail de configuration supplémentaire, car les transactions par moyen de paiement personnalisé sont traitées et finalisées en dehors de Stripe.

Remarque

Lors de l’intégration avec un prestataire de services de paiement tiers, vous devez respecter les exigences légales en vigueur, y compris votre accord avec votre PSP, les lois applicables, etc.

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

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

Créer votre moyen de paiement personnalisé dans le Dashboard
via le Dashboard.

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.

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

Le Payment Element de Stripe affichant un moyen de paiement personnalisé appelé PM Name.

FacultatifAffichage de contenu personnalisé intégré
Aperçu
Côté client

Affichez votre contenu dans le contexte du Payment Element à l’aide du type customPaymentMethod embedded. Vous pouvez utiliser du contenu intégré pour l’inclure entre votre logique personnalisée et l’interface utilisateur de Payment Element.

Le composant Payment Element de Stripe affichant un moyen de paiement personnalisé appelé PM Name, avec du contenu personnalisé superposé dans le conteneur de formulaires.

Pour utiliser la fonctionnalité d’intégration, ajoutez un moyen de paiement personnalisé avec type: 'embedded' et gérez votre contenu personnalisé à l’aide de ces deux rappels :

handleRender : handleRender est appelé lorsqu’un moyen de paiement est sélectionné. Il contient une référence à un node DOM conteneur dans lequel vous pouvez afficher votre contenu.
(Facultatif) handleDestroy : le hook handleDestroy est appelé lorsqu’un moyen de paiement est désélectionné et lorsque Payment Element n’est pas monté. Utilisez-le pour effectuer des nettoyages, tels que la suppression d’écouteurs d’événements ou d’un SDK personnalisé.

Conseil en matière de sécurité

Affichez uniquement du contenu de confiance dans le container fourni par handleEmbed. Afficher une balise vous ne contrôlez pas, en particulier provenant d’un utilisateur ou d’une source non fiable, peut facilement introduire une vulnérabilité de type cross-site scripting (XSS).

Des outils tels que React Portals vous permettent d’intégrer votre logique de rendu au code de votre application :

checkout.js
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';

// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

export default function App() {
  const [embedContainer, setEmbedContainer] = useState();

  const options = {
    customPaymentMethods: [
      {
        id: '{{CUSTOM_PAYMENT_METHOD_TYPE_ID}}',
        options: {
          type: 'embedded',
          subtitle: 'Embedded payment method',
          embedded: {
            handleRender: (container) => {
              setEmbedContainer(container);
            },
            handleDestroy: () => {
              setEmbedContainer(null);
            }
          }
        }
      }
    ]
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutFormWithPaymentElement />
      {embedContainer && createPortal(<EmbeddedCpmContent />, embedContainer)}
    </Elements>
  );
};

Traiter la soumission du moyen de paiement
Côté client

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.

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

FacultatifIndiquer l'ordre des moyens de paiement personnalisés
Côté client

Par défaut, le Payment Element affiche les moyens de paiement personnalisés en dernier. Pour indiquer manuellement l’ordre des moyens de paiement, définissez la propriété paymentMethodOrder dans la configuration des options lors de la création de votre instance de Payment Element.

checkout.js
const paymentElement = elements.create('payment', {
  // an array of payment method types, including custom payment method types
  paymentMethodOrder: [...]
});

Ajouter des moyens de paiement personnalisés

Ajoutez des moyens de paiement personnalisés au Payment Element.

Remarque

Avant de commencer

Créer votre moyen de paiement personnalisé dans le Dashboardvia le Dashboard.

Choisir le bon logo

Ajouter le type de moyen de paiement personnalisé à votre configuration Stripe ElementsCôté client

FacultatifAffichage de contenu personnalisé intégréAperçuCôté client