Paiements pour les clients existants

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

Le composant Payment Element permet à vos clients de saisir leurs informations de paiement. S’il s’agit d’un client existant, vous pouvez configurer une session Checkout dans le Payment Element pour afficher les moyens de paiement existants du client.

Payment Element avec une carte bancaire enregistrée

Le composant Payment Element peut uniquement afficher les types de moyens de paiement enregistrés suivants :

card
us_bank_account
link
sepa_debit
ideal
sofort
bancontact

Créer un PaymentIntent et une CustomerSession
Côté serveur

Créez un PaymentIntent et une CustomerSession. Veillez à transmettre l’ID existant du client et à activer la fonctionnalité payment_method_redisplay.

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

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/v3/"></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">
    <!-- 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>

Récupérez les deux clients_secret de l’étape précédente pour initialiser l’Element. Ensuite, créez et montez le Payment Element.

checkout.js
// Fetch the two `client_secret`
const response = await fetch('/create-intent-and-customer-session', { method: "POST" });
const { client_secret, customer_session_client_secret } = await response.json();

// Initialize Elements
const elements = stripe.elements({
  clientSecret: client_secret,
  customerSessionClientSecret: customer_session_client_secret,
});

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

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`.
  }
});

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;
  }
});

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

Stripe envoie un événement payment_intent.succeeded à l’issue du paiement. Utilisez l’outil de webhook du Dashboard ou suivez le guide consacré aux webhooks pour recevoir ces événements et exécuter des actions, comme envoyer une confirmation de commande par e-mail à votre client, enregistrer la vente dans une base de données ou lancer un flux de livraison.

Plutôt que d’attendre un rappel de votre client, écoutez ces événements. Côté client, il arrive en effet que l’utilisateur ferme la fenêtre de son navigateur ou quitte l’application avant l’exécution du rappel. Certains clients malintentionnés peuvent d’autre part tenter de manipuler la réponse. 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 et même intégration.

En plus de l’événement payment_intent.succeeded, nous vous recommandons de gérer ces autres événements lorsque vous encaissez des paiements à l’aide de l’Element Payment :

Événement	Description	Action
payment_intent.succeeded	Envoyé lorsqu’un client effectue un paiement avec succès.	Envoyez au client une confirmation de commande et traitez sa commande.
payment_intent.processing	Envoyé lorsqu’un client initie un paiement, mais qu’il ne l’a pas encore finalisé. Dans la plupart des cas, cet événement est envoyé lorsque le client initie un prélèvement bancaire. Il est suivi par un événement `payment_intent.succeeded` ou `payment_intent.payment_failed`.	Envoyez au client une confirmation de commande qui indique que son paiement est en attente. Pour des marchandises dématérialisées, vous pourrez traiter la commande sans attendre que le paiement soit effectué.
payment_intent.payment_failed	Envoyé lorsqu’un client effectue une tentative de paiement qui se solde par un échec.	Si un paiement passe de l’état `processing` à `payment_failed`, proposez au client de retenter le paiement.

Paiements pour les clients existants

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

Créer un PaymentIntent et une CustomerSessionCôté serveur

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

Afficher le Payment ElementCôté client