Passa al contenuto
Crea account o Accedi
Il logo della documentazione Stripe
/
Crea un accountAccedi
PanoramicaAccettare un pagamentoEseguire l'upgrade dell'integrazione
Pagamenti online
PanoramicaTrovare il caso d'uso più adatto
Crea un'integrazione personalizzata con Elements
Usa Managed PaymentsPagamenti ricorrenti
Pagamenti di persona
Metodi di pagamento
Concetti di base sulle operazioni di pagamento
Saldi e tempo di regolamentoRicevuteRimborsi e revoche
Integrazioni avanzate
Oltre i pagamenti

Salvare il metodo di pagamento di un cliente quando lo utilizza per pagare

Scopri come salvare il metodo di pagamento del cliente quando confermi un PaymentIntent.

Use the Checkout Sessions API to save payment details during a purchase. This is useful for situations such as:

  • Charging a customer for an e-commerce order and storing the payment details for future purchases.
  • Initiating the first payment in a series of recurring payments.
  • Charging a deposit and storing the payment details to charge the full amount later.

Compliance

You’re responsible for your compliance with all applicable laws, regulations, and network rules when saving a customer’s payment details. These requirements generally apply if you want to save your customer’s payment method for future use, such as displaying a customer’s payment method to them in the checkout flow for a future purchase or charging them when they’re not actively using your website or app. Add terms to your website or app that state how you plan to save payment method details and allow customers to opt in.

When you save a payment method, you can only use it for the specific usage you have included in your terms. To charge a payment method when a customer is offline and save it as an option for future purchases, make sure that you explicitly collect consent from the customer for this specific use. For example, include a “Save my payment method for future use” checkbox to collect consent.

To charge a customer when they’re offline, make sure your terms include the following:

  • The customer’s agreement to your initiating a payment or a series of payments on their behalf for specified transactions.
  • The anticipated timing and frequency of payments (for example, if the charges are for scheduled installments, subscription payments, or unscheduled top-ups).
  • How you determine the payment amount.
  • Your cancellation policy, if the payment method is for a subscription service.

Make sure you keep a record of your customer’s written agreement to these terms.

Nota

When using Elements with the Checkout Sessions API, only cards are supported for saved payment methods. You can’t save other payment methods, such as bank accounts.

Configura Stripe
Lato server

Innanzitutto registrati per creare un account Stripe.

Utilizza le nostre librerie ufficiali per accedere all’API Stripe dalla tua applicazione:

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'

Creare un cliente
Lato server

Per configurare una carta per pagamenti futuri, devi associarla a un Customer. Crea un oggetto Customer quando il cliente crea un account con la tua azienda. Un oggetto Customer ti permette di riutilizzare modalità di pagamento e monitorare più pagamenti.

Confronta i riferimenti relativi a Customers v1 e Accounts v2

Se la tua piattaforma Connect utilizza account configurati dal cliente, utilizza la nostra guida per sostituire i riferimenti Customer ed eventi nel tuo codice con la documentazione di riferimento dell’API Accounts v2 equivalente.

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"

Una creazione riuscita restituisce l’oggetto Customer. Puoi controllare l’oggetto per trovare l’id del cliente e memorizzare il valore nel database per poterlo recuperare successivamente.

Puoi trovare questi clienti nella pagina Clienti della Dashboard.

Enable saved payment methods

Attenzione

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.

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 create a new one by setting customer_creation to always on the Checkout Session.

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

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

Nota

In the latest version of Stripe.js, specifying enableSave to auto is optional because that’s the default value when saved payment methods are enabled on the Checkout Session.

The Payment Element automatically displays a consent collection checkbox when saved payment methods are enabled on the Checkout Session. You can explicitly configure this behavior using elementsOptions on 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',
    }
  }
});

Reuse a previously saved payment method

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.

Nota

In the latest version of Stripe.js, enableRedisplay defaults to auto when saved payment methods are enabled on the Checkout Session.

The Payment Element automatically redisplays previously saved payment methods for your customer to use during checkout when saved payment methods are enabled on the Checkout Session.

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

You can explicitly configure the redisplay behavior using elementsOptions on 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',
    }
  }
});

FacoltativoBuild a saved payment method UI

You can build your own saved payment method UI instead of using the built-in UI provided by the Payment Element.

To prevent the Payment Element from handling consent collection and displaying the previously saved payment methods, pass in additional elementsOptions on initCheckout.

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

Collect consent

Attenzione

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 method details. 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>

When you call confirm, you can indicate to Stripe that your customer has provided consent 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
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;
      }
    });
  });
}

Render saved payment methods

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

Nota

The savedPaymentMethods array includes only the payment methods that have allow_redisplay set to always. Follow the steps for collecting consent from your customer and make sure to properly set the allow_redisplay parameter.

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

Confirm with a saved payment method

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

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