# Швидкий старт (/uk/online/getting-started/quick_start_guide)



Hosted Checkout дає вам готову платіжну сторінку для карток, Apple Pay і Google Pay. Ваш сервер створює сесію для замовлення, клієнт платить, а ваш сервер підтверджує результат перед виконанням замовлення. Embedded Checkout розміщує захищені поля картки безпосередньо на вашій власній сторінці.

Спробуйте обидва сценарії нижче. Тестову картку вже заповнено, тож виберіть **Pay** і пройдіть платіж до кінця або спробуйте Apple Pay чи Google Pay. Обидва приклади є імітаціями, тому жодні дані не залишають ваш браузер.

<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">
      Вбудовані поля
    </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>

## Виберіть, як платитимуть клієнти [#choose-how-customers-pay]

<CheckoutComparison />

<Callout title="Доступність" type="info">
  Checkout працює для схвалених мерчантів. І Hosted Checkout, і Embedded Checkout підтримують картки, Apple Pay і Google Pay. Доступність гаманців залежить від [налаштувань Checkout](/online/integration/checkout_settings), реєстрації домену, а також від пристрою та браузера клієнта. Embedded Checkout використовує Tapaya.js **0.2.0** і Node.js SDK **0.3.0**. Почніть із пісочниці (sandbox), а потім виконайте кроки з розділу [Перехід у робочий режим](#go-live).
</Callout>

## Прийом платежу [#accept-a-payment]

<div className="fd-steps [&_h3]:fd-step">
  ### Проведіть онбординг мерчанта [#onboard-your-merchant]

  Пройдіть [онбординг мерчанта](/merchants/onboarding) з можливістю онлайн-платежів або одночасно онлайн-платежів і платежів у торговій точці. Мерчанту, який використовує лише Checkout, термінал не потрібен. Надайте адресу вебсайту магазину та відомості про онлайн-бізнес і дочекайтеся схвалення платіжного процесора. Саме лише створення запису мерчанта чи API-ключа не вмикає платежі.

  Відкрийте **Checkout** у [Tapaya Platform](https://platform.tapaya.com/checkout-settings). Мерчанти, які запитують онлайн-платежі, з'являються автоматично, зокрема ті, що очікують схвалення. Продовжуйте, коли мерчант матиме статус **Ready**.

  Відкрийте **Settings** мерчанта. У розділі **Merchant API key redirects** додайте свій магазин до **Allowed websites** і задайте типові URL успіху та скасування. Платформа, яка використовує Secret key організації, натомість задає їх в **Organization defaults**. У прикладах використовується `https://shop.example`. Про гаманці та брендинг див. [Налаштування Checkout](/online/integration/checkout_settings).

  ### Збережіть ключ на сервері [#store-your-key-on-the-server]

  У **Settings** мерчанта виберіть **Create merchant key** і скопіюйте ключ `tapaya_test_…`. Він показується лише один раз. Зберігайте його тільки в серверній конфігурації. Йому ніколи не місце в коді браузера чи системі контролю версій.

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

  SDK автоматично зчитує `TAPAYA_SECRET_KEY` і `TAPAYA_ENVIRONMENT`. Наведені нижче HTTP-приклади використовують `TAPAYA_CHECKOUT_API_URL`. Завантажте змінні в процес свого сервера; SDK не завантажує файли `.env`.

  Надсилайте ключ як `Authorization: Bearer <key>`. Ключ мерчанта сам визначає свого мерчанта, тому інші заголовки не потрібні. Платформа, яка обслуговує багато мерчантів, натомість використовує Secret key організації та надсилає `X-Tapaya-Merchant-Token` у кожному запиті. Див. [автентифікацію Checkout](/online/integration/api_integration#authentication).

  ### Створіть сесію Checkout [#create-a-checkout-session]

  Коли клієнт натискає **Checkout** у вашому магазині, обчисліть остаточну суму на своєму сервері, збережіть замовлення з унікальним ключем спроби та створіть сесію. Поле `merchantOrderId` обов'язкове, а замовлення можна оплатити лише один раз. Суми вказуються в мінімальних одиницях валюти, тож `12100` означає 121,00 EUR.

  Для Node.js 22.13.0 або новішої версії встановіть ESM SDK, перш ніж використовувати приклад **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>

  Якщо запит завершився тайм-аутом, повторіть його з **тим самим** ключем і тілом. API повертає початкову сесію замість того, щоб створювати другу.

  ### Переспрямуйте клієнта [#redirect-the-customer]

  Збережіть `session.id` разом із замовленням, а потім переспрямуйте браузер на `session.url` за допомогою HTTP 303. Використовуйте URL точно в тому вигляді, у якому його повернуто.

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

  Tapaya показує підсумок замовлення та захищену платіжну форму, а також виконує токенізацію, 3-D Secure і стягнення оплати. Після відмови клієнт може спробувати іншу картку на тій самій сторінці. Сесії приймають нові платежі протягом 30 хвилин.

  ### Перевірте платіж на своєму сервері [#verify-the-payment-on-your-server]

  Коли клієнт потрапляє на ваш URL успіху або скасування, отримайте сесію за допомогою свого Secret key і порівняйте її зі збереженим замовленням. Саме лише переспрямування ніколи не доводить оплату.

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

  Для обох інтеграцій порівняйте результат зі збереженим замовленням, перш ніж його виконувати:

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

  Якщо статус усе ще `unpaid` або отримати сесію не вдається, збережіть ID сесії та перевірте знову. Вебхуків поки немає, тому запускайте завдання звірки для клієнтів, які закривають вкладку до повернення.
</div>

## Перехід у робочий режим [#go-live]

1. Пройдіть [онбординг мерчанта](/merchants/onboarding) у робочому середовищі з онлайн-платежами або одночасно з онлайн-платежами та платежами в торговій точці. Надайте адресу вебсайту магазину та відомості про онлайн-бізнес. Наявному мерчанту з платежами в торговій точці все одно потрібне схвалення платіжного процесора для онлайн-платежів.

2. Перевірте в [налаштуваннях Checkout](/online/integration/checkout_settings), що мерчант має статус **Ready**. Для цього потрібні активний мерчант, схвалення платіжного процесора для онлайн-платежів і налаштований шлюз робочого середовища.

3. Створіть checkout-ключ мерчанта для робочого середовища або використовуйте Secret key організації для робочого середовища разом із токеном мерчанта. Зберігайте облікові дані робочого режиму на своєму сервері.

4. Задайте origin API та середовище для робочого режиму. Замініть конфігурацію пісочниці у своєму розгортанні:

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

   HTTP-приклади використовують змінну `TAPAYA_CHECKOUT_API_KEY`; задайте в ній також свій ключ робочого режиму. Використовуйте URL сесії точно в тому вигляді, у якому його повернуто. Сторінки Hosted Checkout у робочому середовищі відкриваються на `https://checkout.tapaya.com`.

5. Налаштуйте URL повернення робочого середовища для Hosted Checkout. Для Apple Pay у вбудованій оплаті зареєструйте кожен домен магазину та розмістіть на ньому файл верифікації. Google Pay у робочому режимі потребує налаштованого Google Pay merchant ID.

6. Пройдіть [контрольний список QA](/online/getting-started/checklist), зокрема перевірку на сервері та завдання в робочому середовищі, яке перевіряє невизначені платежі. У робочому середовищі використовуйте реальні способи оплати. Тестові картки пісочниці призначені лише для пісочниці.

## Наступні кроки [#next-steps]

<Cards>
  <Card title="Тестування" href="/online/getting-started/testing" description="Тестові картки для успішного платежу, відмови та 3-D Secure на шлюзі пісочниці." />

  <Card title="Hosted Checkout" href="/online/integration/hosted_checkout" description="Повний посібник для сервера з обробкою помилок і повторними спробами для кожного підходу." />

  <Card title="Node.js SDK" href="/online/integration/node_sdk" description="Параметри клієнта, методи сесій, повторні спроби та типізовані помилки." />

  <Card title="Інтеграція через API" href="/online/integration/api_integration" description="Позиції замовлення, розбивка податків, дані клієнта та всі статуси сесії." />

  <Card title="Налаштування Checkout" href="/online/integration/checkout_settings" description="Гаманці, брендинг і адреси повернення в Tapaya Platform." />

  <Card title="Embedded Checkout" href="/online/integration/embedded_checkout" description="Розмістіть захищені поля картки на власній сторінці оформлення замовлення та надсилайте оплату власною кнопкою оплати." />
</Cards>
