Paiements pour les clients existants

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

Les sessions Checkout permettent à vos clients de saisir leurs données de paiement. S’il s’agit d’un client existant, vous pouvez configurer la session Checkout de manière à ce que les informations du client soient préremplies avec l’une de ses cartes bancaires enregistrées.

Créer une session Checkout
Côté serveur

Checkout 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 Payment Intents et les Subscriptions, sont associés à cet objet Customer.

Sur votre serveur, créez une session Checkout et définissez le paramètre ui_mode sur embedded.

Pour rediriger vos clients vers une page personnalisée hébergée sur votre site Web, spécifiez l’URL de cette page dans le paramètre return_url. Incluez la variable de modèle {CHECKOUT_SESSION_ID} dans l’URL pour récupérer l’état de la session sur la page de retour. Checkout remplace automatiquement la variable par l’ID de session Checkout avant la redirection.

En savoir plus sur la configuration de la page de retour et d’autres options pour personnaliser le comportement de redirection.

Après avoir créé la session Checkout, utilisez la client_secret renvoyée dans la réponse pour monter Checkout.

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

Monter Checkout
Côté client

Checkout est disponible dans Stripe.js. Intégrez le script Stripe.js à votre page en l’ajoutant à l’en-tête de votre fichier HTML. Ensuite, créez un nœud DOM vide (conteneur) à utiliser pour le montage.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Initialisez Stripe.js avec votre clé API publique.

Créez une fonction fetchClientSecret asynchrone qui demande à votre serveur de créer la session Checkout et de récupérer la clé secrète du client. Transmettez cette fonction dans la propriété options lorsque vous créez l’instance Checkout :

index.js
// Initialize Stripe.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout s’affiche dans un iframe qui envoie de manière sécurisée les informations de paiement à Stripe via une connexion HTTPS.

Erreur fréquente

Évitez de placer Checkout dans un autre iframe, car certains moyens de paiement nécessitent une redirection vers une autre page pour la confirmation du paiement.

Personnaliser l’apparence

Personnalisez Checkout pour qu’il corresponde au design de votre site en définissant la couleur d’arrière-plan, la couleur des boutons, le rayon de la bordure et les polices dans les paramètres de marque de votre compte.

Par défaut, Checkout s’affiche sans espacement externe ni marge. Nous vous recommandons d’utiliser un élément de conteneur tel qu’un espace div pour appliquer la marge souhaitée (par exemple, 16 px sur tous les côtés).

Préremplir les champs sur la page de paiement

Si toutes les conditions suivantes sont remplies, Checkout remplit automatiquement les champs adresse e-mail, nom, carte et adresse de facturation sur la page de paiement à l’aide des informations de la carte enregistrée du client :

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 possède plusieurs cartes enregistrées, Checkout remplit automatiquement les informations de la carte correspondant à l’ordre de priorité suivant :

En mode payment, Stripe remplit automatiquement les champs à l’aide de la dernière carte enregistrée du client.
En mode subscription, Stripe préremplit le moyen de paiement par défaut du client s’il s’agit d’une carte. Dans le cas contraire, Stripe remplit automatiquement la dernière carte enregistrée.

Lorsque Checkout collecte une adresse de livraison, les champs de l’adresse de livraison sont préremplis si la shipping.address du client correspond aux pays pris en charge de la session Checkout.

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

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.