# Rýchly štart (/sk/online/getting-started/quick_start_guide)



Hosted Checkout vám poskytne hotovú platobnú stránku pre karty, Apple Pay a Google Pay. Váš server vytvorí pre objednávku reláciu, zákazník zaplatí a váš server pred vybavením objednávky overí výsledok. Embedded Checkout vkladá zabezpečené polia pre kartu priamo do vašej vlastnej stránky.

Vyskúšajte si oba toky nižšie. Testovacia karta je už vyplnená, takže zvoľte **Pay** a sledujte platbu až do konca, alebo vyskúšajte Apple Pay či Google Pay. Obe ukážky sú repliky, takže nič neopustí váš prehliadač.

<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">
      Vložené polia
    </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>

## Zvoľte, ako budú zákazníci platiť [#choose-how-customers-pay]

<CheckoutComparison />

<Callout title="Dostupnosť" type="info">
  Checkout je pre schválených obchodníkov dostupný v ostrej prevádzke. Hosted Checkout aj Embedded Checkout podporujú karty, Apple Pay a Google Pay. Dostupnosť peňaženiek závisí od [nastavení Checkoutu](/online/integration/checkout_settings), registrácie domény a od zariadenia a prehliadača zákazníka. Embedded Checkout používa Tapaya.js **0.2.0** a Node.js SDK **0.3.0**. Začnite v sandboxe a potom postupujte podľa časti [Spustenie ostrej prevádzky](#go-live).
</Callout>

## Prijatie platby [#accept-a-payment]

<div className="fd-steps [&_h3]:fd-step">
  ### Vykonajte onboarding obchodníka [#onboard-your-merchant]

  Dokončite [onboarding obchodníka](/merchants/onboarding) s funkciou online platieb, prípadne s online platbami aj platbami v predajni. Obchodník, ktorý používa iba Checkout, nepotrebuje terminál. Uveďte web obchodu a údaje o online podnikaní a počkajte na schválenie spracovateľom. Samotné vytvorenie záznamu obchodníka alebo API kľúča platby nesprístupní.

  V [Tapaya Platform](https://platform.tapaya.com/checkout-settings) otvorte **Checkout**. Obchodníci, ktorí žiadajú o online platby, sa zobrazujú automaticky, vrátane tých, ktorí čakajú na schválenie. Pokračujte, keď bude obchodník v stave **Ready**.

  Otvorte **Settings** obchodníka. V časti **Merchant API key redirects** pridajte svoj obchod do **Allowed websites** a nastavte predvolené URL úspechu a zrušenia. Platforma, ktorá používa Secret key organizácie, ich namiesto toho nastavuje v **Organization defaults**. Príklady používajú `https://shop.example`. Peňaženky a branding opisuje stránka [Nastavenia Checkoutu](/online/integration/checkout_settings).

  ### Uložte kľúč na server [#store-your-key-on-the-server]

  V **Settings** obchodníka zvoľte **Create merchant key** a skopírujte kľúč `tapaya_test_…`. Zobrazí sa iba raz. Uchovávajte ho výhradne v konfigurácii na strane servera. Nikdy nepatrí do kódu v prehliadači ani do systému na správu verzií.

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

  SDK načítava `TAPAYA_SECRET_KEY` a `TAPAYA_ENVIRONMENT` automaticky. Nižšie uvedené príklady HTTP používajú `TAPAYA_CHECKOUT_API_URL`. Premenné načítajte do procesu svojho servera; SDK súbory `.env` nenačítava.

  Kľúč posielajte ako `Authorization: Bearer <key>`. Kľúč obchodníka určuje svojho obchodníka, takže nie je potrebná žiadna ďalšia hlavička. Platforma, ktorá obsluhuje mnoho obchodníkov, namiesto toho používa Secret key organizácie a v každej požiadavke posiela `X-Tapaya-Merchant-Token`. Pozrite si [autentifikáciu Checkoutu](/online/integration/api_integration#authentication).

  ### Vytvorte reláciu Checkoutu [#create-a-checkout-session]

  Keď zákazník vo vašom obchode klikne na **Checkout**, vypočítajte konečnú celkovú sumu na svojom serveri, uložte objednávku s jedinečným kľúčom pokusu a vytvorte reláciu. Pole `merchantOrderId` je povinné a objednávku možno zaplatiť iba raz. Sumy sú v najmenších jednotkách meny, takže `12100` znamená 121,00 EUR.

  Pre Node.js 22.13.0 alebo novší nainštalujte ESM SDK skôr, ako použijete príklad **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>

  Ak vyprší časový limit požiadavky, zopakujte ju s **rovnakým** kľúčom a telom. API vráti pôvodnú reláciu namiesto toho, aby vytvorilo druhú.

  ### Presmerujte zákazníka [#redirect-the-customer]

  Uložte `session.id` k objednávke a potom pošlite prehliadač na `session.url` pomocou HTTP 303. URL použite presne tak, ako bola vrátená.

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

  Tapaya zobrazí súhrn objednávky a zabezpečený platobný formulár a zabezpečí tokenizáciu, 3-D Secure aj samotné zaťaženie karty. Po zamietnutí môže zákazník na tej istej stránke skúsiť inú kartu. Relácie prijímajú nové platby počas 30 minút.

  ### Overte platbu na svojom serveri [#verify-the-payment-on-your-server]

  Keď zákazník príde na vašu URL úspechu alebo zrušenia, načítajte reláciu pomocou svojho Secret key a porovnajte ju s uloženou objednávkou. Samotné presmerovanie platbu nikdy nedokazuje.

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

  Pri oboch integráciách porovnajte výsledok s uloženou objednávkou skôr, ako ju vybavíte:

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

  Ak je stav stále `unpaid` alebo načítanie zlyhá, ponechajte si ID relácie a stav skontrolujte znova. Webhooky zatiaľ nie sú k dispozícii, preto spúšťajte úlohu na odsúhlasenie platieb pre zákazníkov, ktorí zatvoria kartu prehliadača skôr, ako sa vrátia.
</div>

## Spustenie ostrej prevádzky [#go-live]

1. Dokončite produkčný [onboarding obchodníka](/merchants/onboarding) s online platbami, prípadne s online platbami aj platbami v predajni. Uveďte web obchodu a údaje o online podnikaní. Aj existujúci obchodník s platbami v predajni potrebuje schválenie spracovateľom online platieb.

2. V [nastaveniach Checkoutu](/online/integration/checkout_settings) overte, že je obchodník v stave **Ready**. To vyžaduje aktívneho obchodníka, schválenie spracovateľom online platieb a nakonfigurovanú ostrú platobnú bránu.

3. Vytvorte produkčný checkout kľúč obchodníka alebo použite produkčný Secret key organizácie spolu s tokenom obchodníka. Ostré prihlasovacie údaje uchovávajte na svojom serveri.

4. Nastavte produkčný origin API a prostredie. Vo svojom nasadení nahraďte konfiguráciu sandboxu:

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

   Príklady HTTP používajú `TAPAYA_CHECKOUT_API_KEY`; aj túto premennú nastavte na svoj ostrý kľúč. URL relácie použite presne tak, ako bola vrátená. Produkčné hostované stránky sa otvárajú na `https://checkout.tapaya.com`.

5. Nakonfigurujte produkčné návratové URL pre Hosted Checkout. Pre Apple Pay v Embedded Checkoute zaregistrujte každú doménu obchodu a hostujte na nej overovací súbor. Ostrá prevádzka Google Pay vyžaduje nakonfigurované Google Pay merchant ID.

6. Prejdite [kontrolný zoznam QA](/online/getting-started/checklist) vrátane overenia na serveri a produkčnej úlohy, ktorá kontroluje nevyriešené platby. V produkčnom prostredí používajte skutočné platobné metódy. Testovacie karty zo sandboxu slúžia iba pre sandbox.

## Ďalšie kroky [#next-steps]

<Cards>
  <Card title="Testovanie" href="/online/getting-started/testing" description="Testovacie karty pre úspešnú platbu, zamietnutie a 3-D Secure na sandboxovej bráne." />

  <Card title="Hosted Checkout" href="/online/integration/hosted_checkout" description="Kompletný sprievodca pre server so spracovaním chýb a opakovanými pokusmi pre každý prístup." />

  <Card title="Node.js SDK" href="/online/integration/node_sdk" description="Možnosti klienta, metódy relácií, opakované pokusy a typované chyby." />

  <Card title="Integrácia API" href="/online/integration/api_integration" description="Položky objednávky, rozpis daní, údaje o zákazníkovi a všetky stavy relácie." />

  <Card title="Nastavenia Checkoutu" href="/online/integration/checkout_settings" description="Peňaženky, branding a návratové ciele v Tapaya Platform." />

  <Card title="Embedded Checkout" href="/online/integration/embedded_checkout" description="Vložte zabezpečené polia pre kartu do vlastnej platobnej stránky a platbu odošlite vlastným tlačidlom na zaplatenie." />
</Cards>
