> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overlay Checkout

> Una moderna libreria TypeScript per incorporare il checkout overlay di Dodo Payments e ascoltare gli eventi di checkout in tempo reale.

## Panoramica

Il Dodo Payments Checkout SDK fornisce un modo fluido per integrare il nostro overlay di pagamento nella tua applicazione web. Costruito con TypeScript e standard web moderni, offre una soluzione robusta per gestire i pagamenti con gestione degli eventi in tempo reale e temi personalizzabili.

<Frame>
  <img src="https://mintcdn.com/dodopayments/mOQO5ej_lx0yH9p-/images/cover-images/overlay-checkout.png?fit=max&auto=format&n=mOQO5ej_lx0yH9p-&q=85&s=15d90c695e92914a9d54b10509d6fe47" alt="Immagine di copertina del checkout sovrapposto" width="3826" height="2160" data-path="images/cover-images/overlay-checkout.png" />
</Frame>

## Demo

<Card title="Interactive Demo" icon="play" href="https://atlas.dodopayments.com/pricing">
  Guarda il checkout sovrapposto in azione con la nostra demo dal vivo.
</Card>

## Inizio rapido

Inizia con il Dodo Payments Checkout SDK in poche righe di codice:

```typescript theme={null}
import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK
DodoPayments.Initialize({
  mode: "test", // 'test' or 'live'
  displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

<Tip>
  Ottieni l’URL del tuo checkout dall’[API di creazione della sessione di checkout](/api-reference/checkout-sessions/create).
</Tip>

## Guida all'integrazione passo-passo

<Steps>
  <Step title="Install the SDK">
    Installa il Dodo Payments Checkout SDK utilizzando il tuo gestore di pacchetti preferito:

    <CodeGroup>
      ```bash npm theme={null}
      npm install dodopayments-checkout
      ```

      ```bash yarn theme={null}
      yarn add dodopayments-checkout
      ```

      ```bash pnpm theme={null}
      pnpm add dodopayments-checkout
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    Inizializza l'SDK nella tua applicazione, tipicamente nel tuo componente principale o nel punto di ingresso dell'app:

    ```typescript theme={null}
    import { DodoPayments } from "dodopayments-checkout";

    DodoPayments.Initialize({
      mode: "test", // Change to 'live' for production
      displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
      onEvent: (event) => {
        console.log("Checkout event:", event);
        
        // Handle different events
        switch (event.event_type) {
          case "checkout.opened":
            // Checkout overlay has been opened
            break;
          case "checkout.closed":
            // Checkout has been closed
            break;
          case "checkout.error":
            // Handle errors
            console.error("Checkout error:", event.data?.message);
            break;
        }
      },
    });
    ```

    <Warning>
      Inizializza sempre l’SDK prima di cercare di aprire il checkout. L’inizializzazione dovrebbe avvenire una sola volta quando la tua applicazione viene caricata.
    </Warning>
  </Step>

  <Step title="Create a Checkout Button Component">
    Crea un componente che apre l'overlay di checkout:

    ```typescript theme={null}
    // components/CheckoutButton.tsx
    "use client";

    import { Button } from "@/components/ui/button";
    import { DodoPayments } from "dodopayments-checkout";
    import { useEffect, useState } from "react";

    export function CheckoutButton() {
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        // Initialize the SDK
        DodoPayments.Initialize({
          mode: "test",
          displayType: "overlay",
          onEvent: (event) => {
            switch (event.event_type) {
              case "checkout.opened":
                setIsLoading(false);
                break;
              case "checkout.error":
                setIsLoading(false);
                console.error("Checkout error:", event.data?.message);
                break;
            }
          },
        });
      }, []);

      const handleCheckout = async () => {
        try {
          setIsLoading(true);
          await DodoPayments.Checkout.open({
            checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
          });
        } catch (error) {
          console.error("Failed to open checkout:", error);
          setIsLoading(false);
        }
      };

      return (
        <Button 
          onClick={handleCheckout}
          disabled={isLoading}
        >
          {isLoading ? "Loading..." : "Checkout Now"}
        </Button>
      );
    }
    ```
  </Step>

  <Step title="Add Checkout to Your Page">
    Usa il componente pulsante di checkout nella tua applicazione:

    ```typescript theme={null}
    // app/page.tsx
    import { CheckoutButton } from "@/components/CheckoutButton";

    export default function Home() {
      return (
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
          <h1>Welcome to Our Store</h1>
          <CheckoutButton />
        </main>
      );
    }
    ```
  </Step>

  <Step title="Handle Success and Failure Pages">
    Crea pagine per gestire i reindirizzamenti del checkout:

    ```typescript theme={null}
    // app/success/page.tsx
    export default function SuccessPage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Successful!</h1>
          <p>Thank you for your purchase.</p>
        </div>
      );
    }

    // app/failure/page.tsx
    export default function FailurePage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Failed</h1>
          <p>Please try again or contact support.</p>
        </div>
      );
    }
    ```
  </Step>

  <Step title="Test Your Integration">
    1. Avvia il tuo server di sviluppo:

    ```bash theme={null}
    npm run dev
    ```

    2. Testa il flusso di checkout:
       * Clicca sul pulsante di checkout
       * Verifica che l'overlay appaia
       * Testa il flusso di pagamento utilizzando credenziali di test
       * Conferma che i reindirizzamenti funzionino correttamente

    <Check>
      Dovresti vedere gli eventi del checkout registrati nella console del browser.
    </Check>
  </Step>

  <Step title="Go Live">
    Quando sei pronto per la produzione:

    1. Cambia la modalità in `'live'`:

    ```typescript theme={null}
    DodoPayments.Initialize({
      mode: "live",
      displayType: "overlay",
      onEvent: (event) => {
        console.log("Checkout event:", event);
      }
    });
    ```

    2. Aggiorna i tuoi URL di checkout per utilizzare sessioni di checkout dal vivo dal tuo backend
    3. Testa l'intero flusso in produzione
    4. Monitora eventi ed errori
  </Step>
</Steps>

## Riferimento API

### Configurazione

#### Opzioni di inizializzazione

```typescript theme={null}
interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}
```

| Opzione       | Tipo                    | Richiesto | Descrizione                                                                                                       |
| ------------- | ----------------------- | --------- | ----------------------------------------------------------------------------------------------------------------- |
| `mode`        | `"test" \| "live"`      | Sì        | Modalità ambiente: `'test'` per lo sviluppo, `'live'` per la produzione                                           |
| `displayType` | `"overlay" \| "inline"` | No        | Tipo di visualizzazione: `'overlay'` per il checkout modale (predefinito), `'inline'` per il checkout incorporato |
| `onEvent`     | `function`              | Sì        | Funzione di callback per gestire gli eventi del checkout                                                          |

#### Opzioni di checkout

```typescript theme={null}
interface CheckoutOptions {
  checkoutUrl: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
  };
}
```

| Opzione                     | Tipo      | Richiesto | Descrizione                                                                                                                                                                                                     |
| --------------------------- | --------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `checkoutUrl`               | `string`  | Sì        | URL della sessione di checkout dall’[API di creazione della sessione di checkout](/api-reference/checkout-sessions/create)                                                                                      |
| `options.showTimer`         | `boolean` | No        | Mostra o nasconde il timer del checkout. Il valore predefinito è `true`. Quando disabilitato, riceverai l’evento `checkout.link_expired` quando la sessione scade.                                              |
| `options.showSecurityBadge` | `boolean` | No        | Mostra o nasconde il badge di sicurezza. Il valore predefinito è `true`.                                                                                                                                        |
| `options.manualRedirect`    | `boolean` | No        | Quando abilitato, il checkout non reindirizzerà automaticamente dopo il completamento. Riceverai invece gli eventi `checkout.status` e `checkout.redirect_requested` per gestire tu stesso il reindirizzamento. |

### Metodi

#### Apri Checkout

Apre l'overlay di checkout con l'URL della sessione di checkout specificato.

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

Puoi anche passare opzioni aggiuntive per personalizzare il comportamento del checkout:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: false,
    showSecurityBadge: false,
    manualRedirect: true,
  },
});
```

Quando utilizzi `manualRedirect`, gestisci il completamento del checkout nella tua callback `onEvent`:

```typescript theme={null}
DodoPayments.Initialize({
  mode: "test",
  displayType: "overlay",
  onEvent: (event) => {
    if (event.event_type === "checkout.status") {
      const status = event.data?.message?.status;
      // Handle status: "succeeded", "failed", or "processing"
    }
    if (event.event_type === "checkout.redirect_requested") {
      const redirectUrl = event.data?.message?.redirect_to;
      // Redirect the customer manually
      window.location.href = redirectUrl;
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
    }
  },
});
```

#### Chiudi Checkout

Chiude programmaticamente l'overlay di checkout.

```typescript theme={null}
DodoPayments.Checkout.close();
```

#### Controlla Stato

Restituisce se l'overlay di checkout è attualmente aperto.

```typescript theme={null}
const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean
```

### Eventi

L’SDK fornisce eventi in tempo reale ai quali puoi ascoltare tramite la callback `onEvent`:

#### Dati Evento Stato Checkout

Quando `manualRedirect` è abilitato, ricevi l’evento `checkout.status` con i seguenti dati:

```typescript theme={null}
interface CheckoutStatusEventData {
  message: {
    status?: "succeeded" | "failed" | "processing";
  };
}
```

#### Dati Evento Reindirizzamento Checkout Richiesto

Quando `manualRedirect` è abilitato, ricevi l’evento `checkout.redirect_requested` con i seguenti dati:

```typescript theme={null}
interface CheckoutRedirectRequestedEventData {
  message: {
    redirect_to?: string;
  };
}
```

```typescript theme={null}
DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        break;
      case "checkout.form_ready":
        // Checkout form is ready for user input
        break;
      case "checkout.payment_page_opened":
        // Payment page has been displayed
        break;
      case "checkout.customer_details_submitted":
        // Customer and billing details submitted
        break;
      case "checkout.closed":
        // Checkout has been closed
        break;
      case "checkout.redirect":
        // Checkout will perform a redirect
        break;
      case "checkout.error":
        // An error occurred
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Checkout session has expired (only when showTimer is false)
        break;
      case "checkout.status":
        // Checkout status update (only when manualRedirect is enabled)
        const status = event.data?.message?.status;
        break;
      case "checkout.redirect_requested":
        // Redirect requested (only when manualRedirect is enabled)
        const redirectUrl = event.data?.message?.redirect_to;
        break;
    }
  }
});
```

| Tipo di evento                        | Descrizione                                                                                                                |
| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `checkout.opened`                     | L’overlay del checkout è stato aperto                                                                                      |
| `checkout.form_ready`                 | Il modulo di checkout è pronto per ricevere l’input dell’utente. Utile per nascondere gli stati di caricamento.            |
| `checkout.payment_page_opened`        | La pagina di pagamento è stata visualizzata                                                                                |
| `checkout.customer_details_submitted` | I dettagli del cliente e di fatturazione sono stati inviati                                                                |
| `checkout.closed`                     | L’overlay del checkout è stato chiuso                                                                                      |
| `checkout.redirect`                   | Il checkout eseguirà un reindirizzamento                                                                                   |
| `checkout.error`                      | Si è verificato un errore durante il checkout                                                                              |
| `checkout.link_expired`               | Viene attivato quando la sessione di checkout scade. Viene ricevuto solo quando `showTimer` è impostato su `false`.        |
| `checkout.status`                     | Viene attivato quando `manualRedirect` è abilitato. Contiene lo stato del checkout (`succeeded`, `failed` o `processing`). |
| `checkout.redirect_requested`         | Viene attivato quando `manualRedirect` è abilitato. Contiene l’URL al quale reindirizzare il cliente.                      |

## Opzioni di Implementazione

### Installazione tramite Package Manager

Installa tramite npm, yarn o pnpm come mostrato nella [Guida all'Integrazione Passo-Passo](#step-by-step-integration-guide).

### Implementazione CDN

Per un'integrazione rapida senza passaggi di build, puoi utilizzare il nostro CDN:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test", // Change to 'live' for production
            displayType: "overlay",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <button onclick="openCheckout()">Checkout Now</button>

    <script>
        function openCheckout() {
            DodoPaymentsCheckout.DodoPayments.Checkout.open({
                checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
            });
        }
    </script>
</body>
</html>
```

### Personalizzazione del Tema

Puoi personalizzare l’aspetto del checkout passando un oggetto `themeConfig` nel parametro `options` quando apri il checkout. La configurazione del tema supporta sia la modalità chiara sia quella scura, consentendoti di personalizzare colori, bordi, testi, pulsanti e raggio dei bordi.

<Info>
  Questa sezione copre la configurazione del tema lato client utilizzando il Checkout SDK. Puoi anche configurare i temi lato server quando crei una sessione di checkout tramite l'API usando il parametro `theme_config`. Consulta [Checkout Theme Customization](/features/checkout#checkout-theme-customization) per la configurazione a livello API, oppure usa la [pagina Design](/features/design) nel dashboard per configurare visivamente i temi con anteprima live.
</Info>

#### Configurazione base del tema

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#344054",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### Configurazione completa del tema

Tutte le proprietà del tema disponibili:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        // Background colors
        bgPrimary: "#FFFFFF",        // Primary background color
        bgSecondary: "#F9FAFB",      // Secondary background color (e.g., tabs)
        
        // Border colors
        borderPrimary: "#D0D5DD",     // Primary border color
        borderSecondary: "#6B7280",  // Secondary border color
        
        // Text colors
        textPrimary: "#344054",       // Primary text color
        textSecondary: "#6B7280",    // Secondary text color
        textPlaceholder: "#667085",  // Placeholder text color
        textError: "#D92D20",        // Error text color
        textSuccess: "#10B981",      // Success text color
        
        // Button colors
        buttonPrimary: "#A6E500",           // Primary button background
        buttonPrimaryHover: "#8CC500",      // Primary button hover state
        buttonTextPrimary: "#0D0D0D",       // Primary button text color
        buttonSecondary: "#F3F4F6",         // Secondary button background
        buttonSecondaryHover: "#E5E7EB",     // Secondary button hover state
        buttonTextSecondary: "#344054",     // Secondary button text color
      },
      dark: {
        // Background colors
        bgPrimary: "#0D0D0D",
        bgSecondary: "#1A1A1A",
        
        // Border colors
        borderPrimary: "#323232",
        borderSecondary: "#D1D5DB",
        
        // Text colors
        textPrimary: "#FFFFFF",
        textSecondary: "#909090",
        textPlaceholder: "#9CA3AF",
        textError: "#F97066",
        textSuccess: "#34D399",
        
        // Button colors
        buttonPrimary: "#A6E500",
        buttonPrimaryHover: "#8CC500",
        buttonTextPrimary: "#0D0D0D",
        buttonSecondary: "#2A2A2A",
        buttonSecondaryHover: "#3A3A3A",
        buttonTextSecondary: "#FFFFFF",
      },
      radius: "8px", // Border radius for inputs, buttons, and tabs
    },
  },
});
```

#### Solo modalità chiara

Se desideri personalizzare solo il tema chiaro:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#000000",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### Solo modalità scura

Se desideri personalizzare solo il tema scuro:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      dark: {
        bgPrimary: "#000000",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### Sovrascrittura parziale del tema

Puoi sovrascrivere solo determinate proprietà. Il checkout utilizzerà i valori predefiniti per le proprietà che non specifichi:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        buttonPrimary: "#FF6B6B", // Only override primary button color
      },
      radius: "16px", // Override border radius
    },
  },
});
```

#### Configurazione del tema con altre opzioni

Puoi combinare la configurazione del tema con altre opzioni di checkout:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: true,
    showSecurityBadge: true,
    manualRedirect: false,
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### Tipi TypeScript

Per gli utenti TypeScript, tutti i tipi di configurazione del tema sono esportati:

```typescript theme={null}
import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

const themeConfig: ThemeConfig = {
  light: {
    bgPrimary: "#FFFFFF",
    // ... other properties
  },
  dark: {
    bgPrimary: "#0D0D0D",
    // ... other properties
  },
  radius: "8px",
};
```

## Gestione degli errori

L’SDK fornisce informazioni dettagliate sugli errori tramite il sistema di eventi. Implementa sempre una corretta gestione degli errori nella tua callback `onEvent`:

```typescript theme={null}
DodoPayments.Initialize({
  mode: "test",
  displayType: "overlay",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
      // You may want to show a user-friendly error message
      // or retry the checkout process
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
      console.warn("Checkout session has expired");
    }
  }
});
```

<Warning>
  Gestisci sempre l’evento `checkout.error` per garantire una buona esperienza utente quando si verificano errori.
</Warning>

## Best Practice

1. **Inizializza una volta**: inizializza l’SDK una sola volta quando la tua applicazione viene caricata, non ad ogni tentativo di checkout
2. **Gestione degli errori**: implementa sempre una corretta gestione degli errori nella tua callback degli eventi
3. **Modalità di test**: usa la modalità `test` durante lo sviluppo e passa a `live` solo quando sei pronto per la produzione
4. **Gestione degli eventi**: gestisci tutti gli eventi rilevanti per offrire un’esperienza utente completa
5. **URL validi**: utilizza sempre URL di checkout validi provenienti dall’API di creazione della sessione di checkout
6. **TypeScript**: usa TypeScript per una migliore sicurezza dei tipi e esperienza di sviluppo
7. **Stati di caricamento**: mostra stati di caricamento mentre il checkout si apre per migliorare l’UX
8. **Reindirizzamenti manuali**: usa `manualRedirect` quando hai bisogno di un controllo personalizzato sulla navigazione post-checkout
9. **Gestione del timer**: disabilita il timer (`showTimer: false`) se vuoi gestire manualmente la scadenza della sessione

## Risoluzione dei problemi

<AccordionGroup>
  <Accordion title="Checkout not opening">
    **Possibili cause:**

    * SDK non inizializzato prima di chiamare `open()`
    * URL di checkout non valido
    * Errori JavaScript nella console
    * Problemi di connettività di rete

    **Soluzioni:**

    * Verifica che l’inizializzazione dell’SDK avvenga prima di aprire il checkout
    * Controlla eventuali errori nella console
    * Assicurati che l’URL del checkout sia valido e proveniente dall’API di creazione della sessione di checkout
    * Verifica la connettività di rete
  </Accordion>

  <Accordion title="Events not firing">
    **Possibili cause:**

    * Il gestore degli eventi non è configurato correttamente
    * Errori JavaScript che impediscono la propagazione degli eventi
    * L’SDK non è stato inizializzato correttamente

    **Soluzioni:**

    * Conferma che il gestore degli eventi sia configurato correttamente in `Initialize()`
    * Controlla la console del browser per errori JavaScript
    * Verifica che l’inizializzazione dell’SDK sia stata completata con successo
    * Testa prima con un gestore degli eventi semplice
  </Accordion>

  <Accordion title="Styling issues">
    **Possibili cause:**

    * Conflitti CSS con gli stili della tua applicazione
    * Impostazioni del tema non applicate correttamente
    * Problemi con il design reattivo

    **Soluzioni:**

    * Controlla eventuali conflitti CSS negli strumenti di sviluppo del browser
    * Verifica che le impostazioni del tema siano corrette
    * Testa su diverse dimensioni dello schermo
    * Assicurati che non ci siano conflitti di z-index con l’overlay
  </Accordion>
</AccordionGroup>

## Abilitazione dei portafogli digitali

Per informazioni dettagliate sulla configurazione di Google Pay e altri portafogli digitali, consulta la pagina <a href="/features/payment-methods/digital-wallets">Portafogli digitali</a>.

<Note>
  Apple Pay non è ancora supportato nel checkout sovrapposto. Il supporto per Apple Pay arriverà presto.
</Note>

## Supporto del browser

L’SDK Dodo Payments Checkout supporta i seguenti browser:

* Chrome (ultima versione)
* Firefox (ultima versione)
* Safari (ultima versione)
* Edge (ultima versione)
* IE11+

## Checkout sovrapposto vs inline

Scegli il tipo di checkout più adatto al tuo caso d’uso: