Salvare i dati di pagamento durante il pagamento

Per consentire a un cliente di salvare il metodo di pagamento per uso futuro, specifica il parametro saved_payment_method_options.payment_method_save durante la creazione della sessione di Checkout.

Per salvare un metodo di pagamento, devi avere un oggetto Customer. Specifica un cliente esistente oppure per creare un nuovo cliente imposta customer_creation della sessione di Checkout su 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

Dopo aver creato la sessione di Checkout, utilizza la chiave privata client restituita per progettare una pagina di pagamento.

Nella maggior parte dei casi, devi raccogliere il consenso del cliente prima di salvare i metodi di pagamento. L’esempio seguente mostra come ottenere il consenso utilizzando una casella di controllo.

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

Comunica a Stripe se il cliente ha fornito il consenso quando chiami confirm specificando il parametro savePaymentMethod. Quando salvi i dati di pagamento di un cliente, sei responsabile del rispetto di tutte le leggi, le normative e le regole del circuito applicabili.

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

Puoi visualizzare di nuovo i metodi di pagamento salvati in precedenza affinché il cliente possa utilizzarli durante il completamento della transazione.

Identificare il cliente

Ogni metodo di pagamento salvato è collegata a un oggetto Customer. Prima di creare la sessione di Checkout, autentica il cliente e specifica l’ID Customer corrispondente nella sessione di 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}}

Visualizzare i metodi di pagamento salvati

Utilizza la matrice savedPaymentMethods nel front-end per visualizzare i metodi di pagamento disponibili del cliente.

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

Confermare con un metodo di pagamento salvato

Se il cliente ha selezionato un metodo di pagamento salvato ed è pronto per completare la transazione, chiama confirm, specificando 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.
      }
    });
  });
});