Enregistrer le moyen de paiement d'un client sans effectuer de paiement

Découvrez comment enregistrer le moyen de paiement d'un client à l'aide d'un SetupIntent.

Remarques

L’API Checkout Sessions permet également d’enregistrer des modes de paiement sans effectuer de paiement. Pour en savoir plus, consultez notre guide sur l’API Checkout Sessions.

L’API Setup Intents vous permet d’enregistrer les informations de paiement d’un client sans paiement initial. Cette fonction est utile si vous souhaitez configurer des paiements dès l’inscription de vos clients afin de les débiter plus tard, lorsqu’ils sont hors ligne.

Utilisez cette intégration pour configurer des paiements récurrents ou pour créer des paiements ponctuels dont le montant doit être déterminé ultérieurement, généralement après réception du service par votre client.

Transactions avec présentation de la carte

Les transactions avec présentation de la carte, telles que la collecte des informations de carte via Stripe Terminal, utilisent un processus différent pour enregistrer le mode de paiement. Pour en savoir plus, consultez la documentation de Terminal.

Conformité

Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables. Ces exigences s’appliquent généralement si vous souhaitez enregistrer le mode de paiement de votre client pour une utilisation ultérieure, par exemple en affichant le mode de paiement au client dans le flux de paiement pour un achat futur ou en débitant le client lorsqu’il n’utilise pas activement votre site Web ou votre application. Ajoutez à votre site Web ou à votre application des conditions qui indiquent comment vous prévoyez d’enregistrer les informations du mode de paiement et autorisez les clients à s’inscrire.

Lorsque vous enregistrez un mode de paiement, vous ne pouvez l’utiliser que pour l’utilisation précise que vous avez prévue dans vos conditions. Pour débiter un mode de paiement lorsqu’un client est hors ligne et l’enregistrer comme option pour des achats futurs, assurez-vous de recueillir explicitement le consentement du client pour cette utilisation précise. Par exemple, ajoutez une case à cocher « Enregistrer mon mode de paiement pour une utilisation ultérieure » pour recueillir le consentement du client.

Pour les facturer lorsqu’ils sont hors ligne, assurez-vous que vos conditions comprennent les éléments suivants :

Que le client accepte que vous préleviez un paiement ou une série de paiements en son nom pour des transactions spécifiées.
Le calendrier et la fréquence des paiements prévus (par exemple, si les frais concernent des versements planifiés, des paiements d’abonnement ou des recharges non planifiées).
La façon dont vous déterminez le montant du paiement.
Vos conditions d’annulation, si le moyen de paiement est un service d’abonnement.

Assurez-vous de conserver une trace de l’accord écrit de votre client à ces conditions.

Remarques

Si vous devez utiliser la confirmation manuelle côté serveur ou si votre intégration nécessite de présenter les modes de paiement séparément, consultez cet autre guide.

Configurer Stripe
Côté serveur

Tout d’abord, créez un compte Stripe ou connectez-vous à votre compte.

Utilisez nos bibliothèques officielles pour accéder à l’API de Stripe depuis votre application :

Activer les moyens de paiement

Accédez aux paramètres des moyens de paiement et activez les moyens de paiement que vous souhaitez prendre en charge. Vous devez activer au moins un moyen de paiement pour créer un SetupIntent.

Par défaut, Stripe active les cartes et les autres modes de paiement courants qui peuvent vous permettre d’atteindre davantage de clients. Nous vous recommandons toutefois d’activer d’autres modes de paiement pertinents pour votre entreprise et vos clients. Consultez la page Prise en charge des modes de paiement pour en savoir plus sur la prise en charge des produits et des modes de paiement, et notre page de tarification pour prendre connaissance des frais que nous appliquons.

Créer un client
Côté serveur

Pour configurer un moyen de paiement pour les paiements futurs, vous devez l’associer à un Customer. Créez un objet Customer lorsque votre client crée un compte chez vous. Les objets Customer permettent de réutiliser des moyens de paiement et de suivre plusieurs paiements.

Créer un SetupIntent
Côté serveur

Remarques

Si vous souhaitez présenter le Payment Element sans créer d’abord de SetupIntent, consultez la section Collecter les informations de paiement avant de créer un Intent.

Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de paiements futurs. Les moyens de paiement présentés aux clients au cours du processus de paiement sont également inclus dans le SetupIntent. Vous pouvez soit laisser Stripe utiliser directement les moyens de paiement définis dans les paramètres de votre Dashboard, soit les répertorier manuellement.

À moins que votre intégration ne nécessite une option basée sur du code pour proposer des moyens de paiement, Stripe recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les moyens de paiement et d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Les moyens de paiement qui augmentent le taux de conversion et qui sont les plus adaptés à la devise et au lieu de résidence des clients sont prioritaires. Ceux de moindre priorité sont masqués dans un menu déroulant.

Certains moyens de paiement ne peuvent pas être enregistrés en vue de paiements futurs, et ne sont donc pas proposés aux clients lorsque ceux-ci configurent des paiements futurs. Pour en savoir plus sur la gestion des moyens de paiement, consultez les options d’intégration des moyens de paiement.

Vous pouvez éventuellement créer un SetupIntent dont l’option automatic_payment_methods est activée, et le SetupIntent est créé à l’aide des moyens de paiement que vous avez configurés dans le Dashboard. Dans la dernière version de l’API, la définition du paramètre automatic_payment_methods est facultative, car Stripe active sa fonctionnalité par défaut.

Vous pouvez gérer les moyens de paiement à partir du Dashboard. Stripe gère le retour des moyens de paiement admissibles en fonction de facteurs tels que le montant de la transaction, la devise et le flux de paiement.

Récupérer la clé secrète du client

L’objet SetupIntent comprend une clé secrète du client utilisée côté client pour effectuer le processus de paiement en toute sécurité. Vous pouvez utiliser différentes approches pour transmettre cette clé au côté client.

Récupérez la clé secrète du client à partir d’un point de terminaison sur votre serveur, en utilisant la fonction fetch du navigateur. Cette approche est préférable si votre côté client est une application d’une page, en particulier si celle-ci a été créée avec un cadre d’application frontal récent comme React. Créez le point de terminaison du serveur pour récupérer la clé secrète du client :

Ensuite, récupérez la clé secrète du client avec JavaScript côté client:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

Utilisation de Radar

Lors de l’enregistrement du moyen de paiement d’un client sans paiement initial, Radar n’agit pas sur le SetupIntent par défaut. Si vous souhaitez activer cette option par défaut, accédez aux paramètres de Radar et activez **Utiliser Radar sur les moyens de paiement enregistrés pour une utilisation ultérieure **.

Collecter les informations de paiement
Côté client

Vous pouvez à présent collecter les informations de paiement de votre client à l’aide du Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui facilite la collecte des informations de paiement pour de nombreux moyens de paiement.

Le composant Payment Element contient un iframe qui envoie de manière sécurisée des informations de paiement à Stripe au moyen d’une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// et non par http://. Vous pouvez tester votre intégration sans le faire, mais n’oubliez pas d’activer le protocole HTTPS lorsque vous êtes prêt(e) à accepter des paiements réels.

Configurer Stripe.js

Le Payment Element est automatiquement disponible en tant que fonctionnalité de Stripe.js. Intégrez le script Stripe.js à votre page de paiement en l’ajoutant entre les balises head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour maintenir votre conformité PCI. Vous ne devez pas inclure le script dans un lot ni en héberger de copie.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Créez une instance de Stripe avec le code JavaScript suivant sur votre page de paiement :

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

Ajouter le Payment Element à votre page de configuration des paiements

Le Payment Element doit avoir un emplacement dédié sur votre page de configuration des paiements. Créez un nœud DOM (conteneur) vide avec un ID unique dans votre formulaire de paiement :

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Une fois le chargement du formulaire précédent effectué, créez une instance du Payment Element et intégrez-la au nœud DOM du conteneur. Transmettez la clé secrète du client définie à l’étape précédente dans les options lorsque vous créez l’instance Elements :

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements using the SetupIntent's client secret
const elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Le Payment Element affiche un formulaire dynamique qui permet à votre client de choisir un moyen de paiement. Pour chaque moyen de paiement, le formulaire demande automatiquement au client de remplir toutes les informations de paiement nécessaires.

Personnaliser l’apparence

Personnalisez le Payment Element pour l’adapter à l’apparence de votre site en transmettant l’objet Appearance dans les options lors de la création du fournisseur Elements.

Demander le jeton marchand d’Apple Pay

Si vous acceptez les paiements Apple Pay, nous vous recommandons de configurer l’interface Apple Pay pour renvoyer un jeton du marchand afin d’activer les transactions effectuées par le marchand. Demander le type de jeton du marchand pertinent dans le Payment Element. L’exemple suivant montre une demande de jeton du marchand pour les paiements différés.

checkout.js
const paymentElement = elements.create('payment', {
  applePay: {
    deferredPaymentRequest: {
      paymentDescription: 'My deferred payment',
      managementURL: 'https://example.com/billing',
      deferredBilling: {
        amount: 2500,
        label: 'Deferred Fee',
        deferredPaymentDate: new Date('2024-01-05')
      },
    }
  },
  // Other options
});

Configurer une devise

Lorsque vous utilisez SetupIntents avec automatic_payment_methods, vous pouvez indiquer la devise lors de la création du Payment Element. Le composant Payment Element affiche les moyens de paiement activés qui prennent en charge la devise fournie. Pour en savoir plus, consultez la documentation relative au composant Payment Element.

Collecter les adresses

Par défaut, le Payment Element recueille uniquement les informations de facturation nécessaires. Pour collecter l’adresse de facturation complète d’un client (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison, utilisez l’Address Element.

FacultatifLien sur votre page de paiement
Côté client

FacultatifEnregistrer et récupérer les moyens de paiement des clients

Envoyer les informations de paiement à Stripe
Côté client

Utilisez stripe.confirmSetup pour effectuer la configuration à l’aide des informations collectées par le Payment Element. Fournissez une return_url à cette fonction afin que Stripe puisse rediriger l’utilisateur une fois la configuration terminée. Nous pouvons d’abord le rediriger vers un site intermédiaire, comme une page d’autorisation bancaire, avant de le rediriger vers return_url.

Si votre client enregistre ses informations de carte, nous le redirigerons immédiatement vers l’URL de retour return_url lorsque la configuration est réussie. Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte, vous pouvez définir la redirection à if_required. De cette manière, seuls les clients qui choisissent un moyen de paiement avec redirection seront redirigés.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/account/payments/setup-complete',
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Assurez-vous que le return_url correspond à une page de votre site Web qui indique l’état du SetupIntent. Stripe fournit les paramètres de requête d’URL suivants pour vérifier l’état lorsque nous redirigeons le client vers return_url. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez return_url. Ces derniers persistent tout au long du processus de redirection.

Paramètre	Description
`setup_intent`	L’identifiant unique du `SetupIntent`.
`setup_intent_client_secret`	La clé secrète du client de l’objet `SetupIntent`

Vous pouvez utiliser stripe.retrieveSetupIntent pour récupérer le SetupIntent à l’aide du paramètre de requête setup_intent_client_secret. La confirmation du SetupIntent enregistre l’ID PaymentMethod obtenu (dans result.setupIntent.payment_method) pour le Customer fourni.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('{PUBLISHABLE_KEY}');

// Retrieve the "setup_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'setup_intent_client_secret'
);

// Retrieve the SetupIntent
stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the SetupIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (setupIntent.status) {
    case 'succeeded': {
      message.innerText = 'Success! Your payment method has been saved.';
      break;
    }

    case 'processing': {
      message.innerText = "Processing payment details. We'll update you when processing is complete.";
      break;
    }

    case 'requires_payment_method': {
      message.innerText = 'Failed to process payment details. Please try another payment method.';

      // Redirect your user back to your payment page to attempt collecting
      // payment again

      break;
    }
  }
});

Avertissement

Si vous disposez d’outils qui assurent le suivi de la session navigateur du client, vous devrez peut-être ajouter le domaine stripe.com à la liste d’exclusion des sites référents. Les redirections font que certains outils créent de nouvelles sessions, ce qui empêche le suivi de la session dans son ensemble.

Débiter ultérieurement le moyen de paiement enregistré
Côté serveur

Conformité

Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables. Lorsque vous présentez au client final des modes de paiement précédemment utilisés en vue d’effectuer des achats futurs, assurez-vous de répertorier les modes de paiement pour lesquels vous avez obtenu le consentement du client afin d’enregistrer les informations du mode de paiement pour cette utilisation future spécifique. Pour différencier les modes de paiement associés aux clients qui peuvent ou non être présentés au client final en tant que mode de paiement enregistré pour des achats futurs, utilisez le paramètre allow_redisplay.

Au moment de débiter votre client hors session, utilisez l’ID des objets Customer et PaymentMethod pour créer un PaymentIntent. Pour trouver un mode de paiement à débiter, répertoriez les modes de paiement associés à votre client. Cet exemple répertorie des cartes, mais vous pouvez répertorier n’importe quel type de carte pris en charge.

Après avoir obtenu les ID de Customer et de PaymentMethod, créez un PaymentIntent indiquant le montant et la devise du paiement. Définissez quelques autres paramètres afin d’effectuer le paiement hors session :

Définissez l’attribut off_session à true pour indiquer que le client ne se trouve pas dans votre flux de paiement lors d’une tentative de paiement, et qu’il ne peut donc pas répondre à une demande d’authentification effectuée par un partenaire, comme un émetteur de cartes, une institution financière ou un autre établissement de paiement. Si un partenaire demande une authentification dans le flux de paiement, Stripe demandera une exemption en s’appuyant sur les informations utilisées par le client pendant une session précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut générer une erreur.
Définissez la valeur true à la propriété confirm du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
Définissez payment_method sur l’ID du PaymentMethod et customer sur l’ID du client.

Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402 et l’état du PaymentIntent est requires_payment_method Vous devez demander à votre client de revenir à votre application pour finaliser le paiement (par exemple, en envoyant un courriel ou une notification dans l’application).

Vérifiez le code de l’erreur créé par la bibliothèque d’API de Stripe. Si le paiement a échoué en raison d’un code de refus de paiement authentication_required, utilisez la clé secrète du client du PaymentIntent refusé avec confirmPayment pour permettre au client d’authentifier le paiement.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Remarques

L’exécution de la méthode stripe.confirmPayment peut prendre plusieurs secondes. Pendant ce temps, bloquez le renvoi de votre formulaire et affichez un indicateur d’attente. Si vous recevez une erreur, montrez-la au client, réactivez le formulaire et masquez l’indicateur d’attente. Si le client doit effectuer des actions supplémentaires pour finaliser le paiement, comme une authentification, Stripe.js le guide tout au long de ce processus.

Si le paiement a échoué pour d’autres raisons, par exemple parce que le solde est insuffisant, dirigez votre client vers une page de paiement sur laquelle il pourra saisir un nouveau moyen de paiement. Vous pouvez ensuite réutiliser l’objet PaymentIntent existant pour réessayer le paiement avec les informations du nouveau moyen de paiement.

Tester l'intégration

Utilisez les informations de paiement et la page de redirection test afin de vérifier votre intégration. Cliquez sur les onglets ci-après pour obtenir des informations sur chacun des moyens de paiement.

Moyen de paiement	Scénario	Méthode de test
Carte de crédit	La configuration de la carte aboutit et ne requiert aucune authentification.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4242 4242 4242 4242` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
Carte de crédit	La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0025 0000 3155` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
Carte de crédit	La carte exige une authentification pour la configuration initiale et pour les paiements suivants.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0027 6000 3184` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.
Carte de crédit	La carte est refusée durant la configuration.	Remplissez le formulaire de paiement par carte de crédit en saisissant le numéro de carte de crédit `4000 0000 0000 9995` ainsi qu’une date d’expiration, un CVC et un code postal de votre choix.

Tester le traitement d’un PaymentMethod enregistré de type prélèvement SEPA

La confirmation du SetupIntent du à l’aide d’iDEAL, de Bancontact ou de Sofort génère un PaymentMethod de type prélèvement SEPA. Le prélèvement SEPA est un mode de paiement à notification différée qui passe à l’état intermédiaire processing avant de passer quelques jours plus tard à l’état succeeded ou requires_payment_method.

Configurez le paramètre payment_method.billing_details.email sur l’une des valeurs suivantes afin de tester les changements d’état du PaymentIntent. Au début de l’adresse de courriel, vous pouvez inclure votre propre texte suivi d’un tiret bas. Par exemple, test_1_generatedSepaDebitIntentsFail@example.com donne lieu à un PaymentMethod de prélèvement SEPA qui échoue systématiquement en cas d’utilisation avec un PaymentIntent.

Adresse de courriel	Description
`generatedSepaDebitIntentsSucceed@example.com`	L’état du PaymentIntent passe de `processing` à `succeeded`.
`generatedSepaDebitIntentsSucceedDelayed@example.com`	L’état du PaymentIntent passe de `processing` à `succeeded` au bout d’au moins trois minutes.
`generatedSepaDebitIntentsFail@example.com`	L’état du PaymentIntent passe de `processing` à `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	L’état du PaymentIntent passe de `processing` à `requires_payment_method` au bout d’au moins trois minutes.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	L’état du PaymentIntent passe de `processing` à `succeeded`, mais un litige est créé immédiatement.

FacultatifPersonnaliser la mise en page
Côté client

FacultatifApple Pay et Google Pay
Côté client

Présenter les informations de Stripe à vos clients

Stripe recueille des informations sur les interactions des clients avec Elements pour vous fournir des services, prévenir la fraude et améliorer ses services. Cela inclut l’utilisation de témoins et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une seule session de paiement. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour permettre à Stripe d’utiliser les données de cette manière. Pour en savoir plus, rendez-vous sur notre centre de confidentialité.

Enregistrer le moyen de paiement d'un client sans effectuer de paiement

Découvrez comment enregistrer le moyen de paiement d'un client à l'aide d'un SetupIntent.

Remarques

Transactions avec présentation de la carte

Conformité

Remarques

Configurer StripeCôté serveur

Activer les moyens de paiement

Créer un clientCôté serveur

Créer un SetupIntentCôté serveur

Remarques

Récupérer la clé secrète du client

Utilisation de Radar

Collecter les informations de paiementCôté client

Configurer Stripe.js

Ajouter le Payment Element à votre page de configuration des paiements

Personnaliser l’apparence

Demander le jeton marchand d’Apple Pay

Configurer une devise

Collecter les adresses

FacultatifLien sur votre page de paiementCôté client

FacultatifEnregistrer et récupérer les moyens de paiement des clients

Envoyer les informations de paiement à StripeCôté client

Avertissement

Débiter ultérieurement le moyen de paiement enregistréCôté serveur

Conformité

Remarques

Tester l'intégration

Tester le traitement d’un PaymentMethod enregistré de type prélèvement SEPA

FacultatifPersonnaliser la mise en pageCôté client

FacultatifApple Pay et Google PayCôté client

Présenter les informations de Stripe à vos clients

Voir aussi

Configurer Stripe
Côté serveur

Créer un client
Côté serveur

Créer un SetupIntent
Côté serveur

Collecter les informations de paiement
Côté client

FacultatifLien sur votre page de paiement
Côté client

Envoyer les informations de paiement à Stripe
Côté client

Débiter ultérieurement le moyen de paiement enregistré
Côté serveur

FacultatifPersonnaliser la mise en page
Côté client

FacultatifApple Pay et Google Pay
Côté client