Accéder directement au contenu
Créez un compte ou connectez-vous
Le logo de la documentation Stripe
/
Créer un compteConnectez-vous
AperçuAccepter un paiementMettre votre intégration à niveau
Paiements en ligne
AperçuTrouver votre cas d'usagePaiements récurrents
Paiements en personne
Moyens de paiement
Opérations de paiement
Soldes et délai de règlementReçusRemboursements et annulations
Intégrations avancées
Au-delà des paiements

Remarque

Cette page n'est pas encore disponible dans cette langue. Nous faisons tout notre possible pour proposer notre documentation dans davantage de langues et nous vous fournirons la version traduite dès qu'elle sera disponible.

Enregistrer une carte sans authentification

Recueillez des informations de carte pour débiter votre client ultérieurement.

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 exercez votre activité principalement aux États-Unis et au Canada, où les institutions financières n’exigent pas d’authentification, vous pourrez donc adopter cette intégration plus simple. Cette intégration ne sera pas conforme dans les pays qui exigent une authentification pour enregistrer les 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 modes de paiement. Découvrez comment enregistrer des cartes qui exigent 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 carte
Cô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 dans votre page de paiement.

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.

To best take advantage of the Stripe advanced fraud functionality, include this script on every page on your site, not the checkout page only. Including the script on every page allows Stripe to detect suspicious behavior that might indicate fraud when users browse your website.

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.

index.html
<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.

Remarque

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 à une seule ligne collecte automatiquement le code postal du client et l’envoie à Stripe. Si vous créez votre formulaire de paiement avec des Elements fractionnés (Numéro de carte, Expiration, CVC), ajoutez un champ de saisie distinct pour le code postal du client.

client.js
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

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(e) à accepter des paiements réels.

client.js
Afficher l'exemple dans son intégralité
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 Stripe
Côté serveur

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe à partir de votre application :

Command Line
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Enregistrez la carte
Côté serveur

Save the card by attaching the PaymentMethod to a Customer. You can use the Customer object to store other information about your customer, such as shipping details and email address.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d payment_method={{PAYMENT_METHOD_ID}}

Si vous avez un objet Customer existant, vous pouvez joindre le PaymentMethod plutôt à cet objet.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_methods/{{PAYMENT_METHOD_ID}}/attach \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
"{{CUSTOMER_ID}}"

À 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ée
Côté serveur

When you’re ready, fetch the PaymentMethod and Customer IDs to charge. You can do this by either storing the IDs of both in your database, or by using the Customer ID to look up all the customer’s available PaymentMethods.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/payment_methods \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d customer=
"{{CUSTOMER_ID}}"
 \
  -d type=card

Use the PaymentMethod ID and the Customer ID to create a new PaymentIntent. Set error_on_requires_action to true to decline payments that require any actions from your customer, such as two-factor authentication.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
"{{CUSTOMER_ID}}"
 \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true

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 aviser l’utilisateur de 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

Notify your customer that the payment failed and direct them to the payment form you made in step 1 where they can enter new card details. Send that new PaymentMethod ID to your server to attach to the Customer object and make the payment again.

Alternatively, you can create a PaymentIntent and save a card in one API call if you already created a Customer.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d amount=1099 \
  -d currency=usd \
  -d "payment_method_types[]"=card \
  -d customer=
"{{CUSTOMER_ID}}"
 \
  -d payment_method={{PAYMENT_METHOD_ID}} \
  -d error_on_requires_action=true \
  -d confirm=true \
  -d setup_future_usage=on_session

Setting setup_future_usage to on_session indicates to Stripe that you want to save the card for later, without triggering unnecessary authentication.

Tester l'intégration

Stripe provides test cards you can use in a sandbox to simulate the behavior of different cards. Use these cards with any CVC, postal code, and expiration date in the future.

NuméroDescription
Transaction réussie et paiement effectué immédiatement.
Échoue toujours avec un code de refus de paiement insufficient_funds.
Requires authentication, which in this integration declines with a code of authentication_required.

FacultatifRécupérer un CVC

Lorsque vous créez de nouveaux paiements sur une carte enregistrée, il est conseillé de récupérer e CVC de la carte afin d’en vérifier le titulaire et d’ajouter ainsi une mesure supplémentaire de lutte contre la fraude.

Start by creating a PaymentIntent from your server with the amount and currency of the payment, and set the Customer to the ID of your customer. Then, list the PaymentMethods associated with your customer to determine which PaymentMethods to show to your user for CVC re-collection.

Après avoir transmis la clé secrète du client de l’objet PaymentIntent au navigateur, vous pouvez récupérer les données relatives au CVC sur votre client à l’aide de Stripe Elements. Utilisez l’élément cardCvc pour récupérer la valeur CVC auprès de votre utilisateur et confirmez ensuite le paiement du client au moyen de stripe.confirmCardPayment. Définissez l’ID de l’objet PaymentMethod à payment_method et l’élément cardCvc à payment_method_options[card][cvc].

client.js
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: '{{PAYMENT_METHOD_ID}}',
  payment_method_options: {
    card: {
      cvc: cardCvcElement
    }
  },
});

if (result.error) {
  // Show error to your customer
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
  }
}

Un paiement peut réussir même lorsqu’un contrôle CVC ne fonctionne pas. Pour éviter cette situation, configurez vos règles Radar afin de bloquer les paiements lorsque la vérification CVC échoue.

Mettez à niveau votre intégration pour prendre en charge l’authentification des cartes bancaires

This integration declines cards that require authentication during payment. If you start seeing many payments in the Dashboard listed as Failed, then it’s time to upgrade your integration. Stripe’s global integration handles these payments instead of automatically declining.