# Guida rapida (/it/online/getting-started/quick_start_guide)



Hosted Checkout Le offre una pagina di pagamento pronta all'uso per carte, Apple Pay e Google Pay. Il Suo server crea una sessione per un ordine, il cliente paga e il Suo server conferma l'esito prima di evadere l'ordine. Embedded Checkout inserisce campi della carta sicuri direttamente nella Sua pagina.

Provi entrambi i flussi qui sotto. La carta di prova è già inserita: selezioni **Pay** e segua il pagamento fino alla fine, oppure provi Apple Pay o Google Pay. Entrambe le demo sono repliche, quindi nessun dato lascia il Suo browser.

<Tabs defaultValue="hosted" className="my-6 overflow-visible rounded-none border-0 bg-transparent">
  <TabsList className="px-0">
    <TabsTrigger value="hosted">
      Hosted Checkout
    </TabsTrigger>

    <TabsTrigger value="embedded">
      Campi incorporati
    </TabsTrigger>
  </TabsList>

  <TabsContent value="hosted" className="rounded-none bg-transparent px-0 pt-6 pb-0">
    <HostedCheckoutDemo />
  </TabsContent>

  <TabsContent value="embedded" className="rounded-none bg-transparent px-0 pt-6 pb-0">
    <EmbeddedCheckoutDemo />
  </TabsContent>
</Tabs>

## Scegliere come pagano i clienti [#choose-how-customers-pay]

<CheckoutComparison />

<Callout title="Disponibilità" type="info">
  Checkout è live per gli esercenti approvati. Sia Hosted Checkout sia Embedded Checkout supportano carte, Apple Pay e Google Pay. La disponibilità dei wallet dipende dalle [impostazioni di Checkout](/online/integration/checkout_settings), dalla registrazione del dominio e dal dispositivo e dal browser del cliente. Embedded Checkout usa Tapaya.js **0.2.0** e il Node.js SDK **0.3.0**. Inizi dalla sandbox, poi segua [Andare live](#go-live).
</Callout>

## Accettare un pagamento [#accept-a-payment]

<div className="fd-steps [&_h3]:fd-step">
  ### Onboarding dell'esercente [#onboard-your-merchant]

  Completi l'[onboarding dell'esercente](/merchants/onboarding) con la funzionalità di pagamenti online, oppure con i pagamenti online e in presenza. Un esercente che usa solo Checkout non ha bisogno di un terminale. Fornisca il sito web del negozio e i dati dell'attività online, poi attenda l'approvazione del processore di pagamento. La sola creazione di un record dell'esercente o di una chiave API non abilita i pagamenti.

  Apra **Checkout** nella [Tapaya Platform](https://platform.tapaya.com/checkout-settings). Gli esercenti che richiedono i pagamenti online compaiono automaticamente, compresi quelli in attesa di approvazione. Prosegua quando l'esercente è **Ready**.

  Apra **Settings** dell'esercente. In **Merchant API key redirects**, aggiunga il Suo negozio a **Allowed websites** e imposti gli URL predefiniti di successo e di annullamento. Una piattaforma che usa la Secret key dell'organizzazione li imposta invece in **Organization defaults**. Gli esempi usano `https://shop.example`. Per wallet e branding, consulti le [impostazioni di Checkout](/online/integration/checkout_settings).

  ### Salvare la chiave sul server [#store-your-key-on-the-server]

  In **Settings** dell'esercente, selezioni **Create merchant key** e copi la chiave `tapaya_test_…`. Viene mostrata una sola volta. La conservi solo nella configurazione lato server. Non deve mai finire nel codice del browser o nel sistema di controllo versione.

  ```bash title=".env"
  TAPAYA_ENVIRONMENT=sandbox
  TAPAYA_CHECKOUT_API_URL=https://api.sandbox.tapaya.com
  TAPAYA_SECRET_KEY=tapaya_test_...
  ```

  L'SDK legge automaticamente `TAPAYA_SECRET_KEY` e `TAPAYA_ENVIRONMENT`. Gli esempi HTTP seguenti usano `TAPAYA_CHECKOUT_API_URL`. Carichi le variabili nel processo del Suo server; l'SDK non carica i file `.env`.

  Invii la chiave come `Authorization: Bearer <key>`. Una chiave dell'esercente identifica il proprio esercente, quindi non serve nessun'altra intestazione. Una piattaforma che serve molti esercenti usa invece la Secret key dell'organizzazione e invia `X-Tapaya-Merchant-Token` in ogni richiesta. Si veda [Autenticazione di Checkout](/online/integration/api_integration#authentication).

  ### Creare una sessione di Checkout [#create-a-checkout-session]

  Quando il cliente fa clic su **Checkout** nel Suo negozio, calcoli il totale finale sul Suo server, salvi l'ordine con una chiave di tentativo univoca e crei una sessione. `merchantOrderId` è obbligatorio e un ordine può essere pagato una sola volta. Gli importi sono espressi nell'unità minima della valuta, quindi `12100` corrisponde a 121,00 EUR.

  Con Node.js 22.13.0 o versioni successive, installi l'SDK ESM prima di usare l'esempio **Node.js SDK**:

  <CodeBlockTabs defaultValue="npm" groupId="package-manager">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="npm">
        npm
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="pnpm">
        pnpm
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="bun">
        Bun
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="npm">
      ```sh
      npm install @tapayadot/checkout
      ```
    </CodeBlockTab>

    <CodeBlockTab value="pnpm">
      ```sh
      pnpm add @tapayadot/checkout
      ```
    </CodeBlockTab>

    <CodeBlockTab value="bun">
      ```sh
      bun add @tapayadot/checkout
      ```
    </CodeBlockTab>
  </CodeBlockTabs>

  <CodeBlockTabs defaultValue="fetch" groupId="quick-start-server">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="fetch">
        HTTP (fetch)
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="node">
        Node.js SDK
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="curl">
        cURL
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="fetch">
      ```js title="server/checkout.js"
      const response = await fetch(
        new URL('/merchant/checkout-sessions', process.env.TAPAYA_CHECKOUT_API_URL),
        {
          method: 'POST',
          headers: {
            Authorization: `Bearer ${process.env.TAPAYA_SECRET_KEY}`,
            'Content-Type': 'application/json',
            'Idempotency-Key': order.checkoutAttemptKey,
          },
          body: JSON.stringify({
            merchantOrderId: order.id,
            amount: order.totalInMinorUnits,
            currency: order.currency,
            successUrl: 'https://shop.example/checkout/return',
            cancelUrl: 'https://shop.example/checkout/cancel',
          }),
        },
      );
      if (!response.ok) throw new Error(`Checkout failed (${response.status})`);
      const session = await response.json();
      ```
    </CodeBlockTab>

    <CodeBlockTab value="node">
      ```ts title="server/checkout.ts"
      import { Tapaya } from '@tapayadot/checkout';

      const tapaya = new Tapaya();
      const session = await tapaya.checkout.sessions.create(
      	{
      		merchantOrderId: order.id,
      		amount: order.totalInMinorUnits,
      		currency: order.currency,
      		successUrl: 'https://shop.example/checkout/return',
      		cancelUrl: 'https://shop.example/checkout/cancel',
      	},
      	{ idempotencyKey: order.checkoutAttemptKey },
      );
      ```
    </CodeBlockTab>

    <CodeBlockTab value="curl">
      ```bash title="Terminal"
      curl --request POST "$TAPAYA_CHECKOUT_API_URL/merchant/checkout-sessions" \
        --header "Authorization: Bearer $TAPAYA_SECRET_KEY" \
        --header 'Content-Type: application/json' \
        --header 'Idempotency-Key: order-1001-checkout-1' \
        --data '{
          "merchantOrderId": "order-1001",
          "amount": 12100,
          "currency": "EUR",
          "successUrl": "https://shop.example/checkout/return",
          "cancelUrl": "https://shop.example/checkout/cancel"
        }'
      ```
    </CodeBlockTab>
  </CodeBlockTabs>

  Se la richiesta va in timeout, la ripeta con la **stessa** chiave e lo stesso corpo. L'API restituisce di nuovo la sessione originale invece di crearne una seconda.

  ### Reindirizzare il cliente [#redirect-the-customer]

  Salvi `session.id` insieme all'ordine, poi invii il browser a `session.url` con HTTP 303. Usi l'URL esattamente come viene restituito.

  ```ts
  // First persist session.id as the order's checkoutSessionId.
  return Response.redirect(session.url, 303);
  ```

  Tapaya mostra il riepilogo dell'ordine e il modulo di pagamento sicuro e gestisce la tokenizzazione, 3-D Secure e l'addebito. Dopo un rifiuto, il cliente può provare un'altra carta nella stessa pagina. Le sessioni accettano nuovi pagamenti per 30 minuti.

  ### Verificare il pagamento sul server [#verify-the-payment-on-your-server]

  Quando il cliente arriva sul Suo URL di successo o di annullamento, recuperi la sessione con la Sua Secret key e la confronti con l'ordine salvato. Un reindirizzamento da solo non prova mai il pagamento.

  <CodeBlockTabs defaultValue="fetch" groupId="quick-start-status">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="fetch">
        HTTP (fetch)
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="node">
        Node.js SDK
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="fetch">
      ```js title="server/return.js"
      const response = await fetch(
        new URL(
          `/merchant/checkout-sessions/${encodeURIComponent(order.checkoutSessionId)}`,
          process.env.TAPAYA_CHECKOUT_API_URL,
        ),
        { headers: { Authorization: `Bearer ${process.env.TAPAYA_SECRET_KEY}` } },
      );
      if (!response.ok) throw new Error(`Status check failed (${response.status})`);
      const current = await response.json();
      ```
    </CodeBlockTab>

    <CodeBlockTab value="node">
      ```ts title="server/return.ts"
      import { Tapaya } from '@tapayadot/checkout';

      const tapaya = new Tapaya();
      const current = await tapaya.checkout.sessions.get(order.checkoutSessionId);
      ```
    </CodeBlockTab>
  </CodeBlockTabs>

  Con entrambe le integrazioni, confronti l'esito con l'ordine salvato prima di evaderlo:

  ```ts
  const matches =
    current.id === order.checkoutSessionId &&
    current.merchantOrderId === order.id &&
    current.amount === order.totalInMinorUnits &&
    current.currency === order.currency;

  if (matches && current.paymentStatus === 'successful') {
    await fulfillOnce(order); // idempotent, safe on repeated visits
  }
  ```

  Se lo stato è ancora `unpaid` o il recupero non riesce, conservi l'ID della sessione e ripeta il controllo. I webhook non sono ancora disponibili, quindi esegua un job di riconciliazione per i clienti che chiudono la scheda prima di tornare.
</div>

## Andare live [#go-live]

1. Completi l'[onboarding dell'esercente](/merchants/onboarding) in produzione con i pagamenti online, oppure con i pagamenti online e in presenza. Fornisca il sito web del negozio e i dati dell'attività online. Anche un esercente già attivo per i pagamenti in presenza necessita dell'approvazione del processore di pagamento per i pagamenti online.

2. Verifichi che l'esercente sia **Ready** nelle [impostazioni di Checkout](/online/integration/checkout_settings). Ciò richiede un esercente attivo, l'approvazione del processore di pagamento per i pagamenti online e un gateway live configurato.

3. Crei una chiave checkout dell'esercente di produzione, oppure usi la Secret key di produzione della Sua organizzazione con il token dell'esercente. Conservi le credenziali live sul Suo server.

4. Imposti l'origine dell'API e l'ambiente di produzione. Sostituisca la configurazione sandbox nel Suo deployment:

   ```bash title="Production server configuration"
   TAPAYA_ENVIRONMENT=production
   TAPAYA_CHECKOUT_API_URL=https://api.tapaya.com
   TAPAYA_SECRET_KEY=tapaya_live_...
   ```

   Gli esempi HTTP usano `TAPAYA_CHECKOUT_API_KEY`; imposti anche questa variabile sulla Sua chiave live. Usi l'URL della sessione esattamente come viene restituito. Le pagine ospitate di produzione si aprono su `https://checkout.tapaya.com`.

5. Configuri gli URL di ritorno di produzione per Hosted Checkout. Per Apple Pay incorporato, registri ogni dominio del negozio e vi ospiti il relativo file di verifica. Google Pay live richiede un Google Pay merchant ID configurato.

6. Completi la [checklist QA](/online/getting-started/checklist), compresa la verifica sul server e il job di produzione che controlla i pagamenti in sospeso. In produzione usi metodi di pagamento reali. Le carte di prova della sandbox valgono solo per la sandbox.

## Passaggi successivi [#next-steps]

<Cards>
  <Card title="Test" href="/online/getting-started/testing" description="Carte di prova per successo, rifiuto e 3-D Secure sul gateway sandbox." />

  <Card title="Hosted Checkout" href="/online/integration/hosted_checkout" description="La guida completa per il server, con gestione degli errori e nuovi tentativi per ogni approccio." />

  <Card title="Node.js SDK" href="/online/integration/node_sdk" description="Opzioni del client, metodi delle sessioni, nuovi tentativi ed errori tipizzati." />

  <Card title="Integrazione tramite API" href="/online/integration/api_integration" description="Righe dell'ordine, ripartizioni delle imposte, dati del cliente e tutti gli stati della sessione." />

  <Card title="Impostazioni di Checkout" href="/online/integration/checkout_settings" description="Wallet, branding e destinazioni di ritorno nella Tapaya Platform." />

  <Card title="Embedded Checkout" href="/online/integration/embedded_checkout" description="Inserisca campi della carta sicuri nella Sua pagina di checkout e invii il pagamento dal Suo pulsante di pagamento." />
</Cards>
