Configurer des paiements futurs
L’API Setup Intents vous permet d’enregistrer les données de paiement d’un client sans paiement initial. Cette fonction est utile si vous souhaitez configurer des paiements dès l’inscription de vos clients afin de les débiter plus tard, lorsqu’ils sont hors ligne.
Utilisez cette intégration pour configurer des paiements récurrents ou pour créer des paiements ponctuels dont le montant doit être déterminé ultérieurement, généralement après réception du service par votre client.
Conformité
You’re responsible for your compliance with all applicable laws, regulations, and network rules when saving a customer’s payment details. These requirements generally apply if you want to save your customer’s payment method for future use, such as displaying a customer’s payment method to them in the checkout flow for a future purchase or charging them when they’re not actively using your website or app. Add terms to your website or app that state how you plan to save payment method details and allow customers to opt in.
When you save a payment method, you can only use it for the specific usage you have included in your terms. To charge a payment method when a customer is offline and save it as an option for future purchases, make sure that you explicitly collect consent from the customer for this specific use. For example, include a “Save my payment method for future use” checkbox to collect consent.
To charge them when they’re offline, make sure your terms include the following:
- 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.
Note
Si vous devez utiliser la confirmation manuelle côté serveur ou si votre intégration nécessite de présenter les moyens de paiement séparément, consultez cet autre guide.
Configurer StripeCôté serveur
Tout d’abord, créez un compte Stripe ou connectez-vous.
Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis votre application :
Activez 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 SetupIntent.
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 des options d’intégration des moyens de paiement pour découvrir les produits et moyens de paiement pris en charge, et la page des tarifs pour prendre connaissance des frais que nous appliquons.
Créer un objet CustomerCôté serveur
Pour configurer un moyen de paiement en vue de paiements ultérieurs, vous devez l’associer à un objet Customer. Créez un objet Customer
lorsque votre client crée un compte auprès de votre entreprise. Les objets Customer
permettent de réutiliser des moyens de paiement et de suivre plusieurs paiements.
Créer un SetupIntentCôté serveur
Note
Si vous souhaitez afficher le Payment Element sans créer au préalable de SetupIntent, consultez la page Collecter les informations de paiement avant de créer un Intent.
Un SetupIntent est un objet qui représente votre intention de configurer le moyen de paiement d’un client en vue de paiements ultérieurs. Les moyens de paiement à présenter aux clients au cours du processus de paiement sont également inclus dans le SetupIntent. Vous pouvez laisser Stripe extraire automatiquement les moyens de paiement des paramètres de votre Dashboard ou les répertorier manuellement.
À moins que votre intégration ne nécessite une option basée sur du code pour proposer des moyens de paiement, Stripe recommande l’option automatisée. En effet, Stripe évalue la devise, les restrictions sur les moyens de paiement et d’autres paramètres pour dresser la liste des moyens de paiement pris en charge. Les moyens de paiement qui augmentent le taux de conversion et qui sont les plus adaptés à la devise et au lieu de résidence des clients sont prioritaires. Ceux de moindre priorité sont masqués dans un menu déroulant.
Récupérer la clé secrète du client
Le SetupIntent contient une clé secrète à utiliser côté client pour finaliser le processus de paiement en toute sécurité. Vous pouvez adopter différentes approches pour transmettre cette clé secrète côté client.
Utilisation de Radar
Par défaut, Radar n’intervient pas lorsque vous enregistrez le moyen de paiement d’un client sans effectuer un premier paiement. Si vous souhaitez l’activer par défaut, accédez aux paramètres Radar et activez Utiliser Radar sur les moyens de paiement enregistrés pour une utilisation ultérieure.
Collecter les informations de paiementCôté client
Vous pouvez à présent collecter les informations de paiement de votre client à l’aide de l’Element Payment. Le composant Element Payment est un composant préconfiguré de l’interface utilisateur qui facilite cette collecte pour de nombreux moyens de paiement.
Le composant Element Payment contient un iframe qui envoie des informations de paiement à Stripe de manière sécurisée via une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de la page de paiement doit commencer par https://
et non http://
. Vous pouvez tester votre intégration sans cela, mais pensez à activer le protocole HTTPS au moment de commencer à accepter des paiements réels.
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 des Elements
.
Demander un token de marchand Apple Pay
Si vous acceptez 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. L’exemple suivant illustre une demande de token de marchand pour les paiements différés.
const paymentElement = elements.create('payment', { applePay: { deferredPaymentRequest: { paymentDescription: 'My deferred payment', managementURL: 'https://example.com/billing', deferredBilling: { amount: 2500, label: 'Deferred Fee', deferredPaymentDate: new Date('2024-01-05') }, } }, // Other options });
Configurer la devise
Lorsque vous utilisez des SetupIntents avec automatic_payment_methods, vous pouvez transmettre la devise dans les options
lors de la création du fournisseur Elements
pour influencer les moyens de paiement affichés par le Payment Element. Le Payment Element affiche les moyens de paiement activés dans le Dashboard Stripe et prenant en charge la devise spécifiée. Consultez la page Options d’intégration des moyens de paiement pour en savoir plus sur les éléments pris en charge.
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.
Envoyer les données de paiement à StripeCôté client
Utilisez stripe.confirmSetup pour finaliser la configuration à l’aide des données collectées par le Payment Element. Ajoutez une return_url à cette fonction pour que Stripe puisse rediriger l’utilisateur une fois la configuration terminée. Nous pouvons le rediriger en premier lieu vers un site intermédiaire, comme une page d’autorisation bancaire, avant de le rediriger vers la return_url
.
Si votre client enregistre les données de sa carte bancaire, nous le redirigeons immédiatement vers la return_url
une fois la configuration finalisée. Si vous ne souhaitez pas effectuer de redirection pour les paiements par carte bancaire, vous pouvez configurer la redirection sur if_required
. Seuls les clients qui paient avec des moyens de paiement avec redirection seront redirigés.
Veillez à ce que le paramètre return_url
corresponde à une page de votre site web qui indique l’état du SetupIntent
. Lorsque Stripe redirige le client vers la page return_url
, nous fournissons les paramètres de requête d’URL suivants pour vérifier cet état. Vous pouvez également ajouter vos propres paramètres de requête lorsque vous fournissez le paramètre return_url
. Ils seront conservés tout au long du processus de redirection.
Paramètre | Description |
---|---|
setup_intent | L’identifiant unique du SetupIntent . |
setup_intent_client_secret | La clé secrète du client de l’objet SetupIntent . |
Vous pouvez utiliser stripe.retrieveSetupIntent pour récupérer le SetupIntent à l’aide du paramètre de requête setup_intent_client_secret
. À la confirmation du SetupIntent, l’ID de PaymentMethod
résultant (dans result.setupIntent.payment_method
) est enregistré dans l’objet Customer
fourni.
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.
Débiter ultérieurement le moyen de paiement enregistré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 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 bancaires, 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. - Assignez la valeur
true
à la propriété confirm du PaymentIntent, ce qui aura pour effet de générer immédiatement une confirmation à la création du PaymentIntent. - Renseignez l’ID du PaymentMethod dans payment_method et l’ID de l’objet Customer dans customer.
Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402. L’état du PaymentIntent est requires_payment_method. Vous devez inviter votre client à revenir dans votre application pour finaliser le paiement (par e-mail ou par une notification dans l’application par exemple).
Vérifiez le code de l’erreur levée par l’API Library Stripe. Si le paiement a échoué en raison d’un code de refus de paiement authentication_required, utilisez la clé secrète du client du PaymentIntent refusée avec confirmPayment pour permettre au client d’authentifier le paiement.
const form = document.getElementById('payment-form'); form.addEventListener('submit', async (event) => { event.preventDefault(); const {error} = await stripe.confirmPayment({ // The client secret of the PaymentIntent clientSecret, 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`. } });
Note
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 a échoué pour d’autres raisons, par exemple parce que les fonds sont insuffisants, dirigez votre client vers une page de paiement sur laquelle il pourra spécifier un autre moyen de paiement. Vous pouvez ensuite réutiliser l’objet PaymentIntent existant pour retenter de réaliser le paiement avec les nouvelles données de paiement.
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.
Tester le traitement d’un PaymentMethod enregistré de type prélèvement automatique SEPA
La confirmation du SetupIntent à 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
.
Mentionner le fonctionnement de Stripe à vos clients
Stripe recueille des informations sur les interactions des clients avec Elements afin de vous fournir des services, de prévenir la fraude et d’améliorer ses services. Cela inclut l’utilisation de cookies et d’adresses IP pour identifier les Elements qu’un client a vus au cours d’une même session Checkout. Vous êtes responsable de la divulgation et de l’obtention de tous les droits et consentements nécessaires pour que Stripe puisse utiliser les données à cette fin. Pour en savoir plus, visitez notre Centre de confidentialité.