Accéder directement au contenu
Créez un compte ou connecter-vous
Logo de la documentation Stripe
/
Créez un compteConnectez-vous
AperçuMettre votre intégration à niveau
Paiements en ligne
PrésentationTrouver votre cas d'usageUtiliser Managed Payments
Créer une intégration personnalisée avec Elements
Paiements par TPE
Moyens de paiement
Scénarios de paiement
Au-delà des paiements

Enregistrer le moyen de paiement d'un client lors d'un paiement

Découvrez comment enregistrer les détails de paiement de vos clients pour des achats ultérieurs lorsqu'ils effectuent un paiement.

Utilisez l’API Checkout Sessions pour enregistrer les détails du paiement lors d’un achat. Ceci est utile dans des situations telles que :

  • Débiter un client pour une commande en ligne et enregistrer les détails de paiement pour de futurs achats.
  • Initier le premier paiement d’une série de paiements récurrents.
  • Débiter un versement et sauvegarder les détails du paiement pour débiter le montant total ultérieurement.

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. Ces exigences s’appliquent en général si vous souhaitez enregistrer un moyen de paiement pour une utilisation future, par exemple en l’affichant dans Checkout pour un achat ultérieur ou en débitant ce moyen de paiement lorsque le client n’utilise pas activement votre site internet ou votre application. Ajoutez à votre site ou application des conditions précisant comment vous comptez enregistrer les moyens de paiement et permettant aux clients d’y consentir.

Lorsque vous enregistrez un moyen de paiement, vous ne pouvez l’utiliser que pour l’usage spécifique indiqué dans vos conditions. Pour débiter un moyen de paiement lorsqu’un client est hors ligne et l’enregistrer comme option pour de futurs achats, vous devez recueillir explicitement le consentement du client pour cet usage. Par exemple, affichez une case à cocher « Enregistrer mon moyen de paiement pour une utilisation ultérieure » afin d’obtenir ce consentement.

Pour facturer un client lorsqu’il n’est pas en ligne, assurez-vous que vos conditions incluent les éléments suivants :

  • Le consentement du client vous autorisant à initier 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, s’il s’agit de versements échelonnés, de paiements d’abonnements ou de recharges ponctuelles).
  • La façon dont vous déterminez le montant à payer.
  • Vos conditions 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.

Remarque

Lorsque vous utilisez Elements avec l’API Checkout Sessions, seules les cartes bancaires sont prises en charge pour les moyens de paiement enregistrés. Vous ne pouvez pas enregistrer d’autres moyens de paiement, comme les comptes bancaires.

Configurer Stripe
Côté serveur

Tout d’abord, inscrivez-vous pour créer un Compte Stripe.

Utilisez nos bibliothèques officielles pour accéder à l’API Stripe depuis 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'

Créer un client
Côté serveur

Pour configurer une carte bancaire en vue de paiements futurs, vous devez l’associer à un client. Lorsque votre client ouvre un compte chez vous, créez un objet Customer, qui permet de réutiliser des moyens de paiement et d’assurer le suivi de plusieurs paiements.

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 name="Jenny Rosen" \
  --data-urlencode email="jennyrosen@example.com"

Lorsque la création aboutit, l’objet Customer est renvoyé. Vous pouvez l’examiner pour identifier l’id du client et stocker cette valeur dans votre base de données pour la récupérer ultérieurement.

Vous pouvez trouver ces clients sur la page Clients du Dashboard.

Activer les moyens de paiement enregistrés

Mise en garde

Les lois internationales sur la protection de la vie privée sont complexes et nuancées. Avant d’activer la fonctionnalité permettant d’enregistrer les informations de paiement des clients, travaillez avec votre équipe juridique pour vous assurer que cette fonctionnalité respecte vos règles de confidentialité et de conformité.

Pour permettre à un client d’enregistrer un moyen de paiement en vue d’une utilisation ultérieure, spécifiez le paramètre saved_payment_method_options.payment_method_save lors de la création de la session Checkout.

L’enregistrement d’un moyen de paiement nécessite un objet CustomerPassez un client existant ou créez-en un nouveau en définissant customer_creation sur always dans la session Checkout.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
"{{PRICE_ID}}"
 \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer_creation=always \
  -d "saved_payment_method_options[payment_method_save]"=enabled

Après avoir créé la session de paiement, utilisez laclé secrète du client renvoyée dans la réponse piur créer votre page de paiement.

Remarque

Dans la dernière version de Stripe.js, spécifier enableSave sur auto est facultatif, car c’est la valeur par défaut lorsque les moyens de paiement enregistrés sont activés dans la session Checkout.

Le composant Payment Element affiche automatiquement une case à cocher de recueil du consentement lorsque les moyens de paiement enregistrés sont activés dans la session Checkout. Vous pouvez configurer explicitement ce comportement à l’aide de elementsOptions dans initCheckout.

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
    }
  }
});

Réutiliser un moyen de paiement précédemment enregistré

Chaque moyen de paiement enregistré est lié à un objet Customer. Avant de créer la session Checkout, identifiez votre client et transmettez-lui l’identifiant Customer ID correspondant à la session Checkout.

Remarque

Dans la dernière version de Stripe.js, enableRedisplay est défini par défaut sur auto lorsque les moyens de paiement enregistrés sont activés dans la session Checkout.

Le composant Payment Element réaffiche automatiquement les moyens de paiement enregistrés afin que votre client puisse les utiliser lors du paiement, lorsque cette option est activée dans la session Checkout.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"=
"{{PRICE_ID}}"
 \
  -d "line_items[0][quantity]"=2 \
  -d mode=payment \
  -d ui_mode=custom \
  -d customer=
"{{CUSTOMER_ID}}"

Vous pouvez configurer explicitement le comportement de réaffichage à l’aide d’elementsOptions dans initCheckout.

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableSave: 'auto',
      // Default is 'auto' in the latest version of Stripe.js - this configuration is optional
      enableRedisplay: 'auto',
    }
  }
});

FacultatifCréer une interface utilisateur pour les moyens de paiement enregistrés

Vous pouvez créer votre propre interface utilisateur pour les moyens de paiement enregistrés, au lieu d’utiliser l’interface intégrée fournie par le composant Payment Element.

Pour empêcher le composant Payment Element de gérer le recueil du consentement et d’afficher les moyens de paiement enregistrés précédemment, passez des elementsOptions supplémentaires dans initCheckout.

checkout.js
const checkout = stripe.initCheckout({
  clientSecret,
  elementsOptions: {
    savedPaymentMethod: {
      enableSave: 'never',
      enableRedisplay: 'never',
    }
  }
});

Collecter le consentement

Mise en garde

Les lois internationales sur la protection de la vie privée sont complexes et nuancées. Avant d’activer la fonctionnalité permettant d’enregistrer les informations de paiement des clients, travaillez avec votre équipe juridique pour vous assurer que cette fonctionnalité respecte vos règles de confidentialité et de conformité.

Dans la plupart des cas, vous devez recueillir le consentement du client avant d’enregistrer ses moyens de paiement. L’exemple suivant montre comment obtenir ce consentement à l’aide d’une case à cocher.

index.html
<label>
  <input type="checkbox" id="save-payment-method-checkbox" />
  Save my payment information for future purchases
</label>
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>

Lorsque vous appelez confirm, vous pouvez indiquer à Stripe que votre client a donné son consentement en passant le paramètre savePaymentMethod. Lorsque vous enregistrez les détails de paiement d’un client, vous êtes responsable du respect de l’ensemble des lois, réglementations et règles de réseau applicables.

checkout.js
const checkout = stripe.initCheckout({clientSecret});
const button = document.getElementById('pay-button');
const errors = document.getElementById('confirm-errors');
const checkbox = document.getElementById('save-payment-method-checkbox');
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    const savePaymentMethod = checkbox.checked;
    actions.confirm({savePaymentMethod}).then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}

Afficher les moyens de paiement enregistrés

Utilisez le tableau savedPaymentMethods côté front-end pour afficher les moyens de paiement disponibles de votre client.

Remarque

Le tableau savedPaymentMethods ne contient que les moyens de paiement pour lesquels allow_redisplay est défini sur always. Suivez les étapes collecter le consentement de votre client et veillez à définir correctement le paramètre allow_redisplay.

index.html
<div id="saved-payment-methods"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}

Confirmer avec un moyen de paiement enregistré

Lorsque votre client sélectionne un moyen de paiement enregistré et qu’il est prêt à finaliser le paiement, appelez confirm et transmettez l’identifiant paymentMethod.

index.html
<button id="pay-button">Pay</button>
checkout.js
const checkout = stripe.initCheckout({clientSecret});

const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const container = document.getElementById('saved-payment-methods');
  const {actions} = loadActionsResult;
  actions.getSession().savedPaymentMethods.forEach((pm) => {
    const label = document.createElement('label');
    const radio = document.createElement('input');

    radio.type = 'radio';
    radio.value = pm.id;

    label.appendChild(radio);
    label.appendChild(document.createTextNode(`Card ending in ${pm.card.last4}`));
    container.appendChild(label);
  });
}
Cette page vous a-t-elle été utile ?
OuiNon