# Rychlý start (/cs/online/getting-started/quick_start_guide)



Hosted Checkout vám poskytne hotovou platební stránku pro karty, Apple Pay a Google Pay. Váš server vytvoří pro objednávku relaci, zákazník zaplatí a váš server před vyřízením objednávky ověří výsledek. Embedded Checkout vkládá zabezpečená pole pro kartu přímo do vaší vlastní stránky.

Vyzkoušejte si oba toky níže. Testovací karta je již vyplněná, takže zvolte **Pay** a sledujte platbu až do konce, nebo vyzkoušejte Apple Pay či Google Pay. Obě ukázky jsou repliky, takže nic neopustí váš prohlížeč.

<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á pole
    </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>

## Zvolte, jak budou zákazníci platit [#choose-how-customers-pay]

<CheckoutComparison />

<Callout title="Dostupnost" type="info">
  Checkout je pro schválené obchodníky dostupný v ostrém provozu. Hosted Checkout i Embedded Checkout podporují karty, Apple Pay a Google Pay. Dostupnost peněženek závisí na [nastavení Checkoutu](/online/integration/checkout_settings), registraci domény a na zařízení a prohlížeči zákazníka. Embedded Checkout používá Tapaya.js **0.2.0** a Node.js SDK **0.3.0**. Začněte v sandboxu a poté postupujte podle části [Spuštění ostrého provozu](#go-live).
</Callout>

## Přijetí platby [#accept-a-payment]

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

  Dokončete [onboarding obchodníka](/merchants/onboarding) s funkcí online plateb, případně s online platbami i platbami v prodejně. Obchodník, který používá pouze Checkout, nepotřebuje terminál. Uveďte web obchodu a údaje o online podnikání a počkejte na schválení zpracovatelem. Samotné vytvoření záznamu obchodníka nebo API klíče platby nezpřístupní.

  V [Tapaya Platform](https://platform.tapaya.com/checkout-settings) otevřete **Checkout**. Obchodníci, kteří žádají o online platby, se zobrazují automaticky, včetně těch, kteří čekají na schválení. Pokračujte, jakmile bude obchodník ve stavu **Ready**.

  Otevřete **Settings** obchodníka. V části **Merchant API key redirects** přidejte svůj obchod do **Allowed websites** a nastavte výchozí URL pro úspěch a zrušení. Platforma, která používá Secret key organizace, je místo toho nastavuje v **Organization defaults**. Příklady používají `https://shop.example`. Peněženky a branding popisuje stránka [Nastavení Checkoutu](/online/integration/checkout_settings).

  ### Uložte klíč na server [#store-your-key-on-the-server]

  V **Settings** obchodníka zvolte **Create merchant key** a zkopírujte klíč `tapaya_test_…`. Zobrazí se pouze jednou. Uchovávejte jej výhradně v konfiguraci na straně serveru. Nikdy nepatří do kódu v prohlížeči ani do systému správy verzí.

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

  SDK načítá `TAPAYA_SECRET_KEY` a `TAPAYA_ENVIRONMENT` automaticky. Níže uvedené příklady HTTP používají `TAPAYA_CHECKOUT_API_URL`. Proměnné načtěte do procesu svého serveru; SDK soubory `.env` nenačítá.

  Klíč posílejte jako `Authorization: Bearer <key>`. Klíč obchodníka určuje svého obchodníka, takže není potřeba žádná další hlavička. Platforma, která obsluhuje mnoho obchodníků, místo toho používá Secret key organizace a v každém požadavku posílá `X-Tapaya-Merchant-Token`. Viz [autentizace Checkoutu](/online/integration/api_integration#authentication).

  ### Vytvořte relaci Checkoutu [#create-a-checkout-session]

  Když zákazník ve vašem obchodě klikne na **Checkout**, vypočítejte konečnou celkovou částku na svém serveru, uložte objednávku s jedinečným klíčem pokusu a vytvořte relaci. Pole `merchantOrderId` je povinné a objednávku lze zaplatit pouze jednou. Částky jsou v nejmenších jednotkách měny, takže `12100` znamená 121,00 EUR.

  Pro Node.js 22.13.0 nebo novější nainstalujte ESM SDK, než použijete pří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>

  Pokud vyprší časový limit požadavku, zopakujte jej se **stejným** klíčem a tělem. API vrátí původní relaci, místo aby vytvořilo druhou.

  ### Přesměrujte zákazníka [#redirect-the-customer]

  Uložte `session.id` k objednávce a poté pošlete prohlížeč na `session.url` pomocí HTTP 303. URL použijte přesně tak, jak byla vrácena.

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

  Tapaya zobrazí souhrn objednávky a zabezpečený platební formulář a zajistí tokenizaci, 3-D Secure i zatížení karty. Po zamítnutí může zákazník na stejné stránce zkusit jinou kartu. Relace přijímají nové platby po dobu 30 minut.

  ### Ověřte platbu na svém serveru [#verify-the-payment-on-your-server]

  Když zákazník dorazí na vaši URL pro úspěch nebo zrušení, načtěte relaci pomocí svého Secret key a porovnejte ji s uloženou objednávkou. Samotné přesměrování 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>

  U obou integrací porovnejte výsledek s uloženou objednávkou dříve, než ji vyřídí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
  }
  ```

  Pokud je stav stále `unpaid` nebo načtení selže, ponechte si ID relace a stav zkontrolujte znovu. Webhooky zatím nejsou k dispozici, proto spouštějte úlohu pro odsouhlasení plateb pro zákazníky, kteří zavřou kartu prohlížeče dříve, než se vrátí.
</div>

## Spuštění ostrého provozu [#go-live]

1. Dokončete produkční [onboarding obchodníka](/merchants/onboarding) s online platbami, případně s online platbami i platbami v prodejně. Uveďte web obchodu a údaje o online podnikání. I stávající obchodník s platbami v prodejně potřebuje schválení zpracovatelem online plateb.

2. V [nastavení Checkoutu](/online/integration/checkout_settings) ověřte, že je obchodník ve stavu **Ready**. To vyžaduje aktivního obchodníka, schválení zpracovatelem online plateb a nakonfigurovanou ostrou platební bránu.

3. Vytvořte produkční checkout klíč obchodníka, nebo použijte produkční Secret key organizace spolu s tokenem obchodníka. Ostré přihlašovací údaje uchovávejte na svém serveru.

4. Nastavte produkční origin API a prostředí. Ve svém nasazení nahraďte konfiguraci sandboxu:

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

   Příklady HTTP používají `TAPAYA_CHECKOUT_API_KEY`; i tuto proměnnou nastavte na svůj ostrý klíč. URL relace použijte přesně tak, jak byla vrácena. Produkční hostované stránky se otevírají na `https://checkout.tapaya.com`.

5. Nakonfigurujte produkční návratové URL pro Hosted Checkout. Pro Apple Pay v Embedded Checkoutu zaregistrujte každou doménu obchodu a hostujte na ní ověřovací soubor. Ostrý provoz Google Pay vyžaduje nakonfigurované Google Pay merchant ID.

6. Projděte [kontrolní seznam QA](/online/getting-started/checklist), včetně ověření na serveru a produkční úlohy, která kontroluje nevyřešené platby. V produkčním prostředí používejte skutečné platební metody. Testovací karty ze sandboxu slouží pouze pro sandbox.

## Další kroky [#next-steps]

<Cards>
  <Card title="Testování" href="/online/getting-started/testing" description="Testovací karty pro úspěšnou platbu, zamítnutí a 3-D Secure na sandboxové bráně." />

  <Card title="Hosted Checkout" href="/online/integration/hosted_checkout" description="Kompletní průvodce pro server se zpracováním chyb a opakovanými pokusy pro každý přístup." />

  <Card title="Node.js SDK" href="/online/integration/node_sdk" description="Možnosti klienta, metody relací, opakované pokusy a typované chyby." />

  <Card title="Integrace přes API" href="/online/integration/api_integration" description="Položky objednávky, rozpis daní, údaje o zákazníkovi a všechny stavy relace." />

  <Card title="Nastavení Checkoutu" href="/online/integration/checkout_settings" description="Peněženky, branding a návratové cíle v Tapaya Platform." />

  <Card title="Embedded Checkout" href="/online/integration/embedded_checkout" description="Vložte zabezpečená pole pro kartu do vlastní platební stránky a platbu odešlete vlastním tlačítkem pro zaplacení." />
</Cards>
