Enregistrer les coordonnées bancaires 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 objet Customer. Transmettez un objet Customer existant ou, pour créer un client, définissez le paramètre customer_creation de la session Checkout sur always.

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 du client à 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 êtes tenu de respecter l’ensemble des lois, réglementations et règles de réseaux 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.

Identifier votre client

Chaque moyen de paiement enregistré est associé à un objet Customer. Avant de créer la session Checkout, authentifiez votre client et transmettez l’ID client 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}}

Afficher les moyens de paiement enregistrés

Utilisez le tableau savedPaymentMethods sur le front-end pour afficher les moyens de paiement disponibles du 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 votre client a sélectionné un moyen de paiement enregistré et qu’il est prêt à mener à bien le paiement, appelez confirm en transmettant l’ID paymentMethod.

<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.
      }
    });
  });
});