Enregistrer le moyen de paiement d'un client lors d'un paiement

Découvrez comment enregistrer le moyen de paiement du client lorsque vous confirmez un PaymentIntent ou une session Checkout.

Remarque

L’API Checkout Sessions prend également en charge l’enregistrement des moyens de paiement lorsque les clients l’utilisent pour un paiement. Pour en savoir plus, consultez notre guide sur l’API Checkout Sessions.

Utilisez l’API Payment Intents pour enregistrer des informations de paiement à partir d’un achat. Il existe plusieurs cas d’utilisation :

Débiter un client pour une commande en ligne et sauvegarder les détails pour des achats ultérieurs.
Initier le premier paiement d’une série de paiements récurrents.
Débiter un acompte et sauvegarder les détails pour facturer plus tard le montant total.

Transactions avec présentation de la carte

Les transactions avec présentation de la carte, telles que les paiements via Stripe Terminal, utilisent un processus différent pour enregistrer le moyen 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 l’ensemble des lois, réglementations et règles du réseau en vigueur. Ces exigences s’appliquent généralement si vous souhaitez enregistrer le moyen de paiement de votre client pour une utilisation ultérieure, par exemple en affichant le moyen de paiement dans le tunnel de paiement pour un achat futur ou en débitant ce moyen de paiement lorsque le client n’utilise pas activement votre site Web ou votre application. Ajoutez à votre site Web ou à votre application des conditions indiquant comment vous prévoyez d’enregistrer les informations de paiement et qui permettent à vos clients de choisir cette option.

Lorsque vous enregistrez un moyen de paiement, vous ne pouvez l’utiliser que pour l’utilisation spécifique figurant dans vos conditions. Pour débiter un moyen de paiement lorsque le client n’est pas en ligne et l’enregistrer en tant qu’option pour les futurs achats, assurez-vous de recueillir explicitement le consentement du client pour cette utilisation spécifique. Par exemple, affichez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure » afin de recueillir le consentement de votre client.

Pour facturer vos clients lorsqu’ils ne sont pas en ligne, incluez les éléments suivants dans vos conditions :

Le consentement du client vous autorisant à déclencher un paiement ou une série de paiements en son nom pour les transactions spécifiées
Le calendrier et la fréquence prévus des paiements (par exemple, si les paiements concernent des versements échelonnés, des paiements d’abonnement ou des recharges non programmées).
La façon dont vous déterminez le montant du paiement.
Votre politique d’annulation, si le moyen de paiement est utilisé dans le cadre d’un abonnement

Veillez à conserver une trace écrite de l’acceptation de ces conditions par votre client.

Configurer Stripe
Côté serveur

Tout d’abord, inscrivez-vous pour créer un Compte Stripe.

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

Créer un client
Côté serveur

Pour configurer une carte bancaire en vue de paiements futurs, vous devez l’associer à un client. Lorsque votre client ouvre un compte chez vous, créez un objet Customer, qui permet de réutiliser des moyens de paiement et d’assurer le suivi de plusieurs paiements.

Lorsque la création aboutit, l’objet Customer est renvoyé. Vous pouvez l’examiner pour identifier l’id du client et stocker cette valeur dans votre base de données pour la récupérer ultérieurement.

Vous pouvez trouver ces clients sur la page Clients du Dashboard.

Activer les moyens de paiement

Affichez vos 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 PaymentIntent.

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

Créer un paiement
Côté serveur

Remarque

Si vous souhaitez afficher le Payment Element sans créer au préalable de PaymentIntent, consultez la page Collecter les informations de paiement avant de créer un Intent.

L’objet Checkout Session représente votre intention d’encaisser le paiement d’un client et suit les tentatives de débit et changements d’état tout au long du processus de paiement.

Créer la session Checkout

Créez une session Checkout sur votre serveur. Stripe utilise vos paramètres des moyens de paiement pour afficher les moyens de paiement que vous avez activés. Pour visualiser l’affichage des moyens de paiement pour les clients, saisissez un ID de transaction ou définissez le montant et la devise d’une commande dans le Dashboard. Pour ignorer les moyens de paiement, répertoriez manuellement ceux que vous souhaitez activer à l’aide de l’attribut payment_method_types.

Remarque

Décidez toujours du montant à débiter côté serveur, un environnement sécurisé, plutôt que côté client. Cela permet d’éviter que des clients malintentionnés puissent fixer leurs propres tarifs.

Collecter les informations de paiement
Côté client

Collectez les informations de paiement du client avec le Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations pour de nombreux moyens de paiement.

Le Payment Element contient un iframe qui envoie les informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Évitez de placer le Payment Element dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Si vous choisissez d’utiliser un iframe et que vous souhaitez accepter Apple Pay ou Google Pay, l’attribut allow de l’iframe doit être égal à "payment *".

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 utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous souhaitez commencer à accepter des paiements réels.

Configurer Stripe.js

Le composant Element Payment 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 une offre groupée 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 paiement

Le composant Element Payment doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneur) vide doté d’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>

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

Utilisez la clé secrète du client avec prudence, car elle peut servir à finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne la dévoilez à personne d’autre que votre client.

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

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
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 composant 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 renseigner toutes les informations de paiement nécessaires.

Personnaliser l’apparence

Personnalisez le Payment Element pour qu’il corresponde à l’apparence de votre site en ajoutant l’objet Appearance dans options lors de la création du fournisseur Elements.

Collecter les adresses

Par défaut, le composant Payment Element ne collecte que les informations nécessaires relatives à l’adresse de facturation. Si vous souhaitez obtenir l’adresse de facturation (par exemple, pour calculer la taxe sur les biens et services numériques) ou l’adresse de livraison complètes d’un client, utilisez le composant Address Element.

Demander un token de marchand Apple Pay

Si vous avez configuré votre intégration afin d’accepter les paiements Apple Pay, nous vous recommandons de configurer l’interface Apple Pay de manière à renvoyer un token de marchand pour activer les transactions initiées par les marchands. Demandez le type de token de marchand approprié dans le Payment Element.

FacultatifLink dans votre page de paiement
Côté client

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

FacultatifRecueillir l'adresse
Côté client

FacultatifPersonnaliser la mise en page
Côté client

FacultatifPersonnaliser l'apparence
Côté client

FacultatifRécupérer des mises à jour à partir du serveur
Côté client

Envoyer le paiement à Stripe
Côté client

Utilisez stripe.confirmPayment pour effectuer le paiement à l’aide des informations du composant Payment Element. Ajoutez un paramètre return_url à cette fonction pour indiquer la page vers laquelle Stripe doit rediriger l’utilisateur à l’issue du paiement. Votre utilisateur peut être redirigé en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page spécifiée par le paramètre return_url. L’utilisateur sera immédiatement redirigé vers la page return_url après un paiement réussi par carte.

Si vous ne souhaitez pas effectuer de redirection à la fin des paiements par carte, vous pouvez assigner au paramètre redirect la valeur 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.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    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`.
  }
});

Remarque

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 mener à bien le paiement, comme une authentification, Stripe.js le guide tout au long de ce processus.

Si le paiement aboutit, la carte est enregistrée pour l’objet Customer. Le champ customer du PaymentMethod indique alors cette information. À ce stade, associez l’ID de l’objet Customer à votre représentation interne du client, le cas échéant. Vous pouvez désormais utiliser l’objet PaymentMethod sauvegardé pour encaisser les nouveaux paiements de votre client sans avoir à lui redemander ses informations de paiement.

Veillez à ce que le paramètre return_url corresponde à une page de votre site web qui indique l’état du paiement. Lorsque Stripe redirige le client vers la page return_url, nous fournissons les paramètres de requête d’URL suivants :

Paramètre	Description
`payment_intent`	L’identifiant unique du `PaymentIntent`.
`payment_intent_client_secret`	La clé secrète du client de l’objet `PaymentIntent`.

Mise en garde

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.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’état du PaymentIntent pour déterminer les informations à présenter à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous ajoutez l’URL return_url ; ils seront conservés tout au long du processus de redirection.

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

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

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `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 (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

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

Avertissement

Les moyens de paiement bancontact, ideal et sofort sont considérés comme des moyens de paiement ponctuels par défaut. Lorsque vous les configurez pour une utilisation future, ils génèrent le type de moyen de paiement réutilisable sepa_debit. Vous devez donc utiliser la requête sepa_debit pour retrouver les moyens de paiement enregistrés.

Conformité

Lorsque vous enregistrez les informations de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles du réseau en vigueur. Lorsque vous présentez au client final des moyens de paiement précédemment utilisés en vue d’effectuer ses prochains achats, assurez-vous de lister les moyens de paiement pour lesquels vous avez obtenu le consentement du client à l’enregistrement des informations de paiement aux fins des futurs achats. Le paramètre allow_redisplay vous permet de différencier les moyens de paiement associés au client qui peuvent ou non être présentés pour les achats futurs.

Au moment de débiter votre client hors session, utilisez l’ID des objets Customer et PaymentMethod afin de créer un PaymentIntent. Pour trouver un moyen de paiement à débiter, répertoriez les moyens de paiement associés à votre client. Cet exemple liste des cartes, mais vous pouvez répertorier n’importe quel type de moyen de paiement 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 sur true pour indiquer que le client ne se trouve pas dans votre tunnel 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 banque ou un autre établissement de paiement. Si un partenaire demande une authentification dans le tunnel de paiement, Stripe demande une exemption en s’appuyant sur les informations utilisée par le client pendant une session précédente. Si les conditions d’exemption ne sont pas remplies, le PaymentIntent peut renvoyer une erreur.
Définissez la propriété confirm du PaymentIntent sur la valeur true, ce qui aura pour effet de générer immédiatement une confirmation lors de la création du PaymentIntent.
Renseignez l’ID du PaymentMethod dans payment_method et l’ID du client dans customer.

FacultatifEnregistrer les informations de paiement pour une utilisation ultérieure
Côté serveur

Tester l'intégration

Utilisez les informations de paiement et la page de redirection test pour 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 bancaire	La configuration de la carte aboutit et ne requiert aucune authentification.	Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4242 4242 4242 4242` ainsi que la date d’expiration, le CVC et le code postal de votre choix.
Carte bancaire	La carte exige une authentification pour la configuration initiale, mais la transaction aboutit pour les paiements suivants.	Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0025 0000 3155` ainsi que la date d’expiration, le CVC et le code postal de votre choix.
Carte bancaire	La carte exige une authentification pour la configuration initiale et pour les paiements suivants.	Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro de carte `4000 0027 6000 3184` ainsi que la date d’expiration, le CVC et le code postal de votre choix.
Carte bancaire	La carte est refusée durant la configuration.	Remplissez le formulaire de paiement par carte bancaire en saisissant le numéro `4000 0000 0000 9995` ainsi que la date d’expiration, le CVC et le code postal de votre choix.

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

La confirmation du PaymentIntent à l’aide d’iDEAL, de Bancontact ou de Sofort génère un PaymentMethod de type prélèvement automatique SEPA. Le prélèvement automatique SEPA est un moyen de paiement à notification différée qui passe à l’état intermédiaire processing avant de basculer 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 e-mail, 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 automatique SEPA qui échoue systématiquement en cas d’utilisation avec un PaymentIntent.

Adresse e-mail	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.

Enregistrer le moyen de paiement d'un client lors d'un paiement

Découvrez comment enregistrer le moyen de paiement du client lorsque vous confirmez un PaymentIntent ou une session Checkout.

Remarque

Transactions avec présentation de la carte

Conformité

Configurer Stripe
Côté serveur

Créer un client
Côté serveur

Activer les moyens de paiement

Créer un paiement
Côté serveur

Remarque

Créer la session Checkout

Remarque

Collecter les informations de paiement
Côté client

Configurer Stripe.js

Ajouter le Payment Element à votre page de paiement

Personnaliser l’apparence

Collecter les adresses

Demander un token de marchand Apple Pay

FacultatifLink dans votre page de paiement
Côté client

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

FacultatifRecueillir l'adresse
Côté client

FacultatifPersonnaliser la mise en page
Côté client

FacultatifPersonnaliser l'apparence
Côté client

FacultatifRécupérer des mises à jour à partir du serveur
Côté client

Envoyer le paiement à Stripe
Côté client

Remarque

Mise en garde

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

Avertissement

Conformité

FacultatifEnregistrer les informations de paiement pour une utilisation ultérieure
Côté serveur

Tester l'intégration

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

FacultatifApple Pay et Google Pay
Côté client

Voir aussi

Enregistrer le moyen de paiement d'un client lors d'un paiement

Découvrez comment enregistrer le moyen de paiement du client lorsque vous confirmez un PaymentIntent ou une session Checkout.

Remarque

Transactions avec présentation de la carte

Conformité

Configurer StripeCôté serveur

Créer un clientCôté serveur

Activer les moyens de paiement

Créer un paiementCôté serveur

Remarque

Créer la session Checkout

Remarque

Collecter les informations de paiementCôté client

Configurer Stripe.js

Ajouter le Payment Element à votre page de paiement

Personnaliser l’apparence

Collecter les adresses

Demander un token de marchand Apple Pay

FacultatifLink dans votre page de paiementCôté client

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

FacultatifRecueillir l'adresseCôté client

FacultatifPersonnaliser la mise en pageCôté client

FacultatifPersonnaliser l'apparenceCôté client

FacultatifRécupérer des mises à jour à partir du serveurCôté client

Envoyer le paiement à StripeCôté client

Remarque

Mise en garde

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

Avertissement

Conformité

FacultatifEnregistrer les informations de paiement pour une utilisation ultérieureCôté serveur

Tester l'intégration

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

FacultatifApple Pay et Google PayCôté client

Voir aussi

Configurer Stripe
Côté serveur

Créer un client
Côté serveur

Créer un paiement
Côté serveur

Collecter les informations de paiement
Côté client

FacultatifLink dans votre page de paiement
Côté client

FacultatifRecueillir l'adresse
Côté client

FacultatifPersonnaliser la mise en page
Côté client

FacultatifPersonnaliser l'apparence
Côté client

FacultatifRécupérer des mises à jour à partir du serveur
Côté client

Envoyer le paiement à Stripe
Côté client

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

FacultatifEnregistrer les informations de paiement pour une utilisation ultérieure
Côté serveur

FacultatifApple Pay et Google Pay
Côté client