# Salvare il metodo di pagamento di un cliente senza effettuare un pagamento

Scopri come salvare un metodo di pagamento ed eseguire l'addebito in un secondo momento.

# L'API Checkout Sessions

> This is a L'API Checkout Sessions for when payment-ui is embedded-components. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=embedded-components.

L’[API Checkout Sessions in `setup` mode](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode) permette di salvare i dettagli pagamento di un cliente senza un pagamento iniziale. Questo è utile se vuoi aggiungere i clienti adesso, configurarli per pagamenti ed eseguire addebiti a loro utilizzando l’API Payment Intents in futuro, quando saranno offline.

Utilizza questa integrazione per configurare i pagamenti ricorrenti o per creare pagamenti una tantum il cui importo finale viene determinato in un secondo momento, spesso dopo che il cliente ha ricevuto il servizio.

> #### Transazioni con carta presente
> 
> Le transazioni con carta presente, come la [raccolta dei dati della carta attraverso Stripe Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md), usano un processo diverso per salvare il metodo di pagamento.

## Conformità

Quando salvi i dati di pagamento di un cliente, sei responsabile della conformità a tutte le leggi, le normative e le regole del circuito applicabili. Questi requisiti si applicano generalmente se desideri salvare la modalità di pagamento del cliente per un uso futuro, ad esempio visualizzando la modalità di pagamento del cliente nel flusso di pagamento per un acquisto futuro o addebitando il pagamento quando il cliente non sta utilizzando attivamente il sito web o l’app. Aggiungi al tuo sito web o alla tua app delle condizioni che indichino come intendi salvare i dettagli della modalità di pagamento e permetti ai clienti di scegliere.

Quando salvi un metodo di pagamento, puoi utilizzarlo solo per l’utilizzo specifico che hai incluso nelle tue condizioni. Per effettuare un addebito su un metodo di pagamento quando un cliente è offline e salvarlo come opzione per acquisti futuri, accertati di raccogliere esplicitamente il consenso del cliente per questo uso specifico. Ad esempio, includi una casella di controllo “Salva la mia modalità di pagamento per uso futuro” per raccogliere il consenso.

Per eseguire un addebito a un cliente quando è offline, assicurati che i tuoi termini includano i seguenti:

- Il consenso del cliente a disporre un pagamento o una serie di pagamenti a suo nome per determinate transazioni.
- La tempistica e la frequenza previste per i pagamenti (ad esempio, se gli addebiti sono per rate programmate, pagamenti di abbonamenti o ricariche non programmate).
- Il modo in cui determini l’importo del pagamento.
- La tua politica di annullamento, se la modalità di pagamento è per un servizio in abbonamento.

Assicurati di conservare una copia scritta del consenso relativo a questi termini, fornito dal cliente.

> Se devi utilizzare la conferma manuale sul lato server o la tua integrazione richiede la presentazione separata dei metodi di pagamento, consulta la nostra [guida alternativa](https://docs.stripe.com/payments/save-and-reuse-cards-only.md).

## Configurare Stripe [Lato server]

Innanzitutto [crea un account Stripe](https://dashboard.stripe.com/register) o [accedi](https://dashboard.stripe.com/login).

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Creare un oggetto Customer [Lato server]

Per configurare una modalità di pagamento per pagamenti futuri, è necessario associarla a un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea un oggetto `Customer` quando il cliente crea un account con la tua azienda. Gli oggetti `Customer` permettono di riutilizzare le modalità di pagamento e di monitorare più pagamenti.

> #### Confronta i riferimenti relativi a Customers v1 e Accounts v2
> 
> Se la tua piattaforma Connect utilizza [account configurati dal cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilizza la nostra [guida](https://docs.stripe.com/connect/use-accounts-as-customers.md) per sostituire i riferimenti `Customer` ed eventi nel tuo codice con la documentazione di riferimento dell’API Accounts v2 equivalente.

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

## Usa la modalità di configurazione [Lato server]

Crea una sessione di completamento della transazione con[mode=setup](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-mode).

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d mode=setup \
  -d ui_mode=elements \
  -d currency=usd
```

## Associare il metodo di pagamento a un cliente [Lato server]

Se non hai creato la sessione di completamento della transazione con un cliente esistente, utilizza l’ID del *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) per [associare](https://docs.stripe.com/api/payment_methods/attach.md) il metodo pagamento a un cliente.

In caso contrario, il metodo di pagamento si collega automaticamente al cliente indicato durante la creazione della sessione di completamento della transazione.

```curl
curl https://api.stripe.com/v1/payment_methods/{{PAYMENTMETHOD_ID}}/attach \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}"
```

## Recupera il metodo di pagamento [Lato server]

Dopo che un cliente ha completato con successo la sessione di completamento della transazione, gestisci il webhook [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed). Recupera l’oggetto Session nel webhook e quindi effettua le seguenti operazioni:

- Ottieni il valore della chiave [setup_intent](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-setup_intent), che è l’ID SetupIntent creato durante la sessione di completamento della transazione.
- Utilizza l’ID SetupIntent per [recuperare](https://docs.stripe.com/api/setup_intents/retrieve.md) l’oggetto SetupIntent. L’oggetto restituito contiene un ID [payment_method](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-payment_method) che puoi collegare a un cliente nel passaggio successivo.

Ulteriori informazioni sull’[impostazione dei webhook](https://docs.stripe.com/webhooks.md).

## Addebita in un secondo momento il metodo di pagamento [Lato server]

Dopo aver collegato il metodo di pagamento a un cliente, è possibile effettuare un pagamento *off-session* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information) utilizzando un[PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method):

- Imposta [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) con l’ID cliente e [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) con l’ID del metodo di pagamento.
- Impostare [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) a `true` per indicare che il cliente non è nel flusso di pagamento durante un tentativo di pagamento e non può soddisfare una richiesta di autenticazione effettuata da un partner, come una società emittente della carta, una banca o altro istituto di pagamento. Se, durante il flusso di pagamento, un partner richiede l’autenticazione, Stripe richiede le esenzioni utilizzando le informazioni sul cliente ricavate da una transazione precedente *on-session* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Se le condizioni per l’esenzione non sono soddisfatte, PaymentIntent potrebbe generare un errore.
- Imposta il valore di [conferma](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) della proprietà PaymentIntent a`true`, per far sì che la conferma avvenga immediatamente quando crei il PaymentIntent.

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "customer={{CUSTOMER_ID}}" \
  -d "payment_method={{PAYMENTMETHOD_ID}}" \
  -d off_session=true \
  -d confirm=true
```

Se un tentativo di pagamento non riesce, non riesce anche la richiesta con un codice di stato HTTP 402 e il PaymentIntent stato è *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Avvisa il cliente di tornare all’applicazione (ad esempio, inviando un’email o una notifica in-app) e indirizza il tuo cliente a una nuova sessione di completamento della transazione per selezionare un altro metodo di pagamento.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "line_items[0][price_data][currency]=usd" \
  -d "line_items[0][price_data][product_data][name]=T-shirt" \
  -d "line_items[0][price_data][unit_amount]=1099" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d ui_mode=elements \
  --data-urlencode "return_url=https://example.com/return"
```


# API Setup Intents

> This is a API Setup Intents for when payment-ui is elements. View the full page at https://docs.stripe.com/payments/save-and-reuse?payment-ui=elements.

L’[API Setup Intents](https://docs.stripe.com/api/setup_intents.md) ti consente di salvare i dati di pagamento di un cliente senza un pagamento iniziale. Questa funzionalità è utile se vuoi configurare i pagamenti dei clienti quando li attivi e addebitare gli importi in un secondo momento, quando sono offline.

Utilizza questa integrazione per configurare i pagamenti ricorrenti o per creare pagamenti una tantum con un importo finale determinato in un secondo momento, spesso dopo che il cliente riceve il servizio.

> #### Transazioni con carta presente
> 
> Le transazioni con carta presente, come la raccolta dei dati della carta tramite Stripe Terminal, utilizzano una procedura diversa per salvare il metodo di pagamento. Per ulteriori informazioni, consulta la [documentazione di Terminal](https://docs.stripe.com/terminal/features/saving-payment-details/save-directly.md).

## Conformità

Quando salvi i dati di pagamento di un cliente, sei responsabile della conformità a tutte le leggi, le normative e le regole del circuito applicabili. Questi requisiti si applicano generalmente se vuoi salvare il metodo di pagamento del cliente per un uso futuro, ad esempio visualizzando il metodo di pagamento del cliente nel flusso di pagamento per un acquisto futuro o addebitando il pagamento quando il cliente non sta utilizzando attivamente il sito web o l’app Aggiungi al tuo sito web o alla tua app delle condizioni che indichino come intendi salvare i dati del metodo di pagamento e permetti ai clienti di accettare o meno queste condizioni

Quando salvi un metodo di pagamento, puoi utilizzarlo solo per l’utilizzo specifico che hai incluso nelle tue condizioni. Per effettuare un addebito su un metodo di pagamento quando un cliente è offline e salvarlo come opzione per acquisti futuri, accertati di raccogliere esplicitamente il consenso del cliente per questo uso specifico. Ad esempio, includi una casella di controllo “Salva la mia modalità di pagamento per uso futuro” per raccogliere il consenso.

Per eseguire un addebito quando il cliente è offline, assicurati che i tuoi termini includano quanto segue:

- Il consenso del cliente a disporre un pagamento o una serie di pagamenti per suo conto per determinate transazioni.
- La tempistica e la frequenza dei pagamenti previste (ad esempio, se gli addebiti sono per rate programmate, pagamenti di abbonamenti o ricariche non programmate).
- Il modo in cui determini l’importo del pagamento.
- I tuoi termini di cancellazione, se la modalità di pagamento è per un servizio in abbonamento.

Assicurati di conservare una copia scritta del consenso fornito dal cliente relativamente a questi termini.

> Se devi utilizzare la conferma manuale lato server o la tua integrazione richiede l’indicazione separata del metodo di pagamento, consulta la nostra [guida alternativa](https://docs.stripe.com/payments/save-and-reuse-cards-only.md).

## Configurare Stripe [Lato server]

Innanzitutto [crea un account Stripe](https://dashboard.stripe.com/register) o [accedi](https://dashboard.stripe.com/login).

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

#### Ruby

```bash
# Available as a gem
sudo gem install stripe
```

```ruby
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'
```

## Abilitare modalità di pagamento

Visualizza le [impostazioni delle modalità di pagamento](https://dashboard.stripe.com/settings/payment_methods) e abilita le modalità di pagamento che vuoi accettare. Per creare un *SetupIntent* (The Setup Intents API lets you build dynamic flows for collecting payment method details for future payments. It tracks the lifecycle of a payment setup flow and can trigger additional authentication steps if required by law or by the payment method) è necessario che sia abilitata almeno una modalità di pagamento.

Per impostazione predefinita, Stripe abilita le carte e altri metodi di pagamento tra i più utilizzati per aiutarti a raggiungere più clienti. Detto ciò, ti consigliamo di attivare ulteriori metodi pertinenti per la tua attività e i tuoi clienti. Per ulteriori informazioni sul supporto di prodotti e metodi di pagamento, consulta la sezione [Supporto per il metodo di pagamento](https://docs.stripe.com/payments/payment-methods/payment-method-support.md). Per le commissioni consulta la nostra [pagina delle tariffe](https://stripe.com/pricing/local-payment-methods).

## Creare un oggetto Customer [Lato server]

Per configurare una modalità di pagamento per pagamenti futuri, è necessario associarla a un *Customer* (Customer objects represent customers of your business. They let you reuse payment methods and give you the ability to track multiple payments). Crea un oggetto `Customer` quando il cliente crea un account con la tua azienda. Gli oggetti `Customer` permettono di riutilizzare le modalità di pagamento e di monitorare più pagamenti.

> #### Confronta i riferimenti relativi a Customers v1 e Accounts v2
> 
> Se la tua piattaforma Connect utilizza [account configurati dal cliente](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer), utilizza la nostra [guida](https://docs.stripe.com/connect/use-accounts-as-customers.md) per sostituire i riferimenti `Customer` ed eventi nel tuo codice con la documentazione di riferimento dell’API Accounts v2 equivalente.

```curl
curl -X POST https://api.stripe.com/v1/customers \
  -u "<<YOUR_SECRET_KEY>>:"
```

## Creare un SetupIntent [Lato server]

> Se vuoi presentare Payment Element senza prima creare un SetupIntent, consulta la sezione [Raccogliere i dati di pagamento prima di creare un intento](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=setup).

Un [SetupIntent](https://docs.stripe.com/api/setup_intents.md) è un oggetto che rappresenta la tua intenzione di configurare un metodo di pagamento per i pagamenti futuri di un cliente. I metodi di pagamento mostrati ai clienti durante il completamento della transazione sono inclusi anche nel `SetupIntent`. Puoi consentire Stripe di acquisire automaticamente i metodi di pagamento dalle impostazioni della Dashboard oppure puoi elencarli manualmente.

A meno che la tua integrazione non richieda un’opzione con codice per offrire le modalità di pagamento, Stripe consiglia l’opzione automatica. Questo perché Stripe valuta le limitazioni delle modalità di pagamento, la valuta e altri parametri per determinare l’elenco delle modalità di pagamento accettate. Le modalità di pagamento che migliorano la conversione e che sono più pertinenti alla valuta e alla posizione del cliente hanno la priorità. Le modalità di pagamento con priorità più bassa sono nascoste sotto un menu extra.

#### Gestisci le modalità di pagamento dalla Dashboard

Alcuni metodi di pagamento non possono essere salvati per pagamenti futuri e i clienti non le vedono come opzioni quando configurano pagamenti futuri. Per ulteriori informazioni sulla gestione dei metodi di pagamento, consulta [Opzioni di integrazione dei metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md).

Puoi creare facoltativamente un SetupIntent con `automatic_payment_methods` abilitato; il SetupIntent viene creato utilizzando le modalità di pagamento configurate nella Dashboard. Specificare il parametro `automatic_payment_methods` è facoltativo, perché Stripe ne abilita la funzionalità per impostazione predefinita nell’ultima versione dell’API.

Puoi gestire le modalità di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina la restituzione delle modalità di pagamento idonee in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento.

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d "automatic_payment_methods[enabled]=true"
```

#### Elencare manualmente le modalità di pagamento

Crea sul tuo server un SetupIntent con l’elenco dei [metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md) che desideri accettare.

```curl
curl https://api.stripe.com/v1/setup_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d customer={{CUSTOMER_ID}} \
  -d "payment_method_types[]=bancontact" \
  -d "payment_method_types[]=card" \
  -d "payment_method_types[]=ideal"
```

### Recuperare la chiave privata client

L’oggetto SetupIntent contiene una *chiave privata client* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)), che il lato client usa per completare la procedura di pagamento in modo sicuro. Per specificare la chiave privata sul lato client, puoi utilizzare approcci diversi.

#### Applicazione a pagina singola

Recupera la chiave privata client dall’endpoint sul server utilizzando la funzione `fetch`del browser. Questo approccio è più adatto quando il lato client è un’applicazione con un’unica pagina, in particolare creata con un framework front-end moderno come React. Crea l’endpoint server che invia la chiave privata client:

#### Ruby

```ruby
get '/secret' do
  intent = # ... Create or retrieve the SetupIntent
  {client_secret: intent.client_secret}.to_json
end
```

Quindi recupera la chiave privata client con JavaScript sul lato client:

```javascript
(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();
```

#### Rendering lato server

Trasmetti la chiave privata client al client dal server. Questo approccio è più adatto se l’applicazione genera contenuti statici sul server prima di inviarli al browser.

Aggiungi la [client_secret](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) nel modulo di pagamento. Nel codice lato server, recupera la chiave privata client dal SetupIntent:

#### Ruby

```erb
<form id="payment-form" data-secret="<%= @intent.client_secret %>">
  <div id="payment-element">
    <!-- placeholder for Elements -->
  </div>
  <button id="submit">Submit</button>
</form>
```

```ruby
get '/checkout' do
  @intent = # ... Fetch or create the SetupIntent
  erb :checkout
end
```

> #### Utilizzo di Radar
> 
> Quando viene salvato il metodo di pagamento di un cliente senza un pagamento iniziale, [Radar](https://docs.stripe.com/radar.md) non agisce sul SetupIntent per impostazione predefinita. Se vuoi attivare questa opzione per impostazione predefinita, vai su [Impostazioni Radar](https://dashboard.stripe.com/settings/radar) e attiva **Usa Radar per i metodi di pagamento salvati per uso futuro**.

## Acquisire i dati di pagamento [Lato client]

A questo punto è tutto pronto per acquisire i dati di pagamento sul client con [Payment Element](https://docs.stripe.com/payments/payment-element.md). Payment Element è un componente di interfaccia utente preintegrato che semplifica l’acquisizione dei dati di pagamento per vari metodi di pagamento.

Payment Element contiene un iframe che invia a Stripe informazioni sul pagamento in modo sicuro tramite una connessione HTTPS. Affinché l’integrazione funzioni, l’indirizzo della pagina di pagamento deve iniziare con `https://` anziché con `http://`. Puoi testare l’integrazione senza usare questo metodo, ma ricorda di [abilitare la connessione HTTPS](https://docs.stripe.com/security/guide.md#tls) quando sarà tutto pronto per accettare i pagamenti in modalità live.

#### HTML + JS

### Configurare Stripe.js

Payment Element è automaticamente disponibile come funzione di Stripe.js. Includi lo script Stripe.js nella tua pagina di pagamento aggiungendolo all’oggetto `head` del tuo file HTML. Carica sempre Stripe.js direttamente da js.stripe.com per mantenere la conformità alle norme PCI. Non includere lo script in un pacchetto e non ospitarne una copia personale.

```html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/dahlia/stripe.js"></script>
</head>
```

Crea un’istanza di Stripe con il seguente JavaScript nella pagina di completamento del pagamento:

```javascript
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');
```

### Aggiungere Payment Element alla pagina di configurazione del pagamento

Payment Element deve avere uno spazio dedicato nella pagina di configurazione del pagamento. Crea un nodo DOM (contenitore) vuoto con ID univoco nel modulo di pagamento:

```html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>
```

Dopo il caricamento del modulo precedente, crea un’istanza del componente Payment Element e montala sul nodo DOM del contenitore. Specifica la [chiave privata client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) dal passaggio precedente in `options` al momento della creazione di un’istanza di [Elements](https://docs.stripe.com/js/elements_object/create).

```javascript
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements using the SetupIntent's client secretconst elements = stripe.elements(options);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

```

Il Payment Element visualizza un modulo dinamico che consente al cliente di scegliere una modalità di pagamento. Per ogni modalità di pagamento, il modulo richiede automaticamente al cliente di inserire tutti i dati di pagamento necessari.

### Personalizza l’aspetto

Personalizza il Payment Element in modo che sia coerente con il design del tuo sito passando l’[oggetto aspetto](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) in `options` quando crei l’istanza `elements`. Stripe Elements è una raccolta di componenti dell’interfaccia utente pronti all’uso. Per personalizzare ulteriormente il modulo o raccogliere informazioni diverse sui clienti, consulta la [documentazione di Elements](https://docs.stripe.com/payments/elements.md).

### Richiedi il token esercente di Apple Pay

Se accetti i pagamenti con Apple Pay, ti consigliamo di configurare l’[opzione](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` per modificare ciò che viene visualizzato nell’interfaccia di Apple Pay. In questo modo vengono utilizzati i [token esercente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) di Apple Pay. L’esempio seguente mostra una configurazione per un pagamento che inizia il 5 gennaio 2030. Queste informazioni si rifletteranno nell’interfaccia di Apple Pay.

```javascript
const paymentElement = elements.create('payment', {
  applePay: {
    deferredPaymentRequest: {
      paymentDescription: 'My deferred payment',
      managementURL: 'https://example.com/billing',
      deferredBilling: {
        amount: 2500,
        label: 'Deferred Fee',
        deferredPaymentDate: new Date('2030-01-05')
      },
    }
  },
  // Other options
});
```

#### React

### Configurare Stripe.js

Installa [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) e il [caricatore Stripe.js](https://www.npmjs.com/package/@stripe/stripe-js) dal registro di sistema pubblico npm:

```bash
npm install --save @stripe/react-stripe-js @stripe/stripe-js
```

### Aggiungere e configurare il provider Elements alla pagina di configurazione del pagamento

Per utilizzare il componente Payment Element, includi il componente della pagina di configurazione del pagamento in un [provider Elements](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider). Chiama `loadStripe` con la chiave pubblicabile e specifica la `Promise` restituita nel provider `Elements`. Passa anche la [chiave privata client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) dal passaggio precedente al provider `Elements` come `options`.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import SetupForm from './SetupForm';

// Make sure to call `loadStripe` outside of a component's render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = loadStripe('<<YOUR_PUBLISHABLE_KEY>>');

function App() {
  const options = {
    // passing the SetupIntent's client secret
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <SetupForm />
    </Elements>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));
```

### Aggiungere Payment Element

Utilizza il componente `PaymentElement` per creare il modulo:

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const SetupForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default SetupForm;
```

Stripe Elements è un insieme di componenti dell’interfaccia utente preintegrati. Per personalizzare ulteriormente il modulo o raccogliere altre informazioni sul cliente, consulta la [documentazione di Elements](https://docs.stripe.com/payments/elements.md).

Il Payment Element visualizza un modulo dinamico che consente al cliente di scegliere una modalità di pagamento. Per ogni modalità di pagamento, il modulo richiede automaticamente al cliente di inserire tutti i dati di pagamento necessari.

### Personalizza l’aspetto

Personalizza Payment Element in base al design del tuo sito specificando l’[oggetto appearance](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) in `options` al momento della creazione del provider `Elements`.

### Richiedi il token esercente di Apple Pay

Se accetti i pagamenti con Apple Pay, ti consigliamo di configurare l’[opzione](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-applePay) `applePay` per modificare ciò che viene visualizzato nell’interfaccia di Apple Pay. In questo modo vengono utilizzati i [token esercente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) di Apple Pay. L’esempio seguente mostra una configurazione per un pagamento che inizia il 5 gennaio 2030. Queste informazioni si rifletteranno nell’interfaccia di Apple Pay.

```jsx
import React from 'react';
import {PaymentElement} from '@stripe/react-stripe-js';

const SetupForm = () => {
  const options = {
    applePay: {
      deferredPaymentRequest: {
        paymentDescription: 'My deferred payment',
        managementURL: 'https://example.com/billing',
        deferredBilling: {
          amount: 2500,
          label: 'Deferred Fee',
          deferredPaymentDate: new Date('2030-01-05')
        },
      }
    },
    // Other options
  };

  return (
    <form><PaymentElement options={options} />
      <button>Submit</button>
    </form>
  );
};

export default SetupForm;
```

### Configura valuta

Quando utilizzi i SetupIntent con [automatic_payment_methods](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-automatic_payment_methods), puoi specificare la valuta quando [crei il Payment Element](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-currency). Il Payment Element visualizza i metodi di pagamento abilitati che supportano la valuta specificata. Per ulteriori informazioni, consulta [la documentazione su Payment Element](https://docs.stripe.com/payments/payment-methods/integration-options.md).

### Raccogli indirizzi

By default, the Payment Element only collects the necessary billing address details. Some behavior, such as [calculating tax](https://docs.stripe.com/api/tax/calculations/create.md) or entering shipping details, requires your customer’s full address. You can:

- Utilizza [Address Element](https://docs.stripe.com/elements/address-element.md) per sfruttare le funzioni di completamento automatico e localizzazione per raccogliere l’indirizzo completo dei tuoi clienti. Ciò contribuisce a garantire il calcolo più accurato delle imposte.
- Raccogli i dettagli dell’indirizzo utilizzando il tuo modulo personalizzato.

## Optional: Link nella pagina di pagamento [Lato client]

Consenti ai clienti di pagare più rapidamente utilizzando [Link](https://docs.stripe.com/payments/link.md) in [Payment Element](https://docs.stripe.com/payments/payment-element.md). È possibile compilare automaticamente le informazioni per qualsiasi cliente connesso che già utilizza Link, indipendentemente dal fatto che abbia inizialmente salvato le proprie informazioni in Link con un’altra attività. L’integrazione predefinita di Payment Element include un avviso di Link sul modulo della carta. Per gestire Link in Payment Element, vai alle [impostazioni del metodo di pagamento](https://dashboard.stripe.com/settings/payment_methods).
![Esegui l'autenticazione o l'iscrizione a Link direttamente nel Payment Element durante il pagamento](https://b.stripecdn.com/docs-statics-srv/assets/link-in-pe.2efb5138a4708b781b8a913ebddd9aba.png)

Raccogli l’indirizzo e-mail del cliente per l’autenticazione o la registrazione su Link

### Opzioni di integrazione

Esistono due modi per integrare Link con il Payment Element. Tra questi, Stripe consiglia di specificare un indirizzo email del cliente nel Payment Element (se disponibile). Ricorda di considerare come funziona la procedura di pagamento quando decidi tra queste opzioni:

| Opzione di integrazione                                                   | Flusso di pagamento                                                                                                                                                                                                                   | Descrizione                                                                                                                                                                                                                                                        |
| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Specifica un indirizzo email del cliente in Payment Element (Recommended) | - Il cliente inserisce il proprio indirizzo email prima di raggiungere la pagina di pagamento (in una precedente fase di creazione dell’account, ad esempio).
  - Preferisci utilizzare il campo di inserimento dell’indirizzo email. | Specifica sistematicamente l’indirizzo email del cliente nel Payment Element. In questo scenario, un cliente effettua l’autenticazione a Link direttamente tramite il modulo di pagamento e non da un componente dell’interfaccia utente separato.                 |
| Raccogliere l’indirizzo e-mail del cliente in Payment Element             | - I tuoi clienti possono scegliere di inserire il loro indirizzo email ed effettuano l’autenticazione o l’iscrizione a Link direttamente nel Payment Element durante il pagamento.
  - Non è richiesta alcuna modifica del codice.    | Se un cliente non si è iscritto a Link e sceglie un metodo di pagamento supportato nel Payment Element, gli viene richiesto di salvare i propri dati tramite Link. Per coloro che si sono già iscritti, Link compila automaticamente le informazioni di pagamento. |

Utilizza i [valori predefiniti](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options-defaultValues) per specificare un indirizzo email di un cliente in Payment Element.

```javascript
const paymentElement = elements.create('payment', {
  defaultValues: {
    billingDetails: {
      email: 'foo@bar.com',
    }
  },
  // Other options
});
```

Per ulteriori informazioni, leggi come [creare una pagina di checkout personalizzata che includa ](https://docs.stripe.com/payments/link/add-link-elements-integration.md).

## Optional: Salva e recupera i metodi di pagamento del cliente

Puoi configurare Payment Element per salvare i metodi di pagamento del cliente per usi futuri. Questa sezione mostra come integrare la [funzione dei metodi di pagamento salvate](https://docs.stripe.com/payments/save-customer-payment-methods.md), che consente a Payment Element di:

- Richiedere agli acquirenti il consenso per il salvataggio di un metodo di pagamento
- Salva le modalità di pagamento quando gli acquirenti forniscono il consenso
- Mostra le modalità di pagamento salvate agli acquirenti per gli acquisti futuri
- [Aggiorna automaticamente le carte smarrite o scadute](https://docs.stripe.com/payments/cards/overview.md#automatic-card-updates) quando gli acquirenti le sostituiscono
![Payment Element e una casella di controllo del metodo di pagamento salvato](https://b.stripecdn.com/docs-statics-srv/assets/spm-save.fe0b24afd0f0a06e0cf4eecb0ce2403a.png)

Salva i metodi di pagamento.
![Payment Element con un metodo di pagamento salvato selezionato](https://b.stripecdn.com/docs-statics-srv/assets/spm-saved.5dba5a8a190a9a0e9f1a99271bed3f4b.png)

Riutilizza un metodo di pagamento salvato in precedenza.

### Abilita il salvataggio del metodo di pagamento in Payment Element

Crea una [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) sul tuo server fornendo l’[ID cliente](https://docs.stripe.com/api/customers/object.md#customer_object-id) e abilitando il componente [payment_element](https://docs.stripe.com/api/customer_sessions/object.md#customer_session_object-components-payment_element) per la tua sessione. Configura le [funzionalità](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) dei metodi di pagamento salvati che vuoi abilitare. Ad esempio, abilitando [payment_method_save](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_save), viene visualizzata una casella di controllo che consente ai clienti di salvare i dati di pagamento per usi futuri.

Puoi specificare `setup_future_usage` in una PaymentIntent o in una sessione di Checkout per ignorare il comportamento predefinito per il salvataggio dei metodi di pagamento. In questo modo, salvi automaticamente il metodo di pagamento per uso futuro, anche se il cliente non sceglie esplicitamente di salvarlo.

> Se intendi specificare `setup_future_usage`, evita di impostare `payment_method_save_usage` nella stessa transazione di pagamento perché questo causa un errore di integrazione.

#### Ruby

```ruby

# Don't put any keys in code. See https://docs.stripe.com/keys-best-practices.
# Find your keys at https://dashboard.stripe.com/apikeys.
Stripe.api_key = '<<YOUR_SECRET_KEY>>'

post '/create-intent-and-customer-session' do
  intent = Stripe::SetupIntent.create({
    # In the latest version of the API, specifying the `automatic_payment_methods` parameter
    # is optional because Stripe enables its functionality by default.
    automatic_payment_methods: {enabled: true},
    customer: {{CUSTOMER_ID}},
  })
  customer_session = Stripe::CustomerSession.create({
    customer: {{CUSTOMER_ID}},
    components: {
      payment_element: {
          enabled: true,
          features: {
            payment_method_redisplay: 'enabled',
            payment_method_save: 'enabled',
            payment_method_save_usage: 'off_session',
            payment_method_remove: 'enabled',
          },
        },
    },
  })
  {
    client_secret: intent.client_secret,
    customer_session_client_secret: customer_session.client_secret
  }.to_json
end
```

La tua istanza Elements utilizza la *chiave privata client* (A client secret is used with your publishable key to authenticate a request for a single object. Each client secret is unique to the object it's associated with) della CustomerSession per accedere ai metodi di pagamento salvati del cliente. [Gestisci gli errori](https://docs.stripe.com/error-handling.md) correttamente quando crei l’oggetto CustomerSession. Se si verifica un errore, non devi fornire la chiave privata client della CustomerSession all’istanza Elements, in quanto è facoltativa.

Crea l’istanza Elements utilizzando le chiavi private client sia per SetupIntent che per CustomerSession. Poi utilizza questa istanza di Elements per creare un Payment Element.

```javascript
// Create the CustomerSession and obtain its clientSecret
const res = await fetch("/create-intent-and-customer-session", {
  method: "POST"
});

const {
  customer_session_client_secret: customerSessionClientSecret
} = await res.json();

const elementsOptions = {
  clientSecret: '{{CLIENT_SECRET}}',customerSessionClientSecret,
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret
// and CustomerSession's client secret obtained in a previous step
const elements = stripe.elements(elementsOptions);

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');
```

> Se permetti agli acquirenti di rimuovere i metodi di pagamento salvati abilitando [payment_method_remove](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features-payment_method_remove), ci saranno effetti sugli abbonamenti che dipendono da tale metodo di pagamento. La rimozione del metodo di pagamento scollega il [PaymentMethod](https://docs.stripe.com/api/payment_methods.md) dal [cliente](https://docs.stripe.com/api/customers.md).

Quando confermi il SetupIntent, Stripe.js controlla automaticamente l’impostazione [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay) sul PaymentMethod, a condizione che il cliente abbia selezionato la casella per salvare i propri dati di pagamento.

### Rileva la selezione di una modalità di pagamento salvata

Quando viene selezionata una modalità di pagamento salvata, per controllare i contenuti dinamici ascolta l’evento `change` del Payment Element, che viene popolato con la modalità di pagamento selezionata.

```javascript
paymentElement.on('change', function(event) {
  if (event.value.payment_method) {
    // Control dynamic content if a saved payment method is selected
  }
})
```

## Inviare i dati di pagamento a Stripe [Lato client]

Usa [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) per completare la configurazione con i dati raccolti da Payment Element. Fornisci a questa funzione un [return_url](https://docs.stripe.com/api/setup_intents/create.md#create_setup_intent-return_url) in modo che Stripe possa reindirizzare l’utente dopo il completamento della configurazione. L’utente può essere dapprima reindirizzato su un sito intermedio, come una pagina di autorizzazione bancaria, e poi al `return_url`.

Se il cliente salva i dati della carta, li reindirizziamo immediatamente al `return_url` quando la configurazione ha esito positivo. Se vuoi impedire il reindirizzamento per i pagamenti con carta, puoi impostare il [reindirizzamento](https://docs.stripe.com/js/setup_intents/confirm_setup#confirm_setup_intent-options-redirect) su `if_required`. In questo modo vengono reindirizzati solo i clienti che utilizzano metodi di pagamento basati sul reindirizzamento.

#### HTML + JS

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/account/payments/setup-complete',
    }
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

Per chiamare [stripe.confirmSetup](https://docs.stripe.com/js/setup_intents/confirm_setup) dal componente del modulo di pagamento, utilizza gli hook [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) e [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook).

Se preferisci utilizzare i componenti di classe tradizionali anziché gli hook, puoi utilizzare un [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer).

```jsx
import React, {useState} from 'react';
import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';

const SetupForm = () => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState(null);

  const handleSubmit = async (event) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    event.preventDefault();

    if (!stripe || !elements) {
      // Stripe.js hasn't yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return null;
    }
const {error} = await stripe.confirmSetup({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://example.com/account/payments/setup-complete',
      },
    });

    if (error) {
      // This point will only be reached if there is an immediate error when
      // confirming the payment. Show error to your customer (for example, payment
      // details incomplete)
      setErrorMessage(error.message);
    } else {
      // Your customer will be redirected to your `return_url`. For some payment
      // methods like iDEAL, your customer will be redirected to an intermediate
      // site first to authorize the payment, then redirected to the `return_url`.
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement />
      <button disabled={!stripe}>Submit</button>
      {/* Show error message to your customers */}
      {errorMessage && <div>{errorMessage}</div>}
    </form>
  )
};

export default SetupForm;
```

Assicurati che `return_url` corrisponda a una pagina del tuo sito web che [fornisce lo stato](https://docs.stripe.com/payments/payment-intents/verifying-status.md) del `SetupIntent`. Stripe fornisce i seguenti parametri della query dell’URL per verificare lo stato quando si reindirizza il cliente al `return_url`. Puoi anche aggiungere parametri personalizzati alla query quando fornisci il `return_url`, e persistono attraverso processo di reindirizzamento.

| Parametro                    | Descrizione                                                                                                                                   |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| `setup_intent`               | Identificativo univoco per il `SetupIntent`                                                                                                   |
| `setup_intent_client_secret` | La [chiave privata client](https://docs.stripe.com/api/setup_intents/object.md#setup_intent_object-client_secret) dell’oggetto `SetupIntent`. |

Puoi usare [stripe.retrieveSetupIntent](https://docs.stripe.com/js/setup_intents/retrieve_setup_intent) per recuperare il SetupIntent usando il parametro di ricerca `setup_intent_client_secret`. Se la conferma del SetupIntent ha esito positivo, l’ID `PaymentMethod` risultante (in `result.setupIntent.payment_method`) viene salvato per il `Customer` fornito.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('{PUBLISHABLE_KEY}');

// Retrieve the "setup_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'setup_intent_client_secret'
);

// Retrieve the SetupIntent
stripe.retrieveSetupIntent(clientSecret).then(({setupIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the SetupIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (setupIntent.status) {
    case 'succeeded': {
      message.innerText = 'Success! Your payment method has been saved.';
      break;
    }

    case 'processing': {
      message.innerText = "Processing payment details. We'll update you when processing is complete.";
      break;
    }

    case 'requires_payment_method': {
      message.innerText = 'Failed to process payment details. Please try another payment method.';

      // Redirect your user back to your payment page to attempt collecting
      // payment again

      break;
    }
  }
});
```

#### React

```jsx

// PaymentStatus.jsx

import React, {useState, useEffect} from 'react';
import {useStripe} from '@stripe/react-stripe-js';

const PaymentStatus = () => {
  const stripe = useStripe();
  const [message, setMessage] = useState(null);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    // Retrieve the "setup_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'setup_intent_client_secret'
    );

    // Retrieve the SetupIntent
    stripe
      .retrieveSetupIntent(clientSecret)
      .then(({setupIntent}) => {
        // Inspect the SetupIntent `status` to indicate the status of the payment
        // to your customer.
        //
        // Some payment methods will [immediately succeed or fail][0] upon
        // confirmation, while others will first enter a `processing` state.
        //
        // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
        switch (setupIntent.status) {
          case 'succeeded':
            setMessage('Success! Your payment method has been saved.');
            break;

          case 'processing':
            setMessage("Processing payment details. We'll update you when processing is complete.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Failed to process payment details. Please try another payment method.');
            break;
        }
      });
  }, [stripe]);


  return message
};

export default PaymentStatus;
```

> Se disponi di strumenti che tracciano la sessione del browser del cliente, potresti aver bisogno di aggiungere il dominio `stripe.com` all’elenco di esclusione dei referrer. I reindirizzamenti fanno sì che alcuni strumenti creino nuove sessioni, il che ti impedisce di tracciare la sessione completa.

## Addebita in un secondo momento l'importo sulla modalità di pagamento salvata [Lato server]

> #### Conformità
> 
> Quando salvi i dati di pagamento di un cliente, sei responsabile della conformità a tutte le leggi, le normative e le regole del circuito applicabili. Quando presenti al cliente finale i metodi di pagamento utilizzati in passato per acquisti futuri, accertati di elencare i metodi di pagamento per i quali hai raccolto il consenso a salvare i dati del metodo di pagamento per gli usi futuri specifici. Per differenziare i metodi di pagamento legati ai clienti che possono o non possono essere presentati al cliente finale come metodo di pagamento salvato per acquisti futuri, utilizza il parametro [allow_redisplay](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-allow_redisplay).

Quando hai la certezza di voler addebitare l’importo al cliente *al di fuori della sessione* (A payment is described as off-session if it occurs without the direct involvement of the customer, using previously-collected payment information), utilizza gli ID Customer e PaymentMethod per creare un PaymentIntent. Per trovare un metodo di pagamento per l’addebito, elenca i metodi di pagamento associati al tuo cliente. In questo esempio sono elencate le carte, ma puoi aggiungere qualsiasi altro [tipo](https://docs.stripe.com/api/payment_methods/object.md#payment_method_object-type) supportato.

```curl
curl -G https://api.stripe.com/v1/payment_methods \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "customer={{CUSTOMER_ID}}" \
  -d type=card
```

Quando hai gli ID Customer e PaymentMethod, crea un PaymentIntent con l’importo e la valuta del pagamento. Per effettuare il pagamento al di fuori della sessione, imposta alcuni altri parametri:

- Imposta [off_session](https://docs.stripe.com/api/payment_intents/confirm.md#confirm_payment_intent-off_session) su `true` per indicare che il cliente non si trova nel tuo flusso di pagamento durante il tentativo di pagamento e non può soddisfare una richiesta di autenticazione fatta da un partner, come un emittente di carte, una banca o un altro istituto di pagamento. Se, durante il flusso di pagamento, un partner richiede l’autenticazione, Stripe richiede le esenzioni utilizzando le informazioni del cliente presenti in una precedente transazione *all’interno della sessione* (A payment is described as on-session if it occurs while the customer is actively in your checkout flow and able to authenticate the payment method). Se le condizioni per l’esenzione non sono soddisfatte, PaymentIntent potrebbe generare un errore.
- Imposta su `true` il valore della proprietà [confirm](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-confirm) del PaymentIntent. Di conseguenza, viene generata una conferma immediata al momento della creazione del PaymentIntent.
- Imposta [payment_method](https://docs.stripe.com/api.md#create_payment_intent-payment_method) sull’ID del PaymentMethod e [customer](https://docs.stripe.com/api.md#create_payment_intent-customer) sull’ID del cliente.

#### curl

```bash
curl https://api.stripe.com/v1/payment_intents \
  -u <<YOUR_SECRET_KEY>>: \
  -d amount=1099 \
  -d currency=usd \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \-d customer="{{CUSTOMER_ID}}" \
  -d payment_method="{{PAYMENT_METHOD_ID}}" \
  -d return_url="https://example.com/order/123/complete" \
  -d off_session=true \
  -d confirm=true
```

Quando un tentativo di pagamento non va a buon fine, anche la richiesta non riesce. Viene visualizzato un codice di stato HTTP 402 e lo stato del PaymentIntent è *requires\_payment\_method* (This status appears as "requires_source" in API versions before 2019-02-11). Devi chiedere al cliente di tornare nell’applicazione per completare il pagamento (ad esempio inviando un’email o una notifica in-app).

Verifica il codice dell’[errore](https://docs.stripe.com/api/errors/handling.md) generato dalla libreria dell’API Stripe. Se il pagamento non è riuscito a causa di un codice di rifiuto [authentication_required](https://docs.stripe.com/declines/codes.md), utilizza la chiave privata client del PaymentIntent rifiutato con confirmPayment per consentire al cliente di autenticare il pagamento.

```javascript
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmPayment({
    // The client secret of the PaymentIntent
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the payment. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

> Il completamento della fase `stripe.confirmPayment` può richiedere diversi secondi. Nel frattempo, disabilita il nuovo invio del modulo e mostra un indicatore di attesa, ad esempio una rotellina che gira. Se viene restituito un errore, mostralo al cliente, riabilita il modulo e nascondi l’indicatore di attesa. Se il cliente deve eseguire operazioni aggiuntive per completare il pagamento, ad esempio l’autenticazione, Stripe.js guida l’utente nella procedura.

Se il pagamento non va a buon fine per altri motivi, ad esempio fondi insufficienti sulla carta, indirizza il cliente a una pagina di pagamento dove inserire una nuova modalità di pagamento. Puoi riutilizzare l’oggetto PaymentIntent esistente per tentare di nuovo il pagamento con i dati della nuova modalità di pagamento.

## Testa l'integrazione

Usa i dettagli di pagamento e la pagina di reindirizzamento di test per verificare se il funzionamento dell’integrazione è quello atteso. Per visualizzare i dettagli relativi a ciascuna modalità di pagamento, fai clic sulle seguenti schede:

#### Carte

| Modalità di pagamento | Scenario                                                                                                                                                                                                                                                                                                                             | Come eseguire il test                                                                                                                              |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Carta di credito      | La configurazione della carta ha esito positivo e non richiede l’*autenticazione* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase). | Compila il modulo per la carta di credito usando il numero di carta di credito `4242 4242 4242 4242` con qualsiasi scadenza, CVC e codice postale. |
| Carta di credito      | La carta richiede l’autenticazione per la configurazione iniziale, poi ha esito positivo per i pagamenti successivi.                                                                                                                                                                                                                 | Compila il modulo per la carta di credito usando il numero di carta di credito `4000 0025 0000 3155` con qualsiasi scadenza, CVC e codice postale. |
| Carta di credito      | La carta richiede l’autenticazione per la configurazione iniziale e per i pagamenti successivi.                                                                                                                                                                                                                                      | Compila il modulo per la carta di credito usando il numero di carta di credito `4000 0027 6000 3184` con qualsiasi scadenza, CVC e codice postale. |
| Carta di credito      | La carta viene rifiutata durante la configurazione.                                                                                                                                                                                                                                                                                  | Compila il modulo per la carta di credito usando il numero di carta di credito `4000 0000 0000 9995` con qualsiasi scadenza, CVC e codice postale. |

#### Reindirizzamenti bancari

| Modalità di pagamento | Scenario                                                                                                                                                      | Come eseguire il test                                                                                                                                                               |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Bancontact            | Il tuo cliente configura una modalità di pagamento con addebito diretto SEPA per uso futuro utilizzando Bancontact.                                           | Usa qualsiasi nome nel modulo Bancontact, quindi fai clic su **Autorizza configurazione test** nella pagina di reindirizzamento.                                                    |
| Bancontact            | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento di Bancontact.                                                             | Usa qualsiasi nome nel modulo Bancontact, quindi fai clic su **Interrompi configurazione test** nella pagina di reindirizzamento.                                                   |
| Addebito diretto BECS | Il tuo cliente paga correttamente con addebito diretto BECS                                                                                                   | Compila il modulo usando il numero di conto `900123456`. Il PaymentIntent confermato inizialmente passerà prima nello stato `processing` e, 3 minuti dopo, nello stato `succeeded`. |
| Addebito diretto BECS | Il pagamento del tuo cliente non va a buon fine e restituisce un codice di errore `account_closed`.                                                           | Compila il modulo usando il numero di conto `111111113`.                                                                                                                            |
| iDEAL                 | Il tuo cliente configura un metodo di pagamento con [addebito diretto SEPA](https://docs.stripe.com/payments/sepa-debit.md) per uso futuro utilizzando iDEAL. | Usa qualsiasi nome e banca nel modulo iDEAL, quindi fai clic su **Autorizza configurazione test** nella pagina di reindirizzamento.                                                 |
| iDEAL                 | Il cliente non riesce a eseguire l’autenticazione con la pagina di reindirizzamento di iDEAL.                                                                 | Scegli una banca e usa qualsiasi nome nel modulo iDEAL, quindi fai clic su **Interrompi configurazione test** nella pagina di reindirizzamento.                                     |

#### Addebiti bancari

| Modalità di pagamento | Scenario                                                                                       | Come eseguire il test                                                                                                                                                                                 |
| --------------------- | ---------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Addebito diretto SEPA | Il tuo cliente paga correttamente con addebito diretto SEPA                                    | Compila il modulo usando il numero di conto `AT321904300235473204`. Il PaymentIntent confermato passerà inizialmente allo stato in elaborazione e, tre minuti dopo, allo stato di pagamento riuscito. |
| Addebito diretto SEPA | Lo stato del Payment Intent del tuo cliente passa da `processing` a `requires_payment_method`. | Compila il modulo usando il numero di conto `AT861904300235473202`.                                                                                                                                   |

### Eseguire il test dell’addebito con un PaymentMethod con addebito SEPA salvato

La conferma del  SetupIntent  usando iDEAL, Bancontact o Sofort genera un *PaymentMethod* (PaymentMethods represent your customer's payment instruments, used with the Payment Intents or Setup Intents APIs) di tipo [addebito diretto SEPA](https://docs.stripe.com/payments/sepa-debit.md). L’addebito diretto SEPA è un metodo di pagamento con [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification) che transita da uno stato intermedio `processing` prima di passare a uno stato `succeeded` o `requires_payment_method` alcuni giorni dopo.

#### Email

Imposta `payment_method.billing_details.email` su uno dei valori seguenti per effettuare test sulle transizioni di stato del `PaymentIntent`. Puoi inserire del testo personalizzato all’inizio dell’indirizzo email, seguito da un carattere di sottolineatura. Ad esempio, `test_1_generatedSepaDebitIntentsFail@example.com` genera un PaymentMethod con addebito diretto SEPA che ha sempre esito negativo se utilizzato con un `PaymentIntent`.

| Indirizzo email                                                    | Descrizione                                                                                                              |
| ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |
| `generatedSepaDebitIntentsSucceed@example.com`                     | Lo stato del `PaymentIntent` passa da `processing` a `succeeded`.                                                        |
| `generatedSepaDebitIntentsSucceedDelayed@example.com`              | Lo stato di `PaymentIntent` passa da `processing` a `succeeded` dopo almeno tre minuti.                                  |
| `generatedSepaDebitIntentsFail@example.com`                        | Lo stato di `PaymentIntent` passa da `processing` to `requires_payment_method`.                                          |
| `generatedSepaDebitIntentsFailDelayed@example.com`                 | Lo stato di `PaymentIntent` passa da `processing` a `requires_payment_method` dopo almeno tre minuti.                    |
| `generatedSepaDebitIntentsSucceedDisputed@example.com`             | Lo stato del `PaymentIntent` passa da `processing` a `succeeded`, ma viene creata immediatamente una contestazione.      |
| `generatedSepaDebitIntentsFailsDueToInsufficientFunds@example.com` | Lo stato `PaymentIntent` passa da `processing` a `requires_payment_method` con il codice di errore `insufficient_funds`. |

#### PaymentMethod

Utilizza questi `PaymentMethods` per verificare le transizioni di stato del PaymentIntent. Questi token sono utili per eseguire test automatizzati e aggiungere immediatamente il PaymentMethod a SetupIntent sul server.

| Modalità di pagamento                                                | Descrizione                                                                                                              |
| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `pm_bancontact_generatedSepaDebitIntentsSucceed`                     | Lo stato del `PaymentIntent` passa da `processing` a `succeeded`.                                                        |
| `pm_bancontact_generatedSepaDebitIntentsDelayed`                     | Lo stato di `PaymentIntent` passa da `processing` a `succeeded` dopo almeno tre minuti.                                  |
| `pm_bancontact_generatedSepaDebitIntentsFail`                        | Lo stato di `PaymentIntent` passa da `processing` to `requires_payment_method`.                                          |
| `pm_bancontact_generatedSepaDebitIntentsFailDelayed`                 | Lo stato di `PaymentIntent` passa da `processing` a `requires_payment_method` dopo almeno tre minuti.                    |
| `pm_bancontact_generatedSepaDebitIntentsSucceedDisputed`             | Lo stato del `PaymentIntent` passa da `processing` a `succeeded`, ma viene creata immediatamente una contestazione.      |
| `pm_bancontact_generatedSepaDebitIntentsFailsDueToInsufficientFunds` | Lo stato `PaymentIntent` passa da `processing` a `requires_payment_method` con il codice di errore `insufficient_funds`. |

## Optional: Personalizzare il layout [Lato client]

Puoi personalizzare il layout di Payment Element (menu a tendina o schede) per adattarlo alla tua interfaccia di pagamento. Per ulteriori informazioni su ciascuna proprietà, consulta [elements.create](https://docs.stripe.com/js/elements_object/create_payment_element#payment_element_create-options).

#### Accordion

Puoi iniziare a utilizzare le funzioni di layout specificando un `type` di layout e altre proprietà opzionali quando crei il Payment Element:

```javascript
const paymentElement = elements.create('payment', {
  layout: {
    type: 'accordion',
    defaultCollapsed: false,
    radios: 'always',
    spacedAccordionItems: false
  }
});
```

#### Schede

### Specifica il layout

Imposta il valore del layout su `tabs`. Puoi specificare anche altre proprietà, come quelle mostrate nell’esempio che segue:

```javascript
const paymentElement = elements.create('payment', {
  layout: {
    type: 'tabs',
    defaultCollapsed: false,
  }
});
```

L’immagine seguente è lo stesso Payment Element reso utilizzando configurazioni di layout diverse:
![Tre esperienze con il modulo di pagamento](https://b.stripecdn.com/docs-statics-srv/assets/pe_layout_example.525f78bcb99b95e49be92e5dd34df439.png)

Layout di Payment Element

## Optional: Apple Pay e Google Pay [Lato client]

Quando [abiliti i pagamenti con carta](https://docs.stripe.com/payments/save-and-reuse.md?platform=web&ui=elements#create-intent), visualizziamo Apple Pay e Google Pay per i clienti il cui ambiente soddisfa le [condizioni di visualizzazione del wallet](https://docs.stripe.com/testing/wallets.md). Per accettare pagamenti da questi wallet, devi anche:

- Abilitali nelle [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods). Apple Pay è abilitato per impostazione predefinita.
- [Registra il tuo dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

> #### Test regionali
> 
> Stripe Elements non supporta Google Pay o Apple Pay per gli account e i clienti Stripe in India. Pertanto, non è possibile testare l’integrazione con Google Pay o Apple Pay se l’indirizzo IP del tester è in India, anche se l’account Stripe si trova al di fuori dell’India.

## Comunicare ai clienti l’utilizzo di Stripe

Stripe raccoglie informazioni sulle interazioni dei clienti con Elements per fornirti servizi, prevenire le frodi e migliorare i propri servizi. Ad esempio, utilizza cookie e indirizzi IP per identificare quali Elements sono stati visualizzati da un cliente durante una singola sessione di pagamento. Sei responsabile della comunicazione e della raccolta di tutti i diritti e i consensi necessari affinché Stripe utilizzi i dati in questi modi. Per ulteriori informazioni, visita il nostro [Centro privacy](https://stripe.com/legal/privacy-center#as-a-business-user-what-notice-do-i-provide-to-my-end-customers-about-stripe).

## See also

- [Accettare un pagamento](https://docs.stripe.com/payments/accept-a-payment.md)
- [Salvare i dati di pagamento durante il pagamento](https://docs.stripe.com/payments/save-during-payment.md)
- [L’API Elements Appearance](https://docs.stripe.com/elements/appearance-api.md)
- [Invia segnali di frode completi](https://docs.stripe.com/radar/optimize-fraud-signals.md)