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

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

Remarques

L’API Checkout Sessions prend également en charge l’enregistrement des modes 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’usage :

Débiter un client pour une commande en ligne et enregistrer les informations pour des achats ultérieurs.
Entreprendre le premier paiement d’une série de paiements récurrents.
Débiter un acompte et enregistrer 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 mode de paiement. Pour en savoir plus, consultez la documentation de Terminal.

Conformité

Vous êtes responsable de votre conformité à toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client. Ces exigences s’appliquent généralement si vous souhaitez enregistrer le moyen de paiement de votre client pour une utilisation future, comme en affichant le moyen de paiement d’un client dans le flux de paiement pour un achat futur ou en le facturant lorsqu’il n’utilise pas activement votre site Web ou votre application. Ajoutez des conditions à votre site Web ou à votre application qui indiquent comment vous prévoyez enregistrer les informations du moyen de paiement et permettez aux clients de donner leur consentement.

Lorsque vous enregistrez un moyen de paiement, vous ne pouvez l’utiliser que pour l’usage précis que vous avez prévu dans vos conditions. Pour facturer un moyen 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 cet usage précis. Par exemple, ajoutez une case à cocher indiquant « Enregistrer mon moyen 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.

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 à partir de votre application :

Créer un client
Côté serveur

Pour configurer une carte 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 réussit, l’objet Customer est renvoyé. Vous pouvez consulter l’objet 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 dans la page Clients du Dashboard.

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

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 paiement
Côté serveur

Remarques

Si vous souhaitez présenter le Payment Element avant de créer un 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 de modes de paiement pour afficher les modes de paiement que vous avez activés. Pour voir comment vos moyens de paiement s’affichent pour les clients, saisissez un identifiant de transaction ou définissez un montant et une devise de commande dans le Dashboard. Pour remplacer les modes de paiement, répertoriez manuellement ceux que vous souhaitez activer à l’aide de l’attribut payment_method_types.

Remarques

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

Collecter les informations de paiement
Côté client

Collectez les informations de paiement du client à l’aide du Payment Element. Le Payment Element est un composant d’interface utilisateur préconfiguré qui simplifie la collecte des informations de paiement pour divers modes de paiement.

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

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

Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https:// plutôt que par http://. Vous pouvez tester votre intégration sans utiliser le protocole HTTPS, mais n’oubliez pas de l’activer lorsque vous serez prêt(e) à accepter des paiements réels.

Configurer Stripe.js

Le composant 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 paiement

Le Payment Element doit avoir un emplacement dédié dans votre page de paiement. Créez un nœud DOM (conteneurs) 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 formulaire précédent chargé, créez une instance du Payment Element et intégrez-la au nœud DOM du conteneur. Transmettez la clé secrète du client de l’étape précédente dans les options lorsque vous créez l’instance Elements :

Manipulez la clé secrète du client avec prudence, car elle peut finaliser le paiement. Ne l’enregistrez pas, ne l’intégrez pas dans des URL et ne l’exposez à 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 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.

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.

Demander le jeton marchand d’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 jeton marchand afin d’activer les transactions effectuées par le marchand. Demander le type de jeton marchand approprié dans le composant Payment Element.

FacultatifLien sur votre page de paiement
Côté client

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

FacultatifCollecter les informations relatives à 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 finaliser le paiement à l’aide des informations du Payment Element. Ajoutez une return_url à cette fonction pour indiquer où Stripe doit rediriger l’utilisateur une fois le paiement effectué. Votre utilisateur peut être d’abord redirigé vers un site intermédiaire, comme une page d’autorisation bancaire, avant d’être redirigé vers la page return_url. Une fois que le paiement par carte a fonctionné, le client est immédiatement redirigé vers la page return_url.

Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte après la finalisation, vous pourrez définir la redirection à if_required. De cette manière, seuls les clients qui choisissent un mode 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`.
  }
});

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.

À l’issue du paiement, la carte sera enregistrée dans l’objet Customer. Le champ customer du PaymentMethod indique cette information. À ce stade, associez l’ID de l’objet Customer à votre propre représentation interne d’un client, si vous en avez une. Vous pouvez désormais utiliser l’objet PaymentMethod enregistré pour encaisser les nouveaux paiements de votre client sans lui demander à nouveau 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`.

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.

Utilisez l’un des paramètres de requête pour récupérer le PaymentIntent. Consultez l’état du PaymentIntent pour déterminer ce qui doit être présenté à vos clients. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez l’objet 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 le moyen de paiement enregistré ultérieurement
Côté serveur

Alerte

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

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.

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 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 PaymentIntent

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.

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

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

Remarques

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

Remarques

Créer la session Checkout

Remarques

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 le jeton marchand d’Apple Pay

FacultatifLien sur votre page de paiement
Côté client

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

FacultatifCollecter les informations relatives à 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

Remarques

Avertissement

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

Alerte

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 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 mode de paiement du client lorsque vous confirmez un PaymentIntent ou une session Checkout.

Remarques

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

Remarques

Créer la session Checkout

Remarques

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 le jeton marchand d’Apple Pay

FacultatifLien sur votre page de paiementCôté client

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

FacultatifCollecter les informations relatives à 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

Remarques

Avertissement

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

Alerte

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

FacultatifLien sur votre page de paiement
Côté client

FacultatifCollecter les informations relatives à 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 le moyen de paiement enregistré ultérieurement
Côté serveur

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

FacultatifApple Pay et Google Pay
Côté client