Enregistrer les informations de paiement lors du paiement

Pour permettre à un client d’enregistrer son mode 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 Customer. Transmettez un objet Customer existant ou, pour créer un nouvel objet, attribuez la valeur always à la fonction customer_creation de la session Checkout.

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

Une fois que vous avez créé la session Checkout, utilisez la clé secrète du client renvoyée dans la réponse pour créer votre page de paiement.

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 le consentement à l’aide d’une case à cocher.

<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>

Indiquez à Stripe si votre client a donné son consentement lorsque vous appelez confirm en transmettant le paramètre savePaymentMethod. Lorsque vous enregistrez les informations de paiement d’un client, vous devez respecter toutes les lois, réglementations et règles de réseau applicables.

stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  const checkbox = document.getElementById('save-payment-method-checkbox');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

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

Vous pouvez réafficher les moyens de paiement précédemment enregistrés pour que votre client puisse les utiliser lors du paiement.

Identifiez votre client

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

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

Affichage des moyens de paiement enregistrés

Utilisez le tableau savedPaymentMethods dans l’application frontale afin d’afficher les moyens de paiement disponibles pour le client.

<div id="saved-payment-methods"></div>

stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const container = document.getElementById('saved-payment-methods');
  checkout.session().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 le client a sélectionné un moyen de paiement enregistré et qu’il est prêt à procéder au paiement, il appelle la fonction de confirmation, en indiquant l’ID du moyen de paiement.

<button id="pay-button">Pay</button>

stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  button.addEventListener('click', () => {
    checkout.confirm({paymentMethod: selectedPaymentMethod}).then((result) => {
      if (result.error) {
        // Confirmation failed. Display the error message.
      }
    });
  });
});