Paiements pour les clients existants

Découvrez comment débiter un moyen de paiement existant pendant une session.

Une session Checkout permet à vos clients de saisir leurs informations de paiement. S’il s’agit d’un client existant, vous pouvez configurer la session pour que ses informations soient préremplies avec l’une de ses cartes bancaires enregistrées. La session Checkout affiche jusqu’à 50 cartes bancaires enregistrées avec lesquelles un client peut choisir de payer.

Payment Element avec une carte bancaire enregistrée

Créer une session Checkout
Côté client
Côté serveur

Payment Sessions prend en charge la réutilisation d’objets Customer existants avec le paramètre Customer. Lors de la réutilisation de clients existants, tous les objets créés par Checkout, tels que les PaymentIntents et les Subscriptions, sont associés à cet objet Customer.

FacultatifAfficher les moyens de paiement enregistrés supplémentaires
Côté serveur

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 offrez à un client la possibilité d’utiliser d’anciens moyens de paiement en vue d’achats futurs, assurez-vous d’avoir obtenu le consentement de vos clients à l’enregistrement des informations de paiement aux fins d’un futur achat.

Par défaut, nous affichons uniquement les moyens de paiement configurés pour permettre toujours le réaffichage.

Vous ne pouvez pas réutiliser Apple Pay et Google Pay au cours d’une même session de paiement. Par conséquent, ces moyens de paiement n’apparaissent pas dans la liste des options enregistrées. Vous devez afficher l’interface utilisateur de Google Pay et d’Apple Pay, ainsi que le bouton de demande de paiement, chaque fois que la session de paiement est active.

Vous pouvez afficher d’autres moyens de paiement précédemment enregistrés en incluant d’autres valeurs de réaffichage dans la session de paiement ou en mettant à jour le paramètre allow_redisplay d’un moyen de paiement sur toujours.

Utilisez le paramètre allow_redisplay_filters pour spécifier les moyens de paiement enregistrés à afficher dans Checkout. Vous pouvez définir n’importe laquelle des valeurs valides : limited, unspecified et always.

Si vous spécifiez le filtrage de réaffichage dans votre session Checkout, il remplace le comportement par défaut. Vous devez donc inclure la valeur always pour voir les moyens de paiement enregistrés.

Mettez à jour le moyen de paiement pour définir la valeur allow_redisplay des moyens de paiement individuels.
Command Line
Sélectionner une langue
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}} \ -u "sk_test_BQokikJOvBiI2HlWgH4olfQ2 :" \ -d allow_redisplay=always

Afficher le Payment Element
Côté client

Configurer Stripe.js

Incluez le script Stripe .js sur votre page de paiement en l’ajoutant dans le champ head de votre fichier HTML. Chargez toujours Stripe.js directement à partir de js.stripe.com pour rester en conformité avec la norme PCI. N’incluez pas le script dans un lot et n’en hébergez pas de copie vous-même.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/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 l’Element Payment à 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">
    <!-- Checkout will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Récupérez la session de paiement client_secret de l’étape précédente pour initialiser l’objet Checkout. Ensuite, créez et montez l’élément de paiement.

checkout.js
const promise = fetch("/create-checkout-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
  })
    .then((r) => r.json())
    .then((r) => r.clientSecret);

// Initialize Checkout
const checkout = stripe.initCheckout({
  clientSecret: promise,
});

// Create and mount the Payment Element
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Préremplir les champs sur la page de paiement

Si toutes les conditions suivantes sont remplies, l’objet Session contient les informations d’utilisation e-mail, nom, carte bancaire, et adresse de facturation de la carte enregistrée du client pour que vous puissiez les afficher sur votre page de paiement, et le composant Element de paiement pour afficher la carte enregistrée :

Checkout est en mode payment ou subscription. Le mode setup ne prend pas en charge le remplissage automatique des champs.
Le client dispose d’une carte enregistrée. Checkout prend uniquement en charge le préremplissage des moyens de paiement par carte.
La carte enregistrée a allow_redisplay défini sur always ou vous avez ajusté le paramètre d’affichage par défaut.
Le moyen de paiement comprend l’attribut billing_details requis par la valeur billing_address_collection de la session Checkout :
- auto requiert des valeurs pour email, name et address[country]. Les adresses de facturation aux États-Unis, au Canada et au Royaume-Uni nécessitent également l’attribut address[postal_code].
- required requiert des valeurs pour email, name et tous les champs address.

Si votre client a enregistré plusieurs cartes, l’élément de paiement affiche la carte enregistrée qui correspond à l’ordre de priorité suivant :

En mode paiement, Stripe remplit les champs en utilisant la dernière carte bancaire enregistrée du client.
En mode abonnement, Stripe pré-remplit le moyen de paiement par défaut du client si c’est une carte bancaire. Dans le cas contraire, Stripe pré-remplit la dernière carte bancaire enregistrée.

Lors de la collecte d’une adresse de livraison, l’objet de session contient les champs de l’adresse de livraison si l’adresse.de.livraison du client correspond aux pays pris en charge de la session de paiement.

Pour permettre à vos clients de supprimer les cartes bancaires enregistrées pendant une session Checkout, définissez save_payment_method_options[payment_method_remove] sur activé.

Expiration du préremplissage

Le moyen de paiement prérempli s’affiche pendant 30 minutes après la création de la session Checkout. Après son expiration, le chargement de la même session Checkout ne préremplit plus le moyen de paiement pour des raisons de sécurité.

Envoyer le paiement à Stripe
Côté client

Rendre un bouton Pay qui appelle l’instance confirmer à partir de l’instance paiement pour soumettre le paiement.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Gérer les événements post-paiement
Côté serveur

Stripe envoie un événement checkout.session.completed lorsqu’un client effectue un paiement par session Checkout. Utilisez l’outil de webhook Dashboard ou suivez le guide consacré aux webhooks pour recevoir et gérer ces événements. Ceux-ci peuvent vous conduire à :

Envoyez un e-mail de confirmation de commande à votre client.
Enregistrez la vente dans une base de données.
Démarrez un flux de travail d’expédition.

Écoutez ces événements plutôt que d’attendre que votre client soit redirigé vers votre site Web. Le déclenchement du traitement uniquement à partir de votre page de renvoi Checkout n’est pas fiable. En configurant votre intégration de manière à ce qu’elle écoute les événements asynchrones, vous pourrez accepter plusieurs types de moyens de paiement avec une seule intégration.

Pour en savoir plus, consultez notre guide de traitement des commandes avec Checkout.

Gérez les événements suivants lors de la collecte de paiements avec Checkout :

Événement	Description	Action
checkout.session.completed	Envoyé lorsqu’un client termine une session Checkout.	Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_succeeded	Envoyé lorsqu’un paiement effectué avec un moyen de paiement différé (par exemple, un prélèvement automatique ACH) aboutit.	Envoyez au client une confirmation de commande et traitez sa commande.
checkout.session.async_payment_failed	Envoyé lorsqu’un paiement effectué avec un moyen de paiement différé (par exemple, un prélèvement automatique ACH) échoue.	Informez le client de l’échec et redirigez-le vers la session pour tenter à nouveau de payer.