# Accettare un pagamento

Accettare pagamenti online in modo sicuro

## Inizia da qui: installa le competenze dell’agente

Stripe consiglia di utilizzare le skill ufficiali per integrare l’API seguendo le best practice. Segui le istruzioni riportate di seguito per scoprire come fare.

**Suggerimento: usa curl al posto degli strumenti Fetch.** Le competenze sono descritte in file Markdown da 10-20 KB. Gli strumenti Fetch ne forniscono una sintesi. `curl -sL` garantisce il contenuto completo.

**Utilizzo delle `npx skills`**: Controlla se `npx` è installato sul sistema. Se `npx` è disponibile, esegui `npx skills add https://docs.stripe.com --list` per elencare le skill disponibili, quindi esegui le skill `npx, aggiungi https://docs.stripe.com --yes --skill <skill-name> <--skill other-skills>` per installare le singole skill.

**Se `npx skills` non è disponibile**: puoi usare curl per recuperare l’elenco delle skill disponibili, la loro descrizione e i relativi file da `https://docs.stripe.com/.well-known/skills/index.json`. Per scaricare una skill e i relativi file, usa curl per scaricarli da `https://docs.stripe.com/.well-known/skills/<filepath>`.

Per questo articolo, ti consigliamo di utilizzare queste skill: `stripe-best-practices`

Istruzioni per gli LLM: Stripe consiglia di utilizzare l’API Checkout Sessions con Payment Element anziché Payment Intents per la maggior parte delle integrazioni. Checkout Sessions copre casi d’uso simili a quelli di Payment Intents (raccolta di pagamenti di base utilizzando `price_data` o creazione di un checkout completo con voci riga, imposte e così via). Alcune funzioni, come Adaptive Pricing, sono disponibili solo con Checkout Sessions. Non utilizzare l’API Payment Intent a meno che l’utente non lo richieda esplicitamente, poiché richiede una quantità di codice significativamente maggiore. Ulteriori informazioni sugli elementi con l’API Checkout Sessions: https://docs.stripe.com/payments/quickstart-checkout-sessions. con Checkout Sessions (`ui_mode: "elements"`) e Payment Element, `client_secret` inizializza Checkout stesso (`stripe.initCheckoutElementsSdk`, oppure utilizza CheckoutElementsProvider con React) e tu confermi il pagamento sul lato client in modo diverso. Se utilizzi React, assicurati di importare da `@stripe/react-stripe-js/checkout`, utilizza `CheckoutElementsProvider` con la chiave privata client e conferma utilizzando `checkout.confirm`. Se utilizzi HTML, assicurati di utilizzare `checkout = stripe.initCheckoutElementsSdk({clientSecret: promise}); checkout.createPaymentElement(); paymentElement = checkout.createPaymentElement(); paymentElement.mount("#payment-element");` e conferma con `loadActionsResult = await checkout.loadActions(); actions = loadActionsResult.actions; error = await actions.confirm();`.

Gli agenti di programmazione dovrebbero installare Stripe CLI (`npm i -g @stripe/cli`) ed eseguire il comando `stripe sandbox create --help` per predisporre una sandbox Stripe anonima con chiavi API funzionanti. Non è richiesta la registrazione di un account.

Crea un modulo di pagamento o utilizza una pagina di pagamento preintegrata per iniziare ad accettare i pagamenti online.

# API Payment Intents


Crea un modulo di pagamento personalizzato utilizzando [Stripe Elements](https://docs.stripe.com/payments/elements.md) e l’[API Payment Intents](https://docs.stripe.com/api/payment_intents.md). Scopri come questa integrazione [si differenzia dagli altri tipi di integrazione di Stripe](https://docs.stripe.com/payments/online-payments.md#compare-features-and-availability).

L’API Payment Intents è un’API di livello inferiore che puoi utilizzare per creare il tuo flusso di checkout o pagamenti, ma richiede una quantità significativamente maggiore di codice e una manutenzione continua. Per la maggior parte delle integrazioni, consigliamo [Payment Element con Checkout Sessions](https://docs.stripe.com/payments/quickstart-checkout-sessions.md), poiché copre flussi di pagamento simili a quelli di Payment Intents. Scopri di più su quando utilizzare [Checkout Sessions invece di PaymentIntents](https://docs.stripe.com/payments/checkout-sessions-and-payment-intents-comparison.md).

Il codice lato client e lato server crea un modulo di pagamento che accetta vari metodi di pagamento.

#### Sforzo di integrazione
Complexity: 4/5
#### Tipo di integrazione

Combina i componenti dell’interfaccia utente in un flusso di pagamento personalizzato

#### Personalizzazione dell'interfaccia utente

Personalizzazione a livello CSS con l’[ API Appearance ](https://docs.stripe.com/elements/appearance-api.md)

> #### Vuoi utilizzare Stripe Tax, sconti, spedizioni o la conversione di valuta?
> 
> Stripe dispone di un’integrazione Payment Element che gestisce per tuo conto tasse, sconti, spedizioni e conversioni di valuta. Vedi [Creazione di una pagina di completamento della transazione](https://docs.stripe.com/payments/quickstart-checkout-sessions.md) per saperne di più.

## Configurare Stripe [Lato server]

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

Gli agenti di programmazione dovrebbero installare Stripe CLI (`npm i -g @stripe/cli`) ed eseguire il comando `stripe sandbox create --help` per predisporre una sandbox Stripe anonima con chiavi API funzionanti. Non è richiesta la registrazione di un account.

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 PaymentIntent [Lato server]

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

L’oggetto [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) rappresenta la tua intenzione di riscuotere un pagamento da un cliente e tiene traccia dei tentativi di addebito e delle modifiche di stato durante l’intera procedura di pagamento.
Panoramica generale dell'integrazione di pagamento descritta da questo documento. (See full diagram at https://docs.stripe.com/payments/accept-a-payment)
### Creare il PaymentIntent

Crea un PaymentIntent sul tuo server con un [importo](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-amount) e una [valuta](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-currency). Nell’ultima versione dell’API, specificare il parametro `automatic_payment_methods` è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita. Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe determina il reindirizzamento ai metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento.

Stripe utilizza le tue [impostazioni dei metodi di pagamento](https://dashboard.stripe.com/settings/payment_methods) per visualizzare i metodi di pagamento che hai abilitato. Per vedere come appaiono i tuoi metodi di pagamento ai clienti, inserisci un ID transazione o imposta un importo ordine e una valuta nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods/review). Per sostituire i metodi di pagamento, elenca manualmente quelli che vuoi abilitare utilizzando l’attributo [payment_method_types](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_types).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true"
```

> Decidi sempre quanto addebitare sul lato server, che è un ambiente sicuro, anziché sul client. In questo modo impedisci ai client malintenzionati di scegliere un proprio prezzo.

### Recuperare la chiave privata client

L’oggetto PaymentIntent 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 PaymentIntent
  {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/payment_intents/object.md#payment_intent_object-client_secret) nel modulo di pagamento. Nel codice lato server, recupera la chiave privata client da PaymentIntent:

#### 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 PaymentIntent
  erb :checkout
end
```

## Acquisire i dati di pagamento [Lato client]

Raccogli 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 la raccolta dei dati di pagamento per vari metodi di pagamento.

Payment Element contiene un iframe che invia a Stripe le informazioni sul pagamento in modo sicuro tramite una connessione HTTPS. Evita di inserire Payment Element all’interno di un altro iframe, perché alcuni metodi di pagamento richiedono il reindirizzamento a un’altra pagina per la conferma del pagamento.

Se scegli di utilizzare un iframe e desideri accettare Apple Pay o Google Pay, l’iframe deve avere l’attributo [allow](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) impostato su `"payment *"`.

Affinché l’integrazione funzioni, l’indirizzo della pagina di checkout deve iniziare con `https://` rather anziché con `http://` for. Puoi testare l’integrazione senza usare HTTPS, ma ricorda di [abilitarlo](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 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 pagamento

Payment Element deve avere uno spazio dedicato nella pagina di 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 di Payment Element e montala sul nodo DOM del contenitore. Specifica la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) del passaggio precedente in `options` quando crei l’istanza di [Elements](https://docs.stripe.com/js/elements_object/create):

Gestisci la chiave privata client con attenzione in quanto può effettuare l’addebito. Non devi registrarla, inserirla negli URL né mostrarla a nessuno se non al cliente.

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

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous stepconst elements = stripe.elements(options);

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

```

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

Per utilizzare il componente Payment Element, includi il componente della pagina di 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`. Specifica anche la [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_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 CheckoutForm from './CheckoutForm';

// 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 client secret obtained in step 3
    clientSecret: '{{CLIENT_SECRET}}',
    // Fully customizable with appearance API.
    appearance: {/*...*/},
  };

  return (
    <Elements stripe={stripePromise} options={options}>
      <CheckoutForm />
    </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 CheckoutForm = () => {
  return (
    <form><PaymentElement />
      <button>Submit</button>
    </form>
  );
};

export default CheckoutForm;
```

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

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

### Richiedi il token esercente di Apple Pay

Se hai configurato la tua integrazione per [accettare pagamenti Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout), ti consigliamo di configurare l’interfaccia Apple Pay in modo che restituisca un token esercente per abilitare le transazioni avviate dall’esercente (MIT). [Richiedi il tipo di token esercente pertinente](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) in Payment Element.

## Optional: Salva e recupera le modalità 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

Durante la creazione di un [PaymentIntent](https://docs.stripe.com/api/payment_intents/.md) sul tuo server, crea anche [CustomerSession](https://docs.stripe.com/api/customer_sessions/.md) fornendo l’ID del cliente (utilizzando `customer` per un oggetto `Customer` o `customer_account` per un oggetto `Account` configurato dal cliente) 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 [funzioni](https://docs.stripe.com/api/customer_sessions/create.md#create_customer_session-components-payment_element-features) del metodo di pagamento salvato che desideri 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 mostrata una casella di spunta che consente ai clienti di salvare i propri dettagli di pagamento per utilizzo futuro.

Puoi specificare `setup_future_usage` in un PaymentIntent o in una sessione di Checkout per sovrascrivere il comportamento predefinito relativo al salvataggio dei metodi di pagamento. In questo modo si garantisce che il metodo di pagamento venga salvato automaticamente per un utilizzo futuro, anche se il cliente non sceglie esplicitamente di salvarlo. Se si intende specificare `setup_future_usage`, non impostare `payment_method_save_usage` nella stessa transazione di pagamento, poiché ciò causerebbe un errore di integrazione.

> #### Utilizza l'API Accounts v2 per rappresentare i clienti
> 
> L’API Accounts v2 è generalmente disponibile per gli utenti Connect e in anteprima pubblica per altri utenti Stripe. Se fai parte dell’anteprima di Accounts v2, devi specificare una [versione di anteprima](https://docs.stripe.com/api-v2-overview.md#sdk-and-api-versioning) nel tuo codice.
> 
> Per richiedere l’accesso all’anteprima di Accounts v2, 
> 
> Nella maggior parte dei casi d’uso, consigliamo di [rappresentare i clienti come oggetti Account configurati dall’utente,](https://docs.stripe.com/accounts-v2/use-accounts-as-customers.md) anziché utilizzare oggetti [Customer](https://docs.stripe.com/api/customers.md).

#### Account v2

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    automatic_payment_methods: {enabled: true},
    customer_account: {{CUSTOMER_ACCOUNT_ID}},
  })
  customer_session = client.v1.customer_sessions.create({
    customer_account: {{CUSTOMER_ACCOUNT_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
```

#### Clienti v1

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')

post '/create-intent-and-customer-session' do
  intent = client.v1.payment_intents.create({
    amount: 1099,
    currency: 'usd',
    # 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 = client.v1.customer_sessions.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 PaymentIntent 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');
```

Quando confermi il PaymentIntent, Stripe.js configura automaticamente l’impostazione [setup_future_usage](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-setup_future_usage) sul PaymentIntent e [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.

### Imporre la nuova raccolta del CVC

Facoltativamente, specifica `require_cvc_recollection` [quando crei il PaymentIntent](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-payment_method_options-card-require_cvc_recollection) per imporre la nuova raccolta del CVC quando un cliente paga con una carta.

### 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
  }
})
```

## Optional: Link in your checkout page [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)

Acquisisci l’indirizzo email dei clienti per l’autenticazione o l’iscrizione a 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: Recuperare gli aggiornamenti dal server [Lato client]

Una volta visualizzato Payment Element, potresti aggiornare gli attributi sul PaymentIntent, come l’[importo](https://docs.stripe.com/api/payment_intents/update.md#update_payment_intent-amount) (ad es. per i codici sconto o costi di spedizione). Puoi [aggiornare il PaymentIntent](https://docs.stripe.com/api/payment_intents/update.md) sul tuo server e poi chiamare [elements.fetchUpdates](https://docs.stripe.com/js/elements_object/fetch_updates) per vedere il nuovo importo in Payment Element. Questo esempio mostra come creare l’endpoint del server che aggiorna l’importo sul PaymentIntent:

#### 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.
client = Stripe::StripeClient.new('<<YOUR_SECRET_KEY>>')
get '/update' do
  intent = client.v1.payment_intents.update(
    '{{PAYMENT_INTENT_ID}}',
    {amount: 1499},
  )
  {status: intent.status}.to_json
end
```

Questo esempio mostra come aggiornare l’interfaccia utente in modo da vedere queste modifiche lato client:

```javascript
(async () => {
  const response = await fetch('/update');
  if (response.status === 'requires_payment_method') {
    const {error} = await elements.fetchUpdates();
  }
})();
```

## Inviare il pagamento a Stripe [Lato client]

Usa [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) per completare il pagamento con i dati di Payment Element. Fornisci a questa funzione un [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-return_url) per indicare dove Stripe deve reindirizzare l’utente dopo il completamento del pagamento. L’utente può essere dapprima reindirizzato su un sito intermedio, come una pagina di autorizzazione bancaria, prima di essere reindirizzato al `return_url`. In caso di esito positivo, i pagamenti con carta vengono immediatamente reindirizzati al `return_url`.

Se vuoi impedire il reindirizzamento per i pagamenti con carta una volta completato il pagamento, puoi impostare il [reindirizzamento](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_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.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    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`.
  }
});
```

#### React

Per chiamare [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) 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 CheckoutForm = () => {
  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;
    }
const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      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)
      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 CheckoutForm;
```

Assicurati che `return_url` corrisponda a una pagina del tuo sito web che fornisce lo stato del pagamento. Quando Stripe reindirizza il cliente a `return_url`, fornisce i seguenti parametri di ricerca dell’URL:

| Parametro                      | Descrizione                                                                                                                                         |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| `payment_intent`               | Identificativo univoco per il `PaymentIntent`                                                                                                       |
| `payment_intent_client_secret` | La [chiave privata client](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) dell’oggetto `PaymentIntent`. |

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

Utilizza uno dei parametri di ricerca per recuperare il PaymentIntent. Controlla lo [stato del PaymentIntent](https://docs.stripe.com/payments/paymentintents/lifecycle.md) per decidere cosa mostrare ai tuoi clienti. Quando specifichi il `return_url`, puoi anche aggiungere i tuoi parametri di ricerca che verranno conservati durante la procedura di reindirizzamento.

#### HTML + JS

```javascript

// Initialize Stripe.js using your publishable key
const stripe = Stripe('<<YOUR_PUBLISHABLE_KEY>>');

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

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `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 (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});
```

#### React

```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 "payment_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    // Retrieve the PaymentIntent
    stripe
      .retrievePaymentIntent(clientSecret)
      .then(({paymentIntent}) => {
        // Inspect the PaymentIntent `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 (paymentIntent.status) {
          case 'succeeded':
            setMessage('Success! Payment received.');
            break;

          case 'processing':
            setMessage("Payment processing. We'll update you when payment is received.");
            break;

          case 'requires_payment_method':
            // Redirect your user back to your payment page to attempt collecting
            // payment again
            setMessage('Payment failed. Please try another payment method.');
            break;

          default:
            setMessage('Something went wrong.');
            break;
        }
      });
  }, [stripe]);


  return message;
};

export default PaymentStatus;
```

## Gestire gli eventi successivi al pagamento [Lato server]

Stripe invia un evento [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded) quando il pagamento viene completato. Utilizza lo [strumento webhook Dashboard](https://dashboard.stripe.com/webhooks) o segui la [guida ai webhook](https://docs.stripe.com/webhooks/quickstart.md) per ricevere questi eventi ed eseguire azioni come l’invio di una email per la conferma di un ordine al cliente, la registrazione della vendita in un database o l’avvio del flusso di lavoro per una spedizione.

Ascolta questi eventi invece di attendere una chiamata di ritorno dal client. Sul client, il cliente potrebbe chiudere la finestra del browser o uscire dall’app prima dell’esecuzione della chiamata di ritorno e i client malintenzionati potrebbero manipolare la risposta. La configurazione dell’integrazione per l’ascolto di eventi asincroni ti consente di accettare [diversi tipi di modalità di pagamento](https://stripe.com/payments/payment-methods-guide) con una sola integrazione.

Oltre alla gestione dell’evento `payment_intent.succeeded`, è consigliabile gestire altri eventi durante la riscossione di pagamenti tramite Payment Element:

| Evento                                                                                                                          | Descrizione                                                                                                                                                                                                                                                                                        | Azione                                                                                                                                                                                       |
| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded)           | Inviato quando un cliente ha disposto un pagamento con esito positivo.                                                                                                                                                                                                                             | Invia al cliente la conferma di un ordine ed *evade* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) l’ordine. |
| [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.processing)         | Inviato quando un cliente ha correttamente disposto un pagamento che non è stato ancora completato. Questo evento viene di solito inviato quando il cliente dispone un addebito bancario. Sarà poi seguito da un evento `payment_intent.succeeded` o da un evento `payment_intent.payment_failed`. | Invia al cliente la conferma di un ordine che indica il pagamento in sospeso. Per i beni digitali, potresti voler evadere l’ordine senza attendere il completamento del pagamento.           |
| [payment_intent.payment_failed](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.payment_failed) | Inviato quando il cliente ha tentato un pagamento che non è andato a buon fine.                                                                                                                                                                                                                    | Se un pagamento passa da `processing` a `payment_failed`, offri al cliente un altro tentativo di pagamento.                                                                                  |

## Esegui il test della tua integrazione

Per testare l’integrazione dei pagamenti personalizzati:

1. Crea un Payment Intent e recupera la chiave privata client.
2. Compila i dettagli di pagamento con una delle modalità indicate nella tabella di seguito.
   - Inserisci una data di scadenza futura per la carta.
   - Inserisci un numero di 3 cifre per il CVC.
   - Inserisci un qualsiasi codice postale.
3. Invia il pagamento a Stripe. Verrai reindirizzato al tuo `return_url`.
4. Vai alla Dashboard e cerca il pagamento nella [pagina Transazioni](https://dashboard.stripe.com/test/payments?status%5B0%5D=successful). Se il pagamento è andato a buon fine, lo vedrai nell’elenco.
5. Fai clic sul pagamento per visualizzare ulteriori dettagli, come i dati di addebito e l’elenco degli articoli acquistati. Puoi utilizzare queste informazioni per evadere l’ordine.

Scopri di più su come [testare la tua integrazione](https://docs.stripe.com/testing.md).

#### Carte

| Numero di carta     | Scenario                                                                                                                                                                                                                                                                                              | Come eseguire il test                                                                                                  |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| 4242424242424242    | Il pagamento con carta ha esito positivo e non richiede l’autenticazione.                                                                                                                                                                                                                             | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. |
| 4000002500003155    | Il pagamento con carta 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 della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. |
| 4000000000009995    | La carta viene rifiutata con un codice di rifiuto del tipo `insufficient_funds`.                                                                                                                                                                                                                      | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. |
| 6205500000000000004 | La carta UnionPay ha una lunghezza variabile di 13-19 cifre.                                                                                                                                                                                                                                          | Compila il modulo della carta di credito utilizzando il numero di carta di credito con scadenza, CVC e codice postale. |

#### Wallet

| Modalità di pagamento | Scenario                                                                                                                                                                               | Come eseguire il test                                                                                                                                                                                      |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Alipay                | Il tuo cliente paga correttamente usando un metodo di pagamento con reindirizzamento e [notifica immediata](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento. |

#### Reindirizzamenti bancari

| Modalità di pagamento               | Scenario                                                                                                                                                                                                                                                   | Come eseguire il test                                                                                                                                                                                        |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Addebito diretto BECS               | Il tuo cliente paga correttamente con addebito diretto BECS.                                                                                                                                                                                               | Compila il modulo usando il numero di conto `900123456` e BSB `000000`. Il PaymentIntent confermato passerà inizialmente allo stato `processing` e, 3 minuti dopo, allo 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` e il BSB `000000`.                                                                                                                                   |
| Bancontact, EPS, iDEAL e Przelewy24 | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica immediata.                                                                                                | Scegli una qualsiasi modalità di pagamento con reindirizzamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento. |
| Pay by Bank                         | Il tuo cliente paga correttamente con un metodo di pagamento con reindirizzamento e [notifica differita](https://docs.stripe.com/payments/payment-methods.md#payment-notification).                                                                        | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Completa il pagamento di test** nella pagina di reindirizzamento.                                   |
| Pay by Bank                         | Il cliente non riesce a eseguire l’autenticazione nella pagina di reindirizzamento per una modalità di pagamento con reindirizzamento e notifica differita.                                                                                                | Scegli la modalità di pagamento, fornisci i dati richiesti e conferma il pagamento. Quindi fai clic su **Interrompi il pagamento di test** nella pagina di reindirizzamento.                                 |
| BLIK                                | I pagamenti BLIK non vanno a buon fine per vari motivi. In alcuni casi si tratta di errori immediati (ad esempio il codice è scaduto o non è valido), di errori ritardati (la banca rifiuta il pagamento) o di timeout (il cliente non risponde in tempo). | Utilizza i modelli di email per [simulare i diversi errori.](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures)                                                                    |

#### 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`.                                                                                                                                   |

#### Voucher

| Modalità di pagamento | Scenario                                            | Come eseguire il test                                                                                                     |
| --------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| Boleto, OXXO          | Il tuo cliente paga con voucher Boleto oppure OXXO. | Seleziona Boleto oppure OXXO come modalità di pagamento e invia il pagamento. Chiudi la finestra di dialogo visualizzata. |

Per ulteriori informazioni su come testare la tua integrazione, consulta la sezione [Test](https://docs.stripe.com/testing.md).

## Optional: Aggiungere altre modalità di pagamento

Payment Element [supporta molti metodi di pagamento](https://docs.stripe.com/payments/payment-methods/integration-options.md#choose-how-to-add-payment-methods) per impostazione predefinita. Devi adottare misure aggiuntive per attivare e visualizzare alcuni metodi di pagamento.

### Affirm

Per iniziare a usare Affirm, devi abilitarlo nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Quando crei un PaymentIntent con il metodo di pagamento Affirm, devi specificare un [indirizzo di spedizione](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Questo esempio suggerisce di indicare i dati relativi alla spedizione sul client dopo che il cliente ha [selezionato il metodo di pagamento](https://docs.stripe.com/payments/accept-a-payment.md#web-create-intent). Scopri ulteriori dettagli sull’utilizzo di [Affirm](https://docs.stripe.com/payments/affirm.md) con Stripe.

#### HTML + JS

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

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

  const {error} = await stripe.confirmPayment({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://my-site.com/order/123/complete',shipping: {
        name: 'Jenny Rosen',
        address: {
          line1: '1 Street',
          city: 'Seattle',
          state: 'WA',
          postal_code: '95123',
          country: 'US'
        }
      },

    }
  });

  if (error) {
    // This point is reached if there's 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 is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});
```

#### React

```jsx

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

const CheckoutForm = () => {
  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;
    }

    const {error} = await stripe.confirmPayment({
      //`Elements` instance that was used to create the Payment Element
      elements,
      confirmParams: {
        return_url: 'https://my-site.com/order/123/complete',shipping: {
          name: 'Jenny Rosen',
          address: {
            line1: '1 Street',
            city: 'Seattle',
            state: 'WA',
            postal_code: '95123',
            country: 'US'
          }
        },

      }
    });


    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 CheckoutForm;
```

#### Testare Affirm

Scopri come testare diversi scenari utilizzando la tabella seguente:

| Scenario                                                                                       | Come eseguire il test                                                                              |
| ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| Il tuo cliente paga correttamente con Affirm.                                                  | Compila il modulo (assicurati di inserire un indirizzo di spedizione) e autentica il pagamento.    |
| Il cliente non riesce a eseguire l’autenticazione con la pagina di reindirizzamento di Affirm. | Compila il modulo e fai clic su **Interrompi pagamento di test** nella pagina di reindirizzamento. |

### Afterpay (Clearpay)

Quando crei un PaymentIntent con il metodo di pagamento Afterpay, devi specificare un [indirizzo di spedizione](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-shipping). Scopri ulteriori dettagli sull’utilizzo di [Afterpay](https://docs.stripe.com/payments/afterpay-clearpay.md) con Stripe.

Puoi gestire i metodi di pagamento dalla [Dashboard](https://dashboard.stripe.com/settings/payment_methods). Stripe gestisce la restituzione dei metodi di pagamento idonei in base a fattori quali l’importo della transazione, la valuta e il flusso di pagamento. Nell’ultima versione dell’API, specificare il parametro `automatic_payment_methods` è facoltativo perché Stripe ne abilita la funzionalità per impostazione predefinita. Assicurati di abilitare Afterpay/Clearpay nella [Dashboard](https://dashboard.stripe.com/settings/payment_methods).

```curl
curl https://api.stripe.com/v1/payment_intents \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d amount=1099 \
  -d currency=usd \
  -d "automatic_payment_methods[enabled]=true" \
  -d "shipping[name]=Jenny Rosen" \
  -d "shipping[address][line1]=1234 Main Street" \
  -d "shipping[address][city]=San Francisco" \
  -d "shipping[address][state]=CA" \
  -d "shipping[address][country]=US" \
  -d "shipping[address][postal_code]=94111"
```

#### Testare Afterpay (Clearpay)

Scopri come testare diversi scenari utilizzando la tabella seguente:

| Scenario                                                                                         | Come eseguire il test                                                                              |
| ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| Il tuo cliente paga correttamente con Afterpay.                                                  | Compila il modulo (assicurati di inserire un indirizzo di spedizione) e autentica il pagamento.    |
| Il cliente non riesce a eseguire l’autenticazione con la pagina di reindirizzamento di Afterpay. | Compila il modulo e fai clic su **Interrompi pagamento di test** nella pagina di reindirizzamento. |

### Apple Pay e Google Pay

Quando [abiliti i pagamenti con carta](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#create-the-paymentintent), mostriamo 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.
- Offri la tua applicazione su HTTPS in fase di sviluppo e produzione.
- [Registra il tuo dominio](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).
- [Recupera aggiornamenti dal server](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=paymentintents#fetch-updates) se aggiorni l’importo di un [PaymentIntent](https://docs.stripe.com/api/payment_intents.md) per mantenere sincronizzato il metodo di pagamento del wallet.

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

Ulteriori informazioni sull’utilizzo di [Apple Pay](https://docs.stripe.com/apple-pay.md) e [Google Pay](https://docs.stripe.com/google-pay.md) con Stripe.

### Addebito diretto ACH

Quando usi Payment Element con l’addebito diretto ACH come modalità di pagamento, segui questa procedura:

1. Crea un oggetto [Account](https://docs.stripe.com/api/v2/core/accounts/create.md#v2_create_accounts-configuration-customer) configurato dal cliente o un oggetto [Customer](https://docs.stripe.com/api/customers/create.md) per rappresentare il cliente.

#### Accounts v2

```curl
curl -X POST https://api.stripe.com/v2/core/accounts \
  -H "Authorization: Bearer <<YOUR_SECRET_KEY>>" \
  -H "Stripe-Version: 2026-05-27.preview" \
  --json '{
    "configuration": {
        "customer": {}
    }
  }'
```

#### Customers v1

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

1. Specifica l’ID cliente durante la creazione del `PaymentIntent`.

   #### Account v2

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer_account={{CUSTOMERACCOUNT_ID}}"
   ```

   #### Clienti v1

   ```curl
   curl https://api.stripe.com/v1/payment_intents \
     -u "<<YOUR_SECRET_KEY>>:" \
     -d amount=1099 \
     -d currency=usd \
     -d "automatic_payment_methods[enabled]=true" \
     -d setup_future_usage=off_session \
     -d "customer={{CUSTOMER_ID}}"
   ```

2. Seleziona un [metodo di verifica](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-payment_method_options-us_bank_account-verification_method).

Quando utilizzi la modalità di pagamento con addebito diretto ACH con Payment Element, puoi selezionare solo `automatic` o `instant`.

Ulteriori informazioni sull’utilizzo dell’[Addebito diretto ACH](https://docs.stripe.com/payments/ach-direct-debit.md) con Stripe.

#### Testare l’addebito diretto ACH

| Scenario                                                                                            | Come eseguire il test                                                                                                                                                                                                                                                                                                                                                                                 |
| --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Il tuo cliente paga correttamente con un conto bancario statunitense usando la verifica istantanea. | Seleziona **Conto bancario statunitense** e compila il modulo. Fai clic sull’istituto di test. Segui le istruzioni nella finestra modale per collegare il tuo conto bancario. Fai clic sul pulsante di pagamento.                                                                                                                                                                                     |
| Il tuo cliente paga correttamente con un conto bancario statunitense usando i microdepositi.        | Seleziona **Conto bancario statunitense** e compila il modulo. Fai clic su **Inserisci le coordinate bancarie manualmente**. Segui le istruzioni nella finestra modale per collegare il tuo conto bancario. Puoi usare questi [numeri di conto di test](https://docs.stripe.com/payments/ach-direct-debit/accept-a-payment.md?platform=web#test-account-numbers). Fai clic sul pulsante di pagamento. |
| Il cliente non riesce a completare la procedura di collegamento del conto bancario.                 | Seleziona **Conto bancario statunitense** e fai clic sull’istituto di test oppure su **Inserisci le coordinate bancarie manualmente**. Chiudi la finestra modale senza completare l’operazione.                                                                                                                                                                                                       |

### BLIK

Quando si usa Payment Element con BLIK, l’utente può chiudere la finestra modale richiedendo di autorizzare il pagamento nella propria app bancaria. In tal modo l’utente verrà reindirizzato al tuo `return_url` e non tornerà alla pagina di pagamento. Scopri ulteriori dettagli sull’utilizzo di [BLIK](https://docs.stripe.com/payments/blik.md) con Stripe.

Per gestire la chiusura della finestra modali da parte degli utenti, nel gestore lato server del tuo `return_url`, controlla la voce `status` del Payment Intent per sapere se è andato a buon fine, ovvero `succeeded`, o se sono necessarie ulteriori operazioni, ovvero `requires_action`, (vale a dire che l’utente ha chiuso la finestra modale senza autorizzazione), e comportati di conseguenza.

### Modalità di pagamento con codice QR

Quando si usa Payment Element con una modalità di pagamento basata su codice QR (WeChat Pay, PayNow, Pix, PromptPay, Cash App Pay), l’utente può chiudere la finestra modale del codice QR. In tal modo l’utente verrà reindirizzato al tuo `return_url` e non tornerà alla pagina di pagamento.

Per gestire la chiusura delle finestre modali dei codici QR da parte dei clienti, nel gestore lato server del tuo `return_url`, controlla la voce `status` del Payment Intent per sapere se è andato a buon fine, ovvero `succeeded`, o se sono necessarie ulteriori operazioni, ovvero `requires_action`, (vale a dire che l’utente ha chiuso la finestra modale senza effettuare il pagamento), e comportati di conseguenza.

In alternativa, impedisci il reindirizzamento automatico al tuo `return_url` specificando un parametro facoltativo avanzato [`redirect=if_required`](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect), che blocca il reindirizzamento alla chiusura della finestra modale di un codice QR.

### Cash App Pay

Payment Element restituisce un modulo dinamico in modo diverso nel web desktop o mobile poiché utilizza diversi metodi di autenticazione del cliente. Scopri ulteriori dettagli sull’utilizzo di [Cash App Pay](https://docs.stripe.com/payments/cash-app-pay.md) con Stripe.

#### Elemento dell'app web per dispositivi mobili

Cash App Pay è un metodo di pagamento con reindirizzamento su web mobile. Reindirizza il cliente a Cash App in modalità live o a una pagina di pagamento di test in un ambiente di test. Una volta completato il pagamento, il cliente viene reindirizzato al `return_url`, indipendentemente dal fatto che tu abbia impostato `redirect=if_required`.

#### Elemento dell'app web per desktop

Cash App Pay è una modalità di pagamento con codice QR per web desktop, in cui Payment Element restituisce una finestra modale con codice QR. Il cliente deve eseguire la scansione del codice QR tramite un’app di riconoscimento dei codici QR o attraverso l’app mobile Cash App.

In modalità live, reindirizza il cliente al `return_url` non appena viene reindirizzato a Cash App. In ambienti di test, possono approvare o rifiutare il pagamento prima di essere reindirizzati al `return_url`. I clienti possono anche chiudere la finestra modale del codice QR prima di completare il pagamento, attivando così una pagina di reindirizzamento al tuo `return_url`.

Assicurati che `return_url` corrisponda a una pagina presente sul tuo sito web per controllare lo `status` di Payment Intent, che può essere `succeeded`, `failed`, o `requires_action` (ad esempio, il cliente ha chiuso la finestra modale senza eseguire la scansione del codice QR).

In alternativa, impedisci il reindirizzamento automatico al tuo `return_url` specificando un parametro facoltativo avanzato `redirect=if_required`, che blocca il reindirizzamento alla chiusura della finestra modale di un codice QR.

### PayPal

Per utilizzare PayPal, assicurati di avere un [dominio registrato](https://docs.stripe.com/payments/payment-methods/pmd-registration.md).

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

- [Stripe Elements](https://docs.stripe.com/payments/elements.md)
- [Configurare pagamenti futuri](https://docs.stripe.com/payments/save-and-reuse.md)
- [Salvare i dati di pagamento durante il pagamento](https://docs.stripe.com/payments/save-during-payment.md)
- [Calcola l’imposta sulle vendite, la GST e l’IVA nel tuo flusso di pagamento](https://docs.stripe.com/tax/standalone-tax-api.md)