Save payment details during payment

Learn how to accept a payment and save your customer's payment details for future purchases.

Observação

Support for saved payment methods using Elements and the Checkout Sessions API only includes cards. It doesn’t support other saved payment methods, such as bank accounts.

Enable saved payment methods

To allow a customer to save their payment method for future use, specify the saved_payment_method_options.payment_method_save parameter when creating the Checkout Session.

Saving a payment method requires a Customer. Pass an existing customer, or, to create a new customer, set the Checkout Session’s customer_creation to always.

After you create the Checkout Session, use the client secret returned in the response to build your checkout page.

Cuidado

Global privacy laws are complicated and nuanced. Before implementing the ability to store customer payment method details, work with your legal team to make sure that it complies with your privacy and compliance framework.

In most cases, you must collect a customer’s consent before you save their payment methods. The following example shows how to obtain consent using a checkbox.

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>

Indicate to Stripe whether your customer has provided consent when you call confirm by passing the savePaymentMethod parameter. When you save a customer’s payment details, you’re responsible for complying with all applicable laws, regulations, and network rules.

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

Reuse a previously saved payment method

You can redisplay previously saved payment methods for your customer to use during checkout.

Identify your customer

Each saved payment method is linked to a Customer object. Before creating the Checkout Session, authenticate your customer, and pass the corresponding Customer ID to the Checkout Session.

Render saved payment methods

Use the savedPaymentMethods array on the front end to render the customer’s available payment methods.

Observação

The savedPaymentMethods array includes only the payment methods that have allow_redisplay set to always. Follow the steps to collecting consent from your customer, which ensures that allow_redisplay is properly set.

index.html
<div id="saved-payment-methods"></div>

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

Confirm with a saved payment method

When your customer has selected a saved payment method and is ready to complete checkout, call confirm, passing in the paymentMethod ID.

index.html
<button id="pay-button">Pay</button>

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

Observação

Save payment details during payment

Learn how to accept a payment and save your customer's payment details for future purchases.

Observação

Enable saved payment methods

Collect consent

Cuidado

Reuse a previously saved payment method

Identify your customer

Render saved payment methods

Observação

Confirm with a saved payment method