Checkout Inline

Il checkout inline incorpora un modulo di pagamento sicuro direttamente nel layout della tua pagina. A differenza del checkout overlay, che si apre come modale, il checkout inline diventa parte della tua pagina. Controlli il layout e puoi visualizzare il riepilogo dell’ordine accanto al modulo di checkout.

Modulo di checkout inline incorporato in una pagina prodotto con riepilogo dell’ordine

Come funziona

Il checkout inline visualizza un frame sicuro di Dodo Payments all’interno di un contenitore nella tua pagina. Il frame gestisce la raccolta dei dati del cliente e dei dettagli di pagamento. La tua pagina visualizza articoli, totali e altre informazioni. L’SDK consente alla tua pagina e al frame di checkout di comunicare tra loro. Al completamento del checkout, Dodo Payments crea il pagamento o l’abbonamento per un prodotto in abbonamento e invia un webhook per consentirti di fornire l’accesso.

Il frame del checkout inline gestisce in modo sicuro tutte le informazioni di pagamento sensibili, garantendo la conformità PCI senza richiedere certificazioni aggiuntive da parte tua.

Cosa rende efficace un checkout inline

I clienti devono sapere da chi stanno acquistando, cosa stanno acquistando e quanto stanno pagando. La tua implementazione deve includere:

Esempio di checkout inline con gli elementi obbligatori contrassegnati — Example inline checkout layout showing required elements

Informazioni ricorrenti: se il pagamento è ricorrente, mostra la frequenza e il totale da pagare al rinnovo. Se è prevista una prova gratuita, mostrane la durata.
Descrizioni degli articoli: una descrizione di ciò che viene acquistato.
Totali della transazione: subtotale, imposta totale e totale complessivo, inclusa la valuta.
Piè di pagina di Dodo Payments: il frame completo del checkout inline, incluso il piè di pagina con le informazioni di Dodo Payments, i termini di vendita e l’informativa sulla privacy.
Politica di rimborso: un link alla tua politica di rimborso, se differisce dalla politica di rimborso standard di Dodo Payments.

Visualizza sempre il frame completo del checkout inline, incluso il piè di pagina. Rimuovere o nascondere le informazioni legali viola i requisiti di conformità.

Percorso del cliente

Il flusso di checkout dipende dalla configurazione della sessione di checkout. In base a come configuri la sessione, i clienti potrebbero visualizzare tutte le informazioni su un’unica pagina oppure distribuite su più passaggi.

Customer opens checkout

Apri il checkout inline passando un URL di checkout. Usa gli eventi dell’SDK, come checkout.breakdown, per visualizzare e aggiornare le informazioni nella pagina.

Pagina iniziale del checkout con elenco degli articoli e modulo di pagamento

Customer enters their details

Il checkout inline chiede innanzitutto ai clienti di inserire il proprio indirizzo email, selezionare il paese e, se richiesto, inserire il codice ZIP o il codice postale. Questo passaggio raccoglie tutte le informazioni necessarie per determinare le imposte e i metodi di pagamento disponibili.Puoi precompilare i dati del cliente e mostrare gli indirizzi salvati per semplificare l’esperienza.

Customer selects payment method

Dopo aver inserito i propri dati, i clienti visualizzano i metodi di pagamento disponibili e il modulo di pagamento. Le opzioni possono includere carta di credito o debito, PayPal, Apple Pay, Google Pay e altri metodi di pagamento locali in base alla posizione.Visualizza i metodi di pagamento salvati, se disponibili, per velocizzare il checkout.

Metodi di pagamento disponibili e modulo per i dettagli della carta

Checkout completed

Dodo Payments instrada ogni pagamento verso l’acquirer migliore per quella vendita, così da massimizzare le probabilità di successo. I clienti accedono a un flusso di successo che puoi creare.

Schermata di successo con segno di spunta di conferma

Dodo Payments creates the payment or subscription

Dodo Payments crea il pagamento o l’abbonamento per un prodotto in abbonamento e invia un webhook per consentirti di fornire l’accesso. Il metodo di pagamento utilizzato dal cliente viene salvato per i rinnovi o le modifiche all’abbonamento.

Avvio rapido

Installa l’SDK, inizializzalo per la modalità inline e apri il checkout in un elemento contenitore:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Assicurati di avere nella pagina un elemento contenitore con il corrispondente id: <div id="dodo-inline-checkout"></div>.

Integrazione passo passo

Install the SDK

Installa tramite npm, yarn o pnpm:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK for Inline Display

Inizializza l’SDK e specifica displayType: 'inline'. Ascolta l’evento checkout.breakdown per aggiornare l’interfaccia con i calcoli in tempo reale di imposte e totali:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event) => {
    if (event.event_type === "checkout.breakdown") {
      const breakdown = event.data?.message;
      // Update your UI with breakdown.subTotal, breakdown.tax, breakdown.total, etc.
    }
  },
});

Create a Container Element

Aggiungi al tuo HTML un elemento nel quale verrà inserito il frame del checkout:

<div id="dodo-inline-checkout"></div>

Open the Checkout

Chiama DodoPayments.Checkout.open() con checkoutUrl e elementId del contenitore:

DodoPayments.Checkout.open({
  checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
  elementId: "dodo-inline-checkout"
});

Test Your Integration

Avvia il server di sviluppo:

npm run dev

Testa il flusso di checkout:
- Inserisci email e dati dell’indirizzo nel frame inline
- Verifica che il riepilogo dell’ordine personalizzato si aggiorni in tempo reale
- Testa il flusso di pagamento usando credenziali di test
- Conferma che i reindirizzamenti funzionino correttamente

Dovresti vedere gli eventi checkout.breakdown registrati nella console del browser se hai aggiunto un log della console nel callback onEvent.

Go Live

Quando sei pronto per la produzione:

Modifica la modalità in 'live':

DodoPayments.Initialize({
  mode: "live",
  displayType: "inline",
  onEvent: (event) => {
    // Handle events
  }
});

Aggiorna gli URL di checkout per usare sessioni di checkout live dal tuo backend
Testa l’intero flusso in produzione

Esempio completo in React

Questo esempio mostra come implementare un riepilogo dell’ordine personalizzato accanto al checkout inline, mantenendoli sincronizzati tramite l’evento checkout.breakdown:

"use client";

import { useEffect, useState } from 'react';
import { DodoPayments, CheckoutBreakdownData } from 'dodopayments-checkout';

export default function CheckoutPage() {
  const [breakdown, setBreakdown] = useState<Partial<CheckoutBreakdownData>>({});

  useEffect(() => {
    // 1. Initialize the SDK
    DodoPayments.Initialize({
      mode: 'test',
      displayType: 'inline',
      onEvent: (event) => {
        // 2. Listen for the 'checkout.breakdown' event
        if (event.event_type === "checkout.breakdown") {
          const message = event.data?.message as CheckoutBreakdownData;
          if (message) setBreakdown(message);
        }
      }
    });

    // 3. Open the checkout in the specified container
    DodoPayments.Checkout.open({
      checkoutUrl: 'https://test.checkout.dodopayments.com/session/cks_123',
      elementId: 'dodo-inline-checkout'
    });

    return () => DodoPayments.Checkout.close();
  }, []);

  const format = (amt: number | null | undefined, curr: string | null | undefined) => 
    amt != null && curr ? `${curr} ${(amt/100).toFixed(2)}` : '0.00';

  const currency = breakdown.currency ?? breakdown.finalTotalCurrency ?? '';

  return (
    <div className="flex flex-col md:flex-row min-h-screen">
      {/* Left Side - Checkout Form */}
      <div className="w-full md:w-1/2 flex items-center">
        <div id="dodo-inline-checkout" className='w-full' />
      </div>

      {/* Right Side - Custom Order Summary */}
      <div className="w-full md:w-1/2 p-8 bg-gray-50">
        <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
        <div className="space-y-2">
          {breakdown.subTotal != null && (
            <div className="flex justify-between">
              <span>Subtotal</span>
              <span>{format(breakdown.subTotal, currency)}</span>
            </div>
          )}
          {breakdown.discount != null && breakdown.discount > 0 && (
            <div className="flex justify-between">
              <span>Discount</span>
              <span>{format(breakdown.discount, currency)}</span>
            </div>
          )}
          {breakdown.tax != null && (
            <div className="flex justify-between">
              <span>Tax</span>
              <span>{format(breakdown.tax, currency)}</span>
            </div>
          )}
          <hr />
          {(breakdown.finalTotal ?? breakdown.total) != null && (
            <div className="flex justify-between font-bold text-xl">
              <span>Total</span>
              <span>{format(breakdown.finalTotal ?? breakdown.total, breakdown.finalTotalCurrency ?? currency)}</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Riferimento API

Inizializzazione

Chiama Initialize una volta per configurare l’SDK:

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

DodoPayments.Initialize(options);

Opzione	Tipo	Obbligatorio	Descrizione
`mode`	`"test" \| "live"`	Sì	Modalità dell’ambiente.
`displayType`	`"inline" \| "overlay"`	Sì	Deve essere impostato su `"inline"` per incorporare il checkout.
`onEvent`	`function`	Sì	Funzione callback per gestire gli eventi del checkout.

Apertura del checkout

Apri il frame del checkout in un contenitore:

export type FontSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
export type FontWeight = "normal" | "medium" | "bold" | "extraBold";

interface CheckoutOptions {
  checkoutUrl: string;
  elementId: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

DodoPayments.Checkout.open(options);

Opzione	Tipo	Obbligatorio	Descrizione
`checkoutUrl`	`string`	Sì	URL della sessione di checkout dall’API per creare una sessione di checkout
`elementId`	`string`	Sì	`id` dell’elemento DOM in cui deve essere visualizzato il checkout
`options.showTimer`	`boolean`	No	Mostra o nasconde il timer della sessione. Il valore predefinito è `true`. Quando è impostato su `false`, ricevi l’evento `checkout.link_expired` alla scadenza della sessione.
`options.showSecurityBadge`	`boolean`	No	Mostra o nasconde il badge di sicurezza. Il valore predefinito è `true`
`options.manualRedirect`	`boolean`	No	Quando è `true`, impedisce i reindirizzamenti automatici. Il checkout emette `checkout.status` con l’esito del pagamento e `checkout.redirect_requested` con l’URL da aprire; la navigazione viene gestita da te
`options.payButtonText`	`string`	No	Testo personalizzato per il pulsante di pagamento
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	No	Dimensione globale del carattere per il checkout
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	No	Peso globale del carattere per il checkout

Chiusura del checkout

Rimuovi programmaticamente il frame del checkout e cancella gli event listener:

DodoPayments.Checkout.close();

Verifica dello stato

Verifica se il frame del checkout è attualmente inserito:

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

Eventi

L’SDK fornisce eventi in tempo reale tramite il callback onEvent. Per il checkout inline, checkout.breakdown è particolarmente utile per sincronizzare l’interfaccia:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Frame has loaded
        break;
      case "checkout.form_ready":
        // Form is ready for user input
        break;
      case "checkout.breakdown":
        // Prices, taxes, or discounts updated
        break;
      case "checkout.customer_details_submitted":
        // Customer details submitted
        break;
      case "checkout.pay_button_clicked":
        // Customer clicked pay button
        break;
      case "checkout.redirect":
        // Checkout will redirect
        break;
      case "checkout.error":
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Session expired (only when showTimer is false)
        break;
    }
  }
});

Evento	Descrizione
`checkout.opened`	Il frame del checkout è stato caricato
`checkout.form_ready`	Il modulo è pronto per l’inserimento dei dati. Usalo per nascondere gli stati di caricamento
`checkout.breakdown`	Prezzi, imposte o sconti aggiornati
`checkout.customer_details_submitted`	Dati del cliente inviati
`checkout.pay_button_clicked`	Il cliente ha fatto clic sul pulsante di pagamento. Utile per analisi e monitoraggio dei funnel di conversione
`checkout.redirect`	Il checkout verrà reindirizzato, ad esempio a una pagina bancaria
`checkout.error`	Si è verificato un errore durante il checkout
`checkout.link_expired`	La sessione di checkout è scaduta. Ricevuto solo quando `showTimer` è impostato su `false`

Dati del riepilogo del checkout

L’evento checkout.breakdown fornisce informazioni sui prezzi e sulle imposte:

interface CheckoutBreakdownData {
  subTotal?: number;          // Amount in cents
  discount?: number;          // Amount in cents
  tax?: number;               // Amount in cents
  total?: number;             // Amount in cents
  currency?: string;          // e.g., "USD"
  finalTotal?: number;        // Final amount including adjustments
  finalTotalCurrency?: string; // Currency for the final total
}

L’evento viene attivato quando il frame del checkout viene caricato e nuovamente ogni volta che il prezzo viene ricalcolato, ad esempio quando il cliente seleziona un paese o inserisce un codice postale che modifica l’imposta. Dettagli dei campi:

Campo	Descrizione
`subTotal`	Somma di tutti gli articoli prima di sconti o imposte
`discount`	Valore totale di tutti gli sconti applicati
`tax`	Importo dell’imposta calcolata. Si aggiorna dinamicamente mentre l’utente interagisce con i campi dell’indirizzo
`total`	Risultato di `subTotal - discount + tax` nella valuta di base della sessione
`currency`	Codice valuta ISO, ad esempio `"USD"`, per i valori standard di subtotale, sconto e imposta.
`finalTotal`	Importo effettivo addebitato al cliente. Può includere ulteriori adeguamenti del cambio o commissioni dei metodi di pagamento locali che non fanno parte del riepilogo di base del prezzo.
`finalTotalCurrency`	Valuta utilizzata effettivamente dal cliente per il pagamento. Può differire da `currency` se sono attivi la parità del potere d’acquisto o la conversione nella valuta locale.

Suggerimenti per l’integrazione:

Formattazione della valuta: i prezzi sono numeri interi nell’unità minima della valuta, ad esempio i centesimi per USD. Per le valute con due decimali, dividi per 100 prima di formattare con Intl.NumberFormat. Le valute senza decimali, come JPY, non hanno un’unità minore, quindi non devono essere divise.
Gestione degli stati iniziali: al primo caricamento del checkout, tax e discount possono essere 0 o null finché l’utente non fornisce i dati di fatturazione o applica un codice. Gestisci questi stati in modo appropriato, ad esempio mostrando un trattino — o nascondendo la riga.
“Totale finale” e “Totale”: mentre total fornisce il calcolo del prezzo standard, finalTotal è la fonte autorevole per la transazione. Se finalTotal è presente, riflette esattamente l’importo che verrà addebitato sulla carta del cliente.
Feedback in tempo reale: usa il campo tax per mostrare agli utenti che le imposte vengono calcolate in tempo reale. Questo rende la pagina di checkout più dinamica e riduce gli attriti durante l’inserimento dell’indirizzo.

Implementazione tramite CDN

Per una rapida integrazione senza una fase di build, carica l’SDK dal CDN:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dodo Payments Inline Checkout</title>
  
  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
  <script>
    DodoPaymentsCheckout.DodoPayments.Initialize({
      mode: "test",
      displayType: "inline",
      onEvent: (event) => {
        console.log('Checkout event:', event);
      }
    });
  </script>
</head>
<body>
  <div id="dodo-inline-checkout"></div>

  <script>
    DodoPaymentsCheckout.DodoPayments.Checkout.open({
      checkoutUrl: "https://test.checkout.dodopayments.com/session/cks_123",
      elementId: "dodo-inline-checkout"
    });
  </script>
</body>
</html>

Aggiornamento del metodo di pagamento

Il checkout inline supporta l’aggiornamento dei metodi di pagamento per gli abbonamenti. Quando un cliente deve aggiornare il metodo di pagamento di un abbonamento attivo o riattivare un abbonamento sospeso, puoi visualizzare il flusso di aggiornamento direttamente nel layout della tua pagina.

Come funziona

Chiama l’API Update Payment Method per ottenere un payment_link:

// On your server. `client` is the Dodo Payments server SDK (`new DodoPayments()` from the `dodopayments` package).
const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

Passa l’payment_link restituito come checkoutUrl per aprire il checkout inline:

DodoPayments.Checkout.open({
  checkoutUrl: response.payment_link,
  elementId: "dodo-inline-checkout"
});

Il frame inline visualizza solo il modulo per la raccolta del metodo di pagamento. I clienti possono inserire i dati di una nuova carta o selezionare un metodo di pagamento salvato senza lasciare la pagina.

Per gli abbonamenti sospesi

Quando aggiorni il metodo di pagamento di un abbonamento nello stato on_hold, Dodo Payments crea automaticamente un addebito per gli importi ancora dovuti. Monitora i webhook payment.succeeded e subscription.active per confermare la riattivazione.

const response = await client.subscriptions.updatePaymentMethod('sub_123', {
  payment_method: { type: 'new', return_url: 'https://example.com/return' }
});

if (response.payment_id) {
  // Charge created for remaining dues
  DodoPayments.Checkout.open({
    checkoutUrl: response.payment_link,
    elementId: "dodo-inline-checkout"
  });
}

Puoi anche usare un metodo di pagamento salvato esistente invece di raccogliere nuovi dati, passando type: 'existing' con un payment_method_id all’API Update Payment Method.

Gestione degli errori

Implementa sempre la gestione degli errori nel callback onEvent:

DodoPayments.Initialize({
  mode: "test",
  displayType: "inline",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Show user-friendly error message
    }
  }
});

Gestisci sempre l’evento checkout.error per offrire una buona esperienza utente quando si verificano errori.

Best practice

Design responsive: assicurati che l’elemento contenitore disponga di larghezza e altezza sufficienti. In genere l’iframe si espande fino a riempire il contenitore.
Sincronizzazione: usa l’evento checkout.breakdown per mantenere sincronizzati il riepilogo dell’ordine personalizzato o le tabelle dei prezzi con ciò che l’utente vede nel frame di checkout.
Stati skeleton: mostra un indicatore di caricamento nel contenitore finché non viene attivato l’evento checkout.opened.
Pulizia: chiama DodoPayments.Checkout.close() quando il componente viene smontato, per rimuovere l’iframe e gli event listener.

Per le implementazioni in modalità scura, usa #0d0d0d come colore di sfondo per un’integrazione visiva ottimale con il frame del checkout inline.

Convalida dello stato del pagamento

Non affidarti esclusivamente agli eventi del checkout inline per determinare il successo o il fallimento del pagamento. Implementa sempre la convalida lato server usando webhook e/o polling.

Perché la convalida lato server è essenziale

Sebbene gli eventi del checkout inline forniscano feedback in tempo reale, non devono essere l’unica fonte autorevole per lo stato del pagamento. Problemi di rete, arresti anomali del browser o utenti che chiudono la pagina possono causare la perdita degli eventi. Per garantire una convalida affidabile del pagamento:

Ascolta gli eventi webhook - Dodo Payments invia webhook per le modifiche allo stato del pagamento
Implementa un meccanismo di polling - Il frontend deve interrogare il server per ricevere gli aggiornamenti di stato
Combina entrambi gli approcci - Usa i webhook come fonte primaria e il polling come fallback

Architettura consigliata

Passaggi di implementazione

1. Ascolta gli eventi del checkout - Quando l’utente fa clic su paga, inizia a prepararti per verificare lo stato:

onEvent: (event) => {
  if (event.event_type === 'checkout.pay_button_clicked') {
    // Start polling your server for confirmed status
    startPolling();
  }
}

2. Interroga il server - Crea un endpoint che verifichi nel database lo stato del pagamento, aggiornato dai webhook:

// Poll every 2 seconds until status is confirmed
const interval = setInterval(async () => {
  const { status } = await fetch(`/api/payments/${paymentId}/status`).then(r => r.json());
  if (status === 'succeeded' || status === 'failed') {
    clearInterval(interval);
    handlePaymentResult(status);
  }
}, 2000);

3. Gestisci i webhook lato server - Aggiorna il database quando Dodo invia webhook payment.succeeded o payment.failed. Consulta la nostra documentazione sui webhook per maggiori dettagli.

Risoluzione dei problemi

Checkout frame is not appearing

Verifica che elementId corrisponda all’id di un div effettivamente presente nel DOM
Assicurati che displayType: 'inline' sia stato passato a Initialize
Verifica che checkoutUrl sia valido

Taxes are not updating in my UI

Assicurati di ascoltare l’evento checkout.breakdown
Le imposte vengono calcolate solo dopo che l’utente ha inserito un paese e un codice postale validi nel frame del checkout

Wallet digitali

Per informazioni dettagliate sulla configurazione di Apple Pay, Google Pay e altri wallet digitali, consulta la pagina Wallet digitali.

Configurazione rapida di Apple Pay

La verifica del dominio è necessaria solo per il checkout inline (incorporato). Non è necessaria per il checkout hosted.

Apple Pay non è disponibile per il checkout overlay.

Apple Pay viene verificato per dominio dalla dashboard.

Open Wallet domains

Vai a Settings → Payment Methods e, nella riga Apple Pay, fai clic su Manage domains.

Pulsante Manage domains nella riga Apple Pay nelle impostazioni Payment Methods — Open Wallet domains from the Apple Pay row

Download the domain association file

Nel pannello Wallet domains, scarica il file di associazione.

Pannello Wallet domains con il pulsante Download file — Download the Apple Pay domain association file

Fai clic su Register domain e inserisci il dominio in cui incorpori il checkout inline, ad esempio shop.example.com, quindi fai clic su Continue.

Modulo di registrazione di un dominio con un dominio inserito — Register the domain where you embed inline checkout

Host the file on your domain

Ospitalo all’indirizzo:

https://shop.example.com/.well-known/apple-developer-merchantid-domain-association

Deve essere servito tramite HTTPS, raggiungibile senza reindirizzamenti e fornito con Content-Type: application/octet-stream o text/plain.

Verify the domain

Fai clic su Verify domain. Dodo Payments conferma che il file è disponibile e invia il tuo dominio ad Apple.

Schermata di verifica del dominio con il percorso del file di associazione e il pulsante Verify domain — Verify the hosted association file

Confirm it's active

Quando lo stato mostra Active, Apple Pay è abilitato per quel dominio. Usa l’interruttore Enabled per attivarlo o disattivarlo per ciascun dominio.

Elenco dei domini Wallet con domini che mostrano lo stato Active di Apple Pay e gli interruttori Enabled — Verified domains show an Active status

Test the integration

Apri il checkout su un dispositivo Apple
Verifica che venga visualizzato il pulsante Apple Pay
Completa una transazione di test

Supporto dei browser

L’SDK Checkout di Dodo Payments supporta:

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

Checkout inline e overlay

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

Funzionalità	Inline	Overlay
Profondità dell’integrazione	Completamente incorporato nella pagina	Modale sopra la pagina
Controllo del layout	Completo	Limitato
Branding	Si adatta alla tua pagina	Separato dalla pagina
Impegno di implementazione	Maggiore	Minore
Ideale per	Pagine di checkout personalizzate, flussi ad alta conversione	Integrazione rapida, pagine esistenti

Usa il checkout inline quando vuoi il massimo controllo sull’esperienza di checkout e un branding coerente. Usa il checkout overlay per un’integrazione più rapida con modifiche minime alle pagine esistenti.

Risorse correlate

Overlay Checkout

Usa il checkout overlay per una rapida integrazione basata su modale.

Checkout Sessions API

Crea sessioni di checkout per alimentare le tue esperienze di checkout.

Webhooks

Gestisci gli eventi di pagamento lato server con i webhook.

Integration Guide

Guida completa all’integrazione di Dodo Payments.

Per ulteriore assistenza, visita la nostra community Discord o contatta il nostro team di supporto per sviluppatori.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Come funziona

Cosa rende efficace un checkout inline

Percorso del cliente

Avvio rapido

Integrazione passo passo

Esempio completo in React

Riferimento API

Inizializzazione

Apertura del checkout

Chiusura del checkout

Verifica dello stato

Eventi

Dati del riepilogo del checkout

Implementazione tramite CDN

Aggiornamento del metodo di pagamento

Come funziona

Per gli abbonamenti sospesi

Gestione degli errori

Best practice

Convalida dello stato del pagamento

Perché la convalida lato server è essenziale

Architettura consigliata

Passaggi di implementazione

Risoluzione dei problemi

Wallet digitali

Configurazione rapida di Apple Pay

Supporto dei browser

Checkout inline e overlay

Risorse correlate

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

​Come funziona

​Cosa rende efficace un checkout inline

​Percorso del cliente

​Avvio rapido

​Integrazione passo passo

​Esempio completo in React

​Riferimento API

​Inizializzazione

​Apertura del checkout

​Chiusura del checkout

​Verifica dello stato

​Eventi

​Dati del riepilogo del checkout

​Implementazione tramite CDN

​Aggiornamento del metodo di pagamento

​Come funziona

​Per gli abbonamenti sospesi

​Gestione degli errori

​Best practice

​Convalida dello stato del pagamento

​Perché la convalida lato server è essenziale

​Architettura consigliata

​Passaggi di implementazione

​Risoluzione dei problemi

​Wallet digitali

​Configurazione rapida di Apple Pay

​Supporto dei browser

​Checkout inline e overlay

​Risorse correlate

Overlay Checkout

Checkout Sessions API

Webhooks

Integration Guide

Come funziona

Cosa rende efficace un checkout inline

Percorso del cliente

Avvio rapido

Integrazione passo passo

Esempio completo in React

Riferimento API

Inizializzazione

Apertura del checkout

Chiusura del checkout

Verifica dello stato

Eventi

Dati del riepilogo del checkout

Implementazione tramite CDN

Aggiornamento del metodo di pagamento

Come funziona

Per gli abbonamenti sospesi

Gestione degli errori

Best practice

Convalida dello stato del pagamento

Perché la convalida lato server è essenziale

Architettura consigliata

Passaggi di implementazione

Risoluzione dei problemi

Wallet digitali

Configurazione rapida di Apple Pay

Supporto dei browser

Checkout inline e overlay

Risorse correlate