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


Crea un modulo di pagamento personalizzato utilizzando [Stripe Elements](https://docs.stripe.com/payments/elements.md) e l’[API Checkout Sessions](https://docs.stripe.com/api/checkout/sessions.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 Checkout Sessions offre supporto integrato per il calcolo delle imposte, gli sconti, la spedizione e la conversione di valuta, riducendo la quantità di codice personalizzato da scrivere. Questo è l’approccio consigliato per la maggior parte delle integrazioni. 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: 3/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)

## Configurare il server [Lato server]

Prima di iniziare, devi [registrarti](https://dashboard.stripe.com/register) per creare un account Stripe.

Utilizza le librerie ufficiali di Stripe per accedere all’API 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 una sessione di Checkout [Lato server]

Aggiungi sul server un endpoint che crei una [Sessione di Checkout](https://docs.stripe.com/api/checkout/sessions/create.md) della transazione e restituisca [`client_secret`](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-client_secret) al front-end. Una sessione di Checkout rappresenta la sessione del cliente che paga acquisti o abbonamenti una tantum. Le Sessioni di Checkout scadono 24 ore dopo la creazione.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -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]=2000" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Configurare il front-end [Lato client]

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

Assicurati di utilizzare la versione più recente di Stripe.js. Scopri di più sul [versioning di Stripe.js](https://docs.stripe.com/sdks/stripejs-versioning.md).

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

> Stripe fornisce un pacchetto npm che puoi utilizzare per caricare Stripe.js come modulo. Consulta il [progetto su GitHub](https://github.com/stripe/stripe-js). È necessaria la versione [7.0.0](https://www.npmjs.com/package/%40stripe/stripe-js/v/7.0.0) o successiva.

Inizializza stripe.js.

```js
// 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>>',
);
```

#### React

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 pubblico npm. È necessaria almeno la versione 5.0.0 per React Stripe.js e la versione 8.0.0 per il caricatore Stripe.js.

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

Inizializza un’istanza `stripe` sul front-end con la chiave pubblicabile.

```javascript
import {loadStripe} from '@stripe/stripe-js';
const stripe = loadStripe("<<YOUR_PUBLISHABLE_KEY>>");
```

## Inizializzare Checkout [Lato client]

#### HTML + JS

Chiama [initCheckoutElementsSdk](https://docs.stripe.com/js/custom_checkout/init), specificando `clientSecret`.

`initCheckoutElementsSdk` restituisce un oggetto [Checkout](https://docs.stripe.com/js/custom_checkout) che contiene i dati della sessione di checkout e i metodi per aggiornarla.

Leggi `total` e `lineItems` da [actions.getSession()](https://docs.stripe.com/js/custom_checkout/session), e mostrali nella tua interfaccia utente. Ciò consente di attivare nuove funzioni con modifiche minime al codice. Ad esempio, l’aggiunta dei [prezzi in valuta manuali](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) non richiede alcuna modifica all’interfaccia utente se mostri `total`.

```html
<div id="checkout-container"></div>
```

```javascript
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');

  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${session.total.total.amount}`);
}
```

#### React

Includi la tua richiesta di registrazione con il componente [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider), specificando `clientSecret` e l’istanza `stripe`.

```jsx
import React from 'react';
import {CheckoutElementsProvider} from '@stripe/react-stripe-js/checkout';
import CheckoutForm from './CheckoutForm';

const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.client_secret);

const App = () => {
  return (
    <CheckoutElementsProvider
      stripe={stripe}options={{clientSecret}}
    >
      <CheckoutForm />
    </CheckoutElementsProvider>
  );
};

export default App;
```

Accedi all’oggetto [Checkout](https://docs.stripe.com/js/custom_checkout) nel componente del tuo modulo di checkout utilizzando l’hook `useCheckoutElements()`. L’oggetto `Checkout` contiene i dati della Checkout Session e i metodi per aggiornarla.

Leggi `total` and `lineItems` dall’oggetto `Checkout` e visualizzali nell’interfaccia utente. In questo modo puoi abilitare le funzioni con modifiche minime al codice. Ad esempio, l’aggiunta di [prezzi di valuta manuali](https://docs.stripe.com/payments/custom/localize-prices/manual-currency-prices.md) non richiede modifiche all’interfaccia utente se visualizzi `total`.

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

const CheckoutForm = () => {const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>{JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
    </form>
  );
};
```

## Raccogliere l'indirizzo email del cliente [Lato client]

#### HTML + JS

Al completamento di una sessione di Checkout, devi fornire un’email cliente valida.

Utilizza [Contact Details Element](https://docs.stripe.com/js/custom_checkout/create_contact_details_element) per raccogliere l’indirizzo email del tuo cliente. Gestisce per te la raccolta e la convalida delle email e aiuta i clienti ad accedere a Link.

In alternativa:

- Specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (per i clienti rappresentati come oggetti `Account` configurati dal cliente) o [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (per i clienti rappresentati come oggetti `customer`) durante la creazione della sessione di Checkout. Stripe convalida le email fornite in questo modo.
  - Questi precompilano la sessione con un’email che i clienti non possono modificare nella pagina di checkout. Se vuoi eseguire la precompilazione con un’email modificabile, usa [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) durante l’inizializzazione di Checkout.
- Trasmetti un’email che hai già convalidato in [updateEmail](https://docs.stripe.com/js/custom_checkout/update_email) o [checkout.confirm](https://docs.stripe.com/js/custom_checkout/confirm).

```html
<div id="contact-details-element">
  <!--Stripe.js injects the Contact Details Element-->
</div>
```

```javascript
const contactDetailsElement = checkout.createContactDetailsElement();
contactDetailsElement.mount("#contact-details-element");
```

#### React

Al completamento di una sessione di Checkout, devi fornire un’email cliente valida.

Utilizza [ContactDetailsElement](https://docs.stripe.com/js/react_stripe_js/checkout/contact_details_element) per raccogliere l’indirizzo email del tuo cliente. Gestisce per te la raccolta e la convalida delle email e aiuta i clienti ad accedere a Link.

In alternativa:

- Specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email), [customer_account](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_account) (per i clienti rappresentati come oggetti `Account` configurati dal cliente) o [customer](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer) (per i clienti rappresentati come oggetti `customer`) durante la creazione della sessione di Checkout. Stripe convalida le email fornite in questo modo.
  - Questi precompilano la sessione con un’email che i clienti non possono modificare nella pagina di checkout. Se vuoi eseguire la precompilazione con un’email modificabile, usa [defaultValues.email](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-defaultValues-email) durante l’inizializzazione di Checkout.
- Trasmetti un’email che hai già convalidato in [updateEmail](https://docs.stripe.com/js/react_stripe_js/checkout/update_email) o [confirm](https://docs.stripe.com/js/react_stripe_js/checkout/confirm).

```jsx
import {ContactDetailsElement} from '@stripe/react-stripe-js/checkout';

// Inside your CheckoutForm component:
<ContactDetailsElement/>
```

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

Innanzitutto, crea un elemento DOM del contenitore per montare [Payment Element](https://docs.stripe.com/payments/payment-element.md). Poi crea un’istanza di `Payment Element` utilizzando [checkout.createPaymentElement](https://docs.stripe.com/js/custom_checkout/create_payment_element) e montala chiamando [element.mount](https://docs.stripe.com/js/element/mount), fornendo un selettore CSS o l’elemento DOM del contenitore.

```html
<div id="payment-element"></div>
```

```javascript
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');
```

Consulta la [documentazione Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) per visualizzare le opzioni supportate.

Puoi [personalizzare l’aspetto](https://docs.stripe.com/payments/checkout/customization/appearance.md) di tutti gli elementi specificando [elementsOptions.appearance](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-appearance) durante l’inizializzazione di Checkout nel front-end.

#### React

Monta il componente [Payment Element](https://docs.stripe.com/payments/payment-element.md) all’interno del [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

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

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'loading') {
    return (
      <div>Loading...</div>
    );
  }

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <form>

      {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
      {/* A formatted total amount */}
      Total: {checkoutState.checkout.total.total.amount}
<PaymentElement options={{layout: 'accordion'}}/>
    </form>
  );
};

export default CheckoutForm;
```

Consulta la [documentazione Stripe.js](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options) per visualizzare le opzioni supportate.

Puoi [personalizzare l’aspetto](https://docs.stripe.com/payments/checkout/customization/appearance.md) di tutti gli Elements specificando [elementsOptions.appearance](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-appearance) in [CheckoutElementsProvider](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider).

## Inviare il pagamento [Lato client]

#### HTML + JS

Visualizza un pulsante **Paga** che le chiamate [confermano](https://docs.stripe.com/js/custom_checkout/confirm) dall’istanza di `Checkout` per inviare il pagamento.

```html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
```

```js
const checkout = stripe.initCheckoutElementsSdk({clientSecret});

checkout.on('change', (session) => {
  document.getElementById('pay-button').disabled = !session.canConfirm;
});

const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
}
```

#### React

Visualizza un pulsante **Paga** che richiama [conferma](https://docs.stripe.com/js/custom_checkout/confirm) da [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) per inviare il pagamento.

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

const PayButton = () => {
  const checkoutState = useCheckoutElements();
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  if (checkoutState.type !== "success") {
    return null;
  }

  const handleClick = () => {
    setLoading(true);checkoutState.checkout.confirm().then((result) => {
      if (result.type === 'error') {
        setError(result.error)
      }
      setLoading(false);
    })
  };

  return (
    <div>
      <button disabled={!checkoutState.checkout.canConfirm || loading} onClick={handleClick}>
        Pay
      </button>
      {error && <div>{error.message}</div>}
    </div>
  )
};

export default PayButton;
```

## Testare l'integrazione

1. Vai alla pagina di pagamento.
2. Compila i dati di pagamento con un dei metodi di pagamento indicati nella tabella di seguito. Per i pagamenti con carta:
   - 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.
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](https://docs.stripe.com/checkout/fulfillment.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: Creare prodotti e prezzi

Prima di creare una sessione di Checkout, puoi creare *Prodotti* (Products represent what your business sells—whether that's a good or a service) e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) fin dall’inizio. Utilizza prodotti per rappresentare diversi beni fisici o livelli di servizio, e *Prezzi* (Prices define how much and how often to charge for products. This includes how much the product costs, what currency to use, and the interval if the price is for subscriptions) per rappresentare i prezzi di ciascun prodotto. Puoi [Organizzare la tua Sessione di Checkout](https://docs.stripe.com/payments/checkout/pay-what-you-want.md) per accettare mance e donazioni, o vendere i prodotti e i servizi a pagamento che desideri.

Ad esempio, puoi creare una T-shirt come prodotto con un prezzo di 20 USD. In questo modo puoi aggiornare e aggiungere prezzi senza dover modificare le informazioni dei prodotti sottostanti. Puoi creare prodotti e prezzi con la Dashboard o l’API di Stripe. Ulteriori informazioni su [come funzionano prodotti e prezzi](https://docs.stripe.com/products-prices/how-products-and-prices-work.md).

#### API

L’API richiede solo un `name` per creare un [prodotto](https://docs.stripe.com/api/products.md). Checkout mostra `name`, `description` e `images` del prodotto che fornisci.

```curl
curl https://api.stripe.com/v1/products \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d name=T-shirt
```

Poi crea un oggetto [Price](https://docs.stripe.com/api/prices.md) per definire quanto far pagare il prodotto, comprensivo sia del costo del prodotto sia della valuta da utilizzare.

```curl
curl https://api.stripe.com/v1/prices \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "product={{PRODUCT_ID}}" \
  -d unit_amount=2000 \
  -d currency=usd
```

#### Dashboard

> Copia i prodotti creati in modalità sandbox nella modalità live, in modo da non doverli ricreare. Nella vista Dettagli prodotto della Dashboard, fai clic su **Copia in modalità live** nell’angolo in alto a destra. Puoi copiare lo stesso prodotto in modalità sandbox nella modalità live più di una volta. Ogni copia crea un prodotto live separato e gli aggiornamenti successivi al prodotto in modalità sandbox non vengono riportati nelle copie live esistenti.

Per avere la certezza di trovarti in una sandbox, fai clic su **Sandbox** nel selettore degli account della Dashboard. Poi definisci gli articoli che vuoi vendere. Per creare un nuovo prodotto e il relativo prezzo:

- Vai alla sezione [Prodotti](https://dashboard.stripe.com/test/products) nella Dashboard.
- Fai clic su **Aggiungi prodotto**.
- Seleziona **Una tantum** per impostare il prezzo.

Checkout mostra il nome, la descrizione e le immagini del prodotto che fornisci.

Ogni prezzo che crei ha un ID. Quando crei una sessione di completamento della transazione, fai riferimento all’ID del prezzo e alla quantità. Se vendi in più valute, imposta il tuo prezzo *multi-currency* (A single Price object can support multiple currencies. Each purchase uses one of the supported currencies for the Price, depending on how you use the Price in your integration). Il completamento della transazione [determina la valuta locale del cliente](https://docs.stripe.com/payments/checkout/localize-prices/manual-currency-prices.md) in automatico e presenta quella valuta, se il prezzo la supporta.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d ui_mode=elements \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Optional: Precompilare i dati dei clienti [Lato server]

Se hai già raccolto l’indirizzo email del cliente e vuoi che venga precompilato nella sessione di Checkout, specifica [customer_email](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-customer_email) durante la creazione di una sessione di Checkout.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  --data-urlencode "customer_email=customer@example.com" \
  -d ui_mode=elements \
  -d mode=payment \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  --data-urlencode "return_url=https://example.com/return?session_id={CHECKOUT_SESSION_ID}"
```

## Optional: Salvare i dati del metodo di pagamento

Scopri come [accettare un pagamento e salvare i dati di pagamento del cliente](https://docs.stripe.com/payments/save-during-payment.md) per acquisti futuri.

## Optional: Ascoltare le modifiche alla sessione di Checkout

### Ascoltare le modifiche alla sessione di Checkout

Puoi ascoltare le modifiche alla [sessione di Checkout](https://docs.stripe.com/api/checkout/sessions.md) aggiungendo un listener di eventi sull’evento '`change` con [checkout.on](https://docs.stripe.com/js/custom_checkout/change_event).

#### HTML + JS

```javascript
checkout = stripe.initCheckoutElementsSdk({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});
```

#### React

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

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();
  if (checkoutState.type === 'success') {
    checkoutState.checkout.on('change', (session) => {
      // Handle changes to the checkout session
    });
  }
};
```

## Optional: Raccogliere gli indirizzi di fatturazione e di spedizione

## Raccogliere un indirizzo di fatturazione

Per impostazione predefinita, una sessione di Checkout raccoglie i dati di fatturazione minimi necessari per il pagamento tramite Payment Element.

### Utilizzo di Billing Address Element

Puoi raccogliere indirizzi di fatturazione completi utilizzando Billing Address Element.

Innanzitutto, specifica [billing_address_collection=required](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection) quando crei la sessione di Checkout.

#### HTML + JS

Crea un elemento DOM del contenitore per montare Billing Address Element. Quindi crea un’istanza di Billing Address Element utilizzando [checkout.createBillingAddressElement](https://docs.stripe.com/js/custom_checkout/create_billing_address_element) e montala chiamando [element.mount](https://docs.stripe.com/js/element/mount), fornendo un selettore CSS o l’elemento DOM del contenitore.

```html
<div id="billing-address"></div>
```

```javascript
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');
```

Billing Address Element supporta le seguenti opzioni:

- [contatti](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [visualizza](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

#### React

Monta il componente `BillingAddressElement` all’interno del`CheckoutElementsProvider`.

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

const CheckoutForm = () => {
  return (
    <form>
      <BillingAddressElement/>
    </form>
  )
};
```

Billing Address Element supporta le seguenti proprietà:

- [contatti](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-contacts)
- [visualizza](https://docs.stripe.com/js/custom_checkout/create_billing_address_element#custom_checkout_create_billing_address_element-options-display)

### Utilizzo di un modulo personalizzato

Puoi creare un modulo personalizzato per raccogliere gli indirizzi di fatturazione.

- Se la tua pagina di checkout prevede una fase distinta per la raccolta dell’indirizzo prima della conferma, chiama [updateBillingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_billing_address) quando il cliente invia l’indirizzo.
- In alternativa, puoi inviare l’indirizzo quando il cliente fa clic sul pulsante di pagamento specificando [billingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-billingAddress) per [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

### Raccogliere indirizzi di fatturazione parziali

Per raccogliere indirizzi di fatturazione parziali, ad esempio solo il Paese e il codice postale, specifica [billing_address_collection=auto](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-billing_address_collection).

Quando si raccolgono indirizzi di fatturazione parziali, occorre [raccogliere gli indirizzi manualmente](https://docs.stripe.com/payments/accept-a-payment.md#collect-billing-addresses-manually). Per impostazione predefinita, Payment Element raccoglie automaticamente i dati di fatturazione minimi necessari per il pagamento. Per evitare la doppia raccolta dei dati di fatturazione, specifica [fields.billingDetails=never](https://docs.stripe.com/js/custom_checkout/create_payment_element#custom_checkout_create_payment_element-options-fields-billingDetails) durante la creazione del Payment Element. Se intendi raccogliere solo un sottoinsieme di dati di fatturazione (ad esempio il nome del cliente), specifica `never` solo per i campi che intendi raccogliere autonomamente.

## Raccogliere un indirizzo di spedizione

Per raccogliere l’indirizzo di spedizione di un cliente, specifica il parametro [shipping_address_collection](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection) quando crei la sessione di Checkout.

Quando raccogli un indirizzo di spedizione, devi anche specificare i Paesi autorizzati per la spedizione. Configura la proprietà [allowed_countries](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-shipping_address_collection-allowed_countries) con una matrice di [codici Paese ISO di due lettere](https://www.nationsonline.org/oneworld/country_code_list.htm).

### Come utilizzare Shipping Address Element

Puoi raccogliere indirizzi di spedizione completi con Shipping Address Element.

#### HTML + JS

Crea un elemento DOM del contenitore per montare Shipping Address Element. Quindi crea un’istanza di Shipping Address Element utilizzando [checkout.createShippingAddressElement](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element) e montala chiamando [element.mount](https://docs.stripe.com/js/element/mount), fornendo un selettore CSS o l’elemento DOM del contenitore.

```html
<div id="shipping-address"></div>
```

```javascript
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');
```

Shipping Address Element supporta le seguenti opzioni:

- [contatti](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [visualizza](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

#### React

Monta il componente `ShippingAddressElement` all’interno del `CheckoutElementsProvider`.

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

const CheckoutForm = () => {
  return (
    <form>
      <ShippingAddressElement/>
    </form>
  )
};
```

Shipping Address Element supporta le seguenti proprietà:

- [contatti](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-contacts)
- [visualizza](https://docs.stripe.com/js/custom_checkout/create_shipping_address_element#custom_checkout_create_shipping_address_element-options-display)

### Ascoltare le modifiche alla sessione di Checkout

Puoi ascoltare le modifiche alla [sessione di Checkout](https://docs.stripe.com/api/checkout/sessions.md) aggiungendo un listener di eventi per gestire le modifiche relative all’indirizzo.

#### HTML + JS

Utilizza l’[oggetto Session](https://docs.stripe.com/js/custom_checkout/session_object) per visualizzare l’importo della spedizione nel modulo di pagamento.

```html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
```

```javascript
const checkout = stripe.initCheckoutElementsSdk({clientSecret});
const subtotal = document.getElementById('subtotal');
const shipping = document.getElementById('shipping');
const total = document.getElementById('total');

checkout.on('change', (session) => {
  subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
  shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
  total.textContent = `Total: ${session.total.total.amount}`;
});

```

#### React

Usa [useCheckoutElements](https://docs.stripe.com/js/react_stripe_js/checkout/use_checkout_elements) per visualizzare il costo di spedizione nel tuo modulo di checkout.

```jsx
import React from 'react';
import {useCheckoutElements, ShippingAddressElement} from '@stripe/react-stripe-js/checkout';

const CheckoutForm = () => {
  const checkoutState = useCheckoutElements();

  if (checkoutState.type === 'error') {
    return (
      <div>Error: {checkoutState.error.message}</div>
    );
  }

  return (
    <div>
      <div>
        <form>
          <ShippingAddressElement />
        </form>
      </div>
      <div>
        <h2>Checkout Summary</h2>
        {checkoutState.type === 'success' && (
          <>
            <pre>
              {JSON.stringify(checkoutState.checkout.lineItems, null, 2)}
            </pre>
            <h3>Totals</h3>
            <pre>
              Subtotal: {checkoutState.checkout.total.subtotal.amount}
              Shipping: {checkoutState.checkout.total.shippingRate.amount}
              Total: {checkoutState.checkout.total.total.amount}
            </pre>
          </>
        )}
      </div>
    </div>
  )
};
```

### Sincronizza indirizzi di spedizione e fatturazione

Quando utilizzi sia l’elemento Indirizzo di fatturazione che l’elemento Indirizzo di spedizione, puoi mostrare una casella di controllo che consente ai clienti di sincronizzare i loro indirizzi di fatturazione e di spedizione.

#### HTML + JS

Specifica l’opzione [syncAddressCheckbox](https://docs.stripe.com/js/custom_checkout/init#custom_checkout_init-options-elementsOptions-syncAddressCheckbox) in `elementsOptions` quando inizializzi Checkout per configurare quale Address Element mostra la casella di controllo.

```javascript
const checkout = stripe.initCheckoutElementsSdk({
  clientSecret,
  elementsOptions: {
    syncAddressCheckbox: 'shipping',
  },
});
```

#### React

Specifica l’opzione [syncAddressCheckbox](https://docs.stripe.com/js/react_stripe_js/checkout/checkout_provider#react_checkout_provider-options-elementsOptions-syncAddressCheckbox) in `elementsOptions` al `CheckoutElementsProvider` per configurare quale Address Element mostra la casella di controllo.

```jsx
<CheckoutElementsProvider
  stripe={stripePromise}
  options={{
    fetchClientSecret: () => promise,
    elementsOptions: {
      syncAddressCheckbox: 'shipping',
    },
  }}
>
  <CheckoutForm />
</CheckoutElementsProvider>
```

Imposta il valore su `'billing'` o `'shipping'` per scegliere quale Address Element mostra la casella di controllo. Impostalo su `'none'` per nascondere la casella di controllo o lascialo vuoto per utilizzare il valore predefinito (`'billing'`).

### Usare un modulo personalizzato

Puoi creare un modulo personalizzato per raccogliere gli indirizzi di spedizione.

- Se la pagina di checkout prevede una fase distinta per la raccolta dell’indirizzo prima della conferma, chiama [updateShippingAddress](https://docs.stripe.com/js/react_stripe_js/checkout/update_shipping_address) quando il cliente invia l’indirizzo.
- In alternativa, puoi inviare l’indirizzo quando il cliente fa clic sul pulsante di pagamento specificando [shippingAddress](https://docs.stripe.com/js/custom_checkout/confirm#custom_checkout_session_confirm-options-shippingAddress) per [confirm](https://docs.stripe.com/js/custom_checkout/confirm).

## Optional: Separare l'autorizzazione dall'acquisizione [Lato server]

Stripe supporta i pagamenti con carta in due passaggi in modo che tu possa prima autorizzare una carta e poi acquisire i fondi in un secondo momento. Quando Stripe autorizza un pagamento, la società emittente della carta garantisce i fondi e trattiene l’importo del pagamento sulla carta del cliente. Hai quindi un certo periodo di tempo per acquisire i fondi, [a seconda della carta](https://docs.stripe.com/payments/place-a-hold-on-a-payment-method.md#auth-capture-limitations)). Se non addebiti il pagamento prima della scadenza dell’autorizzazione, il pagamento viene annullato e la società emittente rilascia i fondi trattenuti.

La separazione dell’autorizzazione dall’acquisizione è utile se devi eseguire altre operazioni tra la conferma che il cliente è in grado di pagare e la riscossione del pagamento. Ad esempio, se vendi articoli con scorte limitate, potresti dover verificare che un articolo acquistato dal cliente utilizzando Checkout sia ancora disponibile prima di addebitare il pagamento ed evadere l’acquisto. A tal fine, utilizza il seguente flusso di lavoro:

1. Conferma che Stripe abbia autorizzato il metodo di pagamento del cliente.
2. Consulta il sistema di gestione delle scorte per verificare che l’articolo sia ancora disponibile.
3. Aggiorna il sistema di gestione dell’inventario in modo che indichi che un cliente ha acquistato l’articolo.
4. Acquisisci il pagamento del cliente.
5. Fai sapere al cliente se l’acquisto è andato a buon fine nella pagina di conferma.

Per indicare che vuoi separare l’autorizzazione dall’addebito, devi impostare il valore di [payment_intent_data.capture_method](https://docs.stripe.com/api/checkout/sessions/create.md#create_checkout_session-payment_intent_data-capture_method) su `manual` durante la creazione della sessione di Checkout. In questo modo Stripe autorizza solo l’importo sulla carta del cliente.

```curl
curl https://api.stripe.com/v1/checkout/sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "line_items[0][price]={{PRICE_ID}}" \
  -d "line_items[0][quantity]=1" \
  -d mode=payment \
  -d "payment_intent_data[capture_method]=manual" \
  -d return_url={{RETURN_URL}} \
  -d ui_mode=elements
```

Per riscuotere un pagamento non addebitato, puoi utilizzare la [Dashboard](https://dashboard.stripe.com/test/payments?status%5B%5D=uncaptured) o l’endpoint [capture](https://docs.stripe.com/api/payment_intents/capture.md). Per acquisire i pagamenti a livello di codice, devi accedere al PaymentIntent creato durante la sessione di Checkout, che puoi ottenere dall’oggetto [Session](https://docs.stripe.com/api/payment_intents/capture.md).

## Optional: Gestione degli account dei clienti [Nessun codice]

Consenti ai tuoi clienti di [gestire](https://docs.stripe.com/customer-management.md) il loro account condividendo un link sul tuo *portale cliente* (The customer portal is a secure, Stripe-hosted page that lets your customers manage their subscriptions and billing details). Il portale cliente consente ai clienti di accedere con la propria email per gestire gli abbonamenti, aggiornare le modalità di pagamento e così via.

## Optional: Evasione dell'ordine

Come [ricevere una notifica a livello di codice](https://docs.stripe.com/checkout/fulfillment.md?payment-ui=embedded-components) quando un cliente effettua un pagamento

## See also

- [Aggiungi sconti per i pagamenti una tantum](https://docs.stripe.com/payments/advanced/discounts.md)
- [Riscuoti le tasse](https://docs.stripe.com/tax/checkout/elements.md)
- [Abilita quantità regolabili per le voci riga](https://docs.stripe.com/payments/advanced/adjustable-quantity.md)
- [Aggiunta di pulsanti con un solo clic](https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.md?payment-ui=embedded-components)
- [Progetto di esempio su GitHub](https://github.com/stripe-samples/accept-a-payment/tree/main/elements-with-checkout-sessions)