# Schnellstart (/de/online/getting-started/quick_start_guide)



Hosted Checkout bietet Ihnen eine fertige Zahlungsseite für Karten, Apple Pay und Google Pay. Ihr Server erstellt eine Session für eine Bestellung, der Kunde zahlt, und Ihr Server bestätigt das Ergebnis, bevor die Bestellung abgewickelt wird. Embedded Checkout bindet sichere Kartenfelder direkt in Ihre eigene Seite ein.

Probieren Sie unten beide Abläufe aus. Die Testkarte ist bereits eingetragen: Wählen Sie **Pay** und verfolgen Sie die Zahlung bis zum Ende, oder probieren Sie Apple Pay oder Google Pay. Beide sind Nachbildungen, es verlässt also nichts Ihren 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">
      Eingebettete Felder
    </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>

## Zahlungsweise der Kunden wählen [#choose-how-customers-pay]

<CheckoutComparison />

<Callout title="Verfügbarkeit" type="info">
  Checkout ist für freigegebene Händler live. Sowohl Hosted Checkout als auch Embedded Checkout unterstützen Karten, Apple Pay und Google Pay. Die Verfügbarkeit der Wallets hängt von den [Checkout-Einstellungen](/online/integration/checkout_settings), der Domain-Registrierung sowie vom Gerät und Browser des Kunden ab. Embedded Checkout verwendet Tapaya.js **0.2.0** und das Node.js SDK **0.3.0**. Beginnen Sie in der Sandbox und folgen Sie dann [Live gehen](#go-live).
</Callout>

## Eine Zahlung annehmen [#accept-a-payment]

<div className="fd-steps [&_h3]:fd-step">
  ### Onboarding des Händlers [#onboard-your-merchant]

  Schließen Sie das [Händler-Onboarding](/merchants/onboarding) mit der Funktion für Online-Zahlungen ab, oder für Online-Zahlungen und Zahlungen vor Ort. Ein Händler, der nur Checkout nutzt, benötigt kein Terminal. Geben Sie die Website des Shops und die Angaben zum Online-Geschäft an und warten Sie auf die Freigabe durch den Zahlungsabwickler. Das Anlegen eines Händlerdatensatzes oder eines API-Schlüssels allein schaltet keine Zahlungen frei.

  Öffnen Sie **Checkout** in der [Tapaya Platform](https://platform.tapaya.com/checkout-settings). Händler, die Online-Zahlungen beantragen, erscheinen automatisch, auch solche, die noch auf die Freigabe warten. Fahren Sie fort, sobald der Händler **Ready** ist.

  Öffnen Sie die **Settings** des Händlers. Fügen Sie unter **Merchant API key redirects** Ihren Shop zu **Allowed websites** hinzu und legen Sie die Standard-URLs für Erfolg und Abbruch fest. Eine Plattform, die den Secret key der Organisation verwendet, legt diese stattdessen unter **Organization defaults** fest. Die Beispiele verwenden `https://shop.example`. Wallets und Branding beschreiben die [Checkout-Einstellungen](/online/integration/checkout_settings).

  ### Schlüssel auf dem Server speichern [#store-your-key-on-the-server]

  Wählen Sie in den **Settings** des Händlers **Create merchant key** und kopieren Sie den Schlüssel `tapaya_test_…`. Er wird nur einmal angezeigt. Bewahren Sie ihn ausschließlich in der serverseitigen Konfiguration auf. Er gehört niemals in Browser-Code oder in die Versionsverwaltung.

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

  Das SDK liest `TAPAYA_SECRET_KEY` und `TAPAYA_ENVIRONMENT` automatisch. Die HTTP-Beispiele unten verwenden `TAPAYA_CHECKOUT_API_URL`. Laden Sie die Variablen in Ihren Serverprozess; das SDK lädt keine `.env`-Dateien.

  Senden Sie den Schlüssel als `Authorization: Bearer <key>`. Ein Händlerschlüssel bestimmt seinen Händler, daher ist kein weiterer Header nötig. Eine Plattform, die viele Händler bedient, verwendet stattdessen den Secret key der Organisation und sendet bei jeder Anfrage `X-Tapaya-Merchant-Token`. Siehe [Checkout-Authentifizierung](/online/integration/api_integration#authentication).

  ### Checkout-Session erstellen [#create-a-checkout-session]

  Wenn der Kunde in Ihrem Shop auf **Checkout** klickt, berechnen Sie den endgültigen Gesamtbetrag auf Ihrem Server, speichern Sie die Bestellung mit einem eindeutigen Versuchsschlüssel und erstellen Sie eine Session. `merchantOrderId` ist erforderlich, und eine Bestellung kann nur einmal bezahlt werden. Beträge werden in der kleinsten Währungseinheit angegeben, `12100` entspricht also 121,00 EUR.

  Installieren Sie für Node.js 22.13.0 oder neuer das ESM-SDK, bevor Sie das Beispiel **Node.js SDK** verwenden:

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

  Wenn die Anfrage in ein Timeout läuft, wiederholen Sie sie mit **demselben** Schlüssel und Body. Die API gibt die ursprüngliche Session erneut zurück, statt eine zweite zu erstellen.

  ### Kunden weiterleiten [#redirect-the-customer]

  Speichern Sie `session.id` mit Ihrer Bestellung und leiten Sie den Browser dann mit HTTP 303 auf `session.url` weiter. Verwenden Sie die URL genau so, wie sie zurückgegeben wurde.

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

  Tapaya zeigt die Bestellübersicht und das sichere Zahlungsformular an und übernimmt Tokenisierung, 3-D Secure und Belastung. Nach einer Ablehnung kann der Kunde auf derselben Seite eine andere Karte versuchen. Sessions nehmen 30 Minuten lang neue Zahlungen an.

  ### Zahlung auf dem Server verifizieren [#verify-the-payment-on-your-server]

  Wenn der Kunde auf Ihrer Erfolgs- oder Abbruch-URL landet, rufen Sie die Session mit Ihrem Secret key ab und vergleichen Sie sie mit der gespeicherten Bestellung. Eine Weiterleitung allein beweist niemals eine Zahlung.

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

  Vergleichen Sie bei beiden Integrationen das Ergebnis mit der gespeicherten Bestellung, bevor Sie diese abwickeln:

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

  Wenn der Status noch `unpaid` ist oder der Abruf fehlschlägt, behalten Sie die Session-ID und prüfen Sie erneut. Webhooks gibt es noch nicht. Betreiben Sie daher einen Abgleichsjob für Kunden, die den Tab schließen, bevor sie zurückkehren.
</div>

## Live gehen [#go-live]

1. Schließen Sie das [Händler-Onboarding](/merchants/onboarding) in der Produktionsumgebung mit Online-Zahlungen ab, oder mit Online-Zahlungen und Zahlungen vor Ort. Geben Sie die Website des Shops und die Angaben zum Online-Geschäft an. Auch ein bestehender Händler mit Zahlungen vor Ort benötigt die Freigabe des Zahlungsabwicklers für Online-Zahlungen.

2. Prüfen Sie in den [Checkout-Einstellungen](/online/integration/checkout_settings), ob der Händler **Ready** ist. Dazu sind ein aktiver Händler, die Freigabe des Zahlungsabwicklers für Online-Zahlungen und ein konfiguriertes Live-Gateway erforderlich.

3. Erstellen Sie einen Checkout-Händlerschlüssel für die Produktion, oder verwenden Sie den Secret key Ihrer Organisation für die Produktion zusammen mit dem Händler-Token. Bewahren Sie Live-Zugangsdaten auf Ihrem Server auf.

4. Legen Sie den API-Origin und die Umgebung für die Produktion fest. Ersetzen Sie in Ihrem Deployment die Sandbox-Konfiguration:

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

   Die HTTP-Beispiele verwenden `TAPAYA_CHECKOUT_API_KEY`; setzen Sie auch diese Variable auf Ihren Live-Schlüssel. Verwenden Sie die Session-URL genau so, wie sie zurückgegeben wurde. Gehostete Seiten in der Produktion öffnen sich auf `https://checkout.tapaya.com`.

5. Konfigurieren Sie Ihre Rückkehr-URLs für Hosted Checkout in der Produktion. Registrieren Sie für Apple Pay in Embedded Checkout jede Shop-Domain und hosten Sie deren Verifizierungsdatei. Google Pay im Live-Modus erfordert eine konfigurierte Google Pay Merchant ID.

6. Arbeiten Sie die [QA-Checkliste](/online/getting-started/checklist) ab, einschließlich der Verifizierung auf dem Server und des Produktionsjobs, der ungeklärte Zahlungen prüft. Verwenden Sie in der Produktion echte Zahlungsmethoden. Testkarten der Sandbox sind nur für die Sandbox bestimmt.

## Nächste Schritte [#next-steps]

<Cards>
  <Card title="Testen" href="/online/getting-started/testing" description="Testkarten für Erfolg, Ablehnung und 3-D Secure auf dem Sandbox-Gateway." />

  <Card title="Hosted Checkout" href="/online/integration/hosted_checkout" description="Der vollständige Leitfaden für den Server, mit Fehlerbehandlung und Wiederholungsversuchen für jeden Ansatz." />

  <Card title="Node.js SDK" href="/online/integration/node_sdk" description="Client-Optionen, Session-Methoden, Wiederholungsversuche und typisierte Fehler." />

  <Card title="API-Integration" href="/online/integration/api_integration" description="Bestellpositionen, Steueraufschlüsselungen, Kundendaten und jeder Session-Status." />

  <Card title="Checkout-Einstellungen" href="/online/integration/checkout_settings" description="Wallets, Branding und Rückkehrziele in der Tapaya Platform." />

  <Card title="Embedded Checkout" href="/online/integration/embedded_checkout" description="Binden Sie sichere Kartenfelder in Ihre eigene Checkout-Seite ein und senden Sie die Zahlung über Ihren eigenen Bezahl-Button ab." />
</Cards>
