Enregistrer une carte sans authentification
Stripe vous permet de recueillir les informations de la carte de votre client afin de la débiter ultérieurement. Dans certaines régions, les banques exigent souvent une deuxième forme d’authentification pour effectuer un paiement, par exemple en saisissant un code envoyé sur un téléphone. Cette étape supplémentaire tend à diminuer le taux de conversion. En effet, si votre client n’utilise pas activement votre site Web ou votre application il ne pourra pas authentifier l’achat.
Si vous faites principalement des affaires aux États-Unis et au Canada où les banques n’exigent pas d’authentification, vous pouvez adopter cette intégration plus simple. Cette intégration ne sera pas conforme dans les pays qui exigent l’authentification pour enregistrer des cartes (par exemple, l’Inde). Cependant, si vous optez pour cette intégration, il vous faudra y apporter des modifications importantes si vous voulez vous étendre à d’autres pays ou ajouter d’autres moyens de paiement. Apprenez comment sauvegarder les cartes nécessitant une authentification.
Conformité
Vous êtes responsable du respect de toutes les lois, réglementations et règles du réseau applicables lorsque vous enregistrez les informations de paiement d’un client. Par exemple, si vous souhaitez enregistrer leur moyen de paiement pour une utilisation future, comme les facturer lorsqu’ils n’utilisent 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 détails du moyen de paiement et permettez aux clients de donner leur consentement. Si vous souhaitez facturer vos clients lorsqu’ils sont hors ligne, assurez-vous que vos conditions comprennent les éléments suivants :
- Le consentement du client vous autorisant à prélever un paiement ou une série de paiements en son nom pour des transactions spécifiques.
- 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.
Collectez les informations de carteCôté client
Avant d’utiliser ce guide, il vous faut un compte Stripe. Inscrivez-vous.
Créez une page de paiement pour recueillir les informations de carte du client. Utilisez Stripe Elements, une bibliothèque d’interfaces utilisateur qui vous aide à créer des formulaires de paiement personnalisés. Pour démarrer avec Elements, incluez la bibliothèque Stripe.js avec le script suivant sur votre page de paiement.
<script src="https://js.stripe.com/v3/"></script>
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 vous-même.
Pour tirer au mieux parti de la fonctionnalité avancée de lutte contre la fraude de Stripe, ajoutez ce script à chaque page de votre site, pas uniquement à celle consacrée au paiement. Ajouter le script à chaque page permet à Stripe de détecter tout comportement suspect susceptible d’indiquer une fraude lorsque les utilisateurs consultent votre site web.
Ajouter Elements à votre page
Afin de recueillir les informations de carte de vos clients en toute sécurité, Elements crée pour vous des composants d’interface hébergés par Stripe. Ils sont ensuite placés dans votre formulaire de paiement. Vous n’avez ainsi pas à le faire. Pour déterminer l’emplacement d’insertion de ces composants, créez des éléments DOM (contenants) vides associés à des identifiants uniques dans votre formulaire de paiement.
<input id="cardholder-name" type="text"> <!-- placeholder for Elements --> <div id="card-element"></div> <div id="card-result"></div> <button id="card-button">Save Card</button>
Créez ensuite une instance de l’objet Stripe en indiquant comme premier paramètre votre clé API publique. Puis, créez une instance de l’objet Elements et utilisez-la pour monter un élément card
dans le DOM.
L’élément card
simplifie le formulaire de paiement et réduit le nombre de champs requis en insérant un champ de saisie flexible et unique qui recueille toutes les informations de carte nécessaires de manière sécurisée.
Vous pouvez aussi combiner les composants Elements cardNumber
, cardExpiry
et cardCvc
pour créer un formulaire de carte multi-saisie flexible.
Remarques
Recueillez toujours un numéro de code postal afin d’améliorer vos taux d’acceptation des cartes bancaires et de réduire la fraude.
Le Card Element sur une seule ligne collecte et envoie automatiquement le code postal du client à Stripe. Si vous créez votre formulaire de paiement avec des Elements séparés pour (Card Number, Expiry, CVC), ajoutez un champ de saisie distinct pour le code postal du client.
const stripe = Stripe(
); const elements = stripe.elements(); const cardElement = elements.create('card'); cardElement.mount('#card-element');'pk_test_TYooMQauvdEDq54NiTphI7jx'
Un élément Stripe contient une balise iframe qui envoie de manière sécurisée les informations de paiement à Stripe par une connexion HTTPS. Pour que votre intégration fonctionne, l’adresse de votre page de paiement doit aussi commencer par https://
au lieu de http://
.
Vous pouvez tester votre intégration sans utiliser le protocole HTTPS. Activez-le lorsque vous êtes prêt à accepter des paiements réels.
const cardholderName = document.getElementById('cardholder-name'); const cardButton = document.getElementById('card-button'); const resultContainer = document.getElementById('card-result'); cardButton.addEventListener('click', async (ev) => { const {paymentMethod, error} = await stripe.createPaymentMethod({ type: 'card', card: cardElement, billing_details: { name: cardholderName.value, }, } ); if (error) { // Display error.message in your UI. resultContainer.textContent = error.message; } else { // You have successfully created a new PaymentMethod resultContainer.textContent = "Created payment method: " + paymentMethod.id; } });
Envoyez l’identifiant de PaymentMethod qui en résulte à votre serveur.
Configurer StripeCôté serveur
Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application :
Enregistrez la carteCôté serveur
Enregistrez la carte en associant le PaymentMethod à un objet Customer. Vous pouvez utiliser l’objet Customer pour sauvegarder d’autres informations concernant l’utilisateur, telles que des détails d’expédition et l’adresse courriel.
Si vous avez un objet Customer existant, vous pouvez joindre le PaymentMethod plutôt à cet objet.
À ce stade, associez l’identifiant du client et l’identifiant du PaymentMethod à votre propre représentation interne d’un client, si vous en avez une.
Débitez la carte enregistréeCôté serveur
Au moment de débiter le client, cherchez l’identifiant du PaymentMethod et celui du client à débiter. Vous pouvez le faire soit en sauvegardant les deux identifiants dans votre base de données, soit en utilisant l’identifiant du client pour rechercher tous les PaymentMethods disponibles du client.
Utilisez l’identifiant du PaymentMethod et celui de l’objet Customer pour créer un nouveau PaymentIntent. Définissez error_on_requires_action sur « true » pour refuser les paiements qui nécessitent des actions de la part de l’utilisateur, comme l’authentification à deux facteurs.
Lorsqu’une tentative de paiement échoue, la requête échoue également avec un code d’état HTTP 402 et Stripe renvoie une erreur. Vous devez inviter l’utilisateur à retourner dans votre application (par exemple en lui envoyant un courriel) afin de terminer le paiement. Consultez le code d’erreur généré par la bibliothèque d’API de Stripe ou le paramètre last_payment_error.decline_code du PaymentIntent pour déterminer le motif du refus du paiement par l’émetteur de la carte.
Gérer les erreurs de carte
Informez votre client que le paiement a échoué et dirigez-le vers le formulaire de paiement que vous avez créé dans l’étape 1 où il peut saisir les informations d’une nouvelle carte. Envoyez ce nouvel identifiant PaymentMethod à votre serveur à joindre à l’objet Customer et effectuez de nouveau le paiement.
Vous pouvez également créer un PaymentIntent et enregistrer une carte en un seul appel à l’API si vous avez déjà créé un client.
Le réglage de setup_future_usage sur on_session
indique à Stripe que vous souhaitez conserver la carte bancaire pour plus tard, sans déclencher d’authentification inutile.
Tester l'intégration
Stripe fournit des cartes de test que vous pouvez utiliser en mode test pour simuler le comportement de différentes cartes. Utilisez ces cartes avec n’importe quel CVC, code postal et date d’expiration non échue.
Numéro | Description |
---|---|
Transaction réussie et paiement effectué immédiatement. | |
Échoue toujours avec un code de refus de paiement insufficient_funds . | |
Exige l’authentification, qui dans cette intégration échouera avec un code de refus de paiement authentication_required . |
Mettez à niveau votre intégration pour prendre en charge l’authentification des cartes bancaires
Cette intégration refuse les cartes qui nécessitent une authentification lors du paiement. Si vous commencez à voir de nombreux paiements s’afficher comme Failed
sur le Dashboard, cela veut dire qu’il est temps de mettre à niveau votre intégration. L’intégration complète de Stripe traite ces paiements au lieu de les refuser automatiquement.