Zum Hauptinhalt springen
Checkout page
Dodo Payments Checkout ist ein konversionsoptimierter, weltweit konformer Checkout, der für digitale Produkte und SaaS-Unternehmen entwickelt wurde. Er unterstützt mehrere Währungen, Sprachen, Steuern, Rabatte, Add-ons und compliance-freundliche Geschäftsabläufe.

Adaptive Währung

Adaptive Währung ermöglicht es Kunden, in ihrer bevorzugten lokalen Währung zu bezahlen, was Vertrauen und Konversionsraten verbessert.

So funktioniert es

  1. Aktivieren: Aktivieren Sie die Adaptive Währung in Ihren Geschäftseinstellungen
  2. Auswählen: Kunden können Währungen direkt beim Checkout wechseln
  3. Konvertieren: Preise werden dynamisch mit Echtzeit-Wechselkursen umgerechnet
  4. Anzeigen: Der endgültige zu zahlende Betrag wird transparent vor der Zahlung angezeigt
Currency selector on checkout

Adaptive Currency

Erfahren Sie mehr über unterstützte Währungen, Wechselgebühren und Rückerstattungsabwicklung.

Mehrsprachiger Checkout

Dodo Payments unterstützt mehrere Sprachen auf der Checkout-Seite, sodass Kunden Zahlungen in einer Sprache abschließen können, mit der sie sich wohlfühlen.
Language selector on checkout

Wichtige Highlights

  • Sprachselector direkt beim Checkout verfügbar
  • UI-Text, Labels und Systemnachrichten sind lokalisiert
  • Verbessert die Zugänglichkeit und internationale Konversion

Unterstützte Sprachen

Die Checkout-Seite unterstützt 21 Sprachen:
SpracheCode
Arabischar
Katalanischca
Chinesischzh
Niederländischnl
Englischen
Französischfr
Deutschde
Hebräischhe
Indonesischid
Italienischit
Japanischja
Koreanischko
Malaiischms
Polnischpl
Portugiesischpt
Rumänischro
Russischru
Spanisches
Schwedischsv
Thailändischth
Türkischtr
Sie können im Checkout eine bestimmte Sprache erzwingen, indem Sie den force_language-Parameter beim Erstellen einer Checkout-Sitzung festlegen. Details finden Sie in der Checkout Sessions API.

Automatische Steuerberechnung

Die Steuern werden automatisch basierend auf dem Rechnungsort des Kunden berechnet und gewährleisten die Einhaltung von GST-, MwSt.- und Umsatzsteueranforderungen ohne manuelle Einrichtung.

So funktioniert die Steuerberechnung

1

Location Detection

Steuervorschriften werden basierend auf dem Land des Kunden (und ggf. der Region) angewendet.
2

Dynamic Updates

Der Steuerbetrag wird automatisch aktualisiert, wenn:
  • sich das Land ändert
  • die Adresse aktualisiert wird
3

Transparent Display

Die endgültige Steueraufstellung wird klar vor der Zahlung angezeigt.
Die Steuerberechnung ist vollständig automatisiert. Für Standard-Digitalwaren und SaaS-Produkte ist keine manuelle Konfiguration erforderlich.

Unterstützung für Business-Steuer-ID

Für registrierte Unternehmen erlaubt der Checkout Kunden die Eingabe ihrer Business-Steuer-ID (z. B. MwSt./GST-Nummer).

Was passiert, wenn eine Steuer-ID eingegeben wird

  • Die Steuerberechtigung wird in Echtzeit validiert
  • Anwendbare Steuerbefreiungen oder Reverse-Charge-Regeln werden angewendet
  • Der Steuerbetrag wird sofort im Checkout aktualisiert
Business Tax ID entry on checkout
Dies ist besonders nützlich für B2B-SaaS und digitale Dienstleistungen, bei denen Geschäftskunden möglicherweise für Steuerbefreiungen infrage kommen.

Rabattcodes

Kunden können Rabatt- oder Aktionscodes, die Sie im Dashboard erstellt haben, direkt auf der Checkout-Seite eingeben.

Checkout-Erlebnis

  1. Kunde gibt den Rabattcode ein
  2. Der Rabatt wird sofort validiert
  3. Der aktualisierte Preis und die Einsparungen werden klar angezeigt
Discount code entry on checkout

API-Integration

Wenden Sie einen Rabattcode vorab an oder aktivieren Sie das Rabatt-Eingabefeld:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  discount_code: 'WELCOME20', // Pre-apply a code
  feature_flags: {
    allow_discount_code: true // Show discount input field
  },
  return_url: 'https://yoursite.com/return'
});

Discount Codes

Erfahren Sie, wie Sie Rabattcodes erstellen und verwalten.

Validate Discount by Code

Suchen und validieren Sie Rabatte mithilfe von Codenamen.

Smarte Adressenerfassung

Der Checkout unterstützt flexible Adresseingabe für schnellere Abschlussraten.

Verfügbare Optionen

OptionBeschreibung
Google Address AutofillSchnellauswahl mit Autovervollständigung
Manual EntryVolle Kontrolle für vollständige Adressen
Country SelectionSteuert Steuer- und Compliance-Logik
Die Adressenerfassung balanciert Geschwindigkeit, Genauigkeit und globale Abdeckung, um die Konversion zu maximieren und gleichzeitig die Compliance sicherzustellen.

Benutzerdefinierte Felder

Sammeln Sie zusätzliche Informationen von Kunden während des Checkouts, indem Sie benutzerdefinierte Formularfelder definieren. Dies ist nützlich, um Daten wie Firmennamen, Teamgröße, Empfehlungsquelle oder andere unternehmensspezifische Informationen zu erfassen.

Verfügbare Feldtypen

TypBeschreibung
textEinzeiliges Texteingabefeld
numberNumerische Eingabe
emailE-Mail-Adresse mit Validierung
urlURL mit Validierung
dateDatumsauswahl
dropdownAuswahl aus vordefinierten Optionen
booleanJa/Nein-Umschalter

Beispiel

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  custom_fields: [
    {
      key: 'company_name',
      label: 'Company Name',
      field_type: 'text',
      required: true
    },
    {
      key: 'team_size',
      label: 'Team Size',
      field_type: 'dropdown',
      required: true,
      options: ['1-10', '11-50', '51-200', '200+']
    }
  ],
  return_url: 'https://yoursite.com/return'
});
Kundenantworten werden automatisch in Webhook-Payloads (payment.succeeded, subscription.active) und API-Antworten über das custom_field_responses Array aufgenommen. Sie können bis zu 5 benutzerdefinierte Felder pro Checkout-Sitzung definieren.

Custom Fields Guide

Erfahren Sie mehr über die Konfiguration benutzerdefinierter Felder und den Zugriff auf Antworten.

Datenschutzrichtlinie & Akzeptanz der Bedingungen

Um rechtliche und Compliance-Transparenz sicherzustellen:
  • Privacy Policy und Buyer Terms Links werden im Checkout deutlich angezeigt
  • Kunden bestätigen diese ausdrücklich, bevor sie die Zahlung abschließen
Dies trägt dazu bei, globale Verbraucherschutz- und Datenschutzanforderungen einschließlich der DSGVO einzuhalten.

Collection-Checkout

Produktkollektionen ermöglichen eine einheitliche Checkout-Erfahrung, bei der Kunden mehrere verwandte Produkte (z. B. Starter-, Pro- oder Enterprise-Pläne) in einem einzigen Checkout anzeigen und auswählen können.

Funktionsweise

  1. Alle Produkte angezeigt: Kunden sehen jedes aktive Produkt in der Kollektion
  2. Erstes Produkt vorausgewählt: Das erste Produkt in der Kollektion ist automatisch ausgewählt
  3. Optionen vergleichen: Kunden können Preise und Funktionen vergleichen, bevor sie eine Auswahl treffen
  4. Einzelauswahl: Nach der Auswahl eines Produkts wird der Checkout mit dem standardmäßigen Zahlungsablauf fortgesetzt

Erstellen eines Collection-Checkouts

const session = await client.checkoutSessions.create({
  product_collection_id: 'pdc_abc123',
  product_cart: [], // Required: pass an empty array for collection checkout
  return_url: 'https://yoursite.com/return'
});
Wenn Sie product_collection_id verwenden, übergeben Sie ein leeres product_cart-Array. Rabattcodes können beim Sitzungerstellen nicht vorab angewendet werden.

Product Collections

Erfahren Sie, wie Sie Produktkollektionen für einheitliche Checkout-Erlebnisse erstellen und verwalten.

Konfiguration der Checkout-Sitzung

Steuern Sie das Checkout-Verhalten über die Checkout Sessions API:
const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customer: {
    email: 'customer@example.com',
    name: 'Jane Doe'
  },
  billing_currency: 'EUR', // Set specific currency
  discount_code: 'PROMO10',
  feature_flags: {
    allow_discount_code: true
  },
  return_url: 'https://yoursite.com/return',
  metadata: {
    order_ref: 'ORD-12345'
  }
});
Nach der Zahlung werden Kunden zu Ihrer return_url weitergeleitet, wobei automatisch Abfrageparameter angehängt werden – einschließlich payment_id oder subscription_id, status, email und license_key (falls zutreffend). Siehe den Checkout Sessions guide für die vollständige Liste.

Anpassung des Checkout-Themas

Passen Sie das Erscheinungsbild der Checkout-Seite an Ihre Marke an, indem Sie beim Erstellen einer Checkout-Sitzung über die API den customization.theme_config-Parameter verwenden. Konfigurieren Sie Farben, Schriftarten, Border-Radius und Button-Text für Hell- und Dunkelmodus.
Custom themed checkout page

Design & Theme Customization

Konfiguriere Designs visuell über das Dashboard mit vorgefertigten Themes, Typografie, Farben und Live-Vorschau.
Dieser Abschnitt behandelt die serverseitige API-Themenkonfiguration unter Verwendung von customization.theme_config. Wenn Sie das Checkout SDK (Overlay- oder Inline-Checkout) verwenden, siehe die Theme-Anpassungsabschnitte in Overlay Checkout oder Inline Checkout, die camelCase-Eigenschaften verwenden (z. B. bgPrimary statt bg_primary).

Theme-Konfigurationsoptionen

PropertyDescription
lightFarbanpassung für den Hellmodus
darkFarbanpassung für den Dunkelmodus
font_primary_urlURL für die primäre Schriftart
font_secondary_urlURL für die sekundäre Schriftart
font_sizeSchriftgröße: xs, sm, md, lg, xl, 2xl
font_weightSchriftstärke: normal, medium, bold, extraBold
radiusEckenradius für UI-Elemente (z. B. 4px, 0.5rem, 8px)
pay_button_textBenutzerdefinierter Text für die Zahlungsschaltfläche (z. B. “Complete Purchase”, “Subscribe Now”)

Farbkonfiguration (Hell-/Dunkelmodus)

Jeder Modus (light und dark) unterstützt folgende Farbeigenschaften:
PropertyDescription
bg_primaryPrimäre Hintergrundfarbe
bg_secondarySekundäre Hintergrundfarbe
text_primaryPrimäre Textfarbe
text_secondarySekundäre Textfarbe
text_placeholderPlatzhalterfarbe für Text
text_errorFehlermeldungsfarbe für Text
text_successErfolgsfarbe für Text
border_primaryPrimäre Randfarbe
border_secondarySekundäre Randfarbe
button_primaryHintergrundfarbe der primären Schaltfläche
button_primary_hoverHover-Farbe der primären Schaltfläche
button_secondaryHintergrundfarbe der sekundären Schaltfläche
button_secondary_hoverHover-Farbe der sekundären Schaltfläche
button_text_primaryTextfarbe der primären Schaltfläche
button_text_secondaryTextfarbe der sekundären Schaltfläche
input_focus_borderRandfarbe bei Fokus des Eingabefelds
Alle Farbwerte akzeptieren Standard-CSS-Farbformate:
  • Hex: #fff, #ffffff, #ffffffff
  • RGB/RGBA: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)
  • HSL/HSLA: hsl(120, 100%, 50%), hsla(120, 100%, 50%, 0.5)
  • Named colors: red, blue, transparent

Beispiel

const session = await client.checkoutSessions.create({
  product_cart: [
    { product_id: 'prod_abc', quantity: 1 }
  ],
  customization: {
    theme_config: {
      // Custom fonts
      font_primary_url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap',
      font_size: 'md',
      font_weight: 'medium',
      radius: '8px',
      pay_button_text: 'Complete Purchase',
      
      // Light mode colors
      light: {
        bg_primary: '#ffffff',
        bg_secondary: '#f5f5f5',
        text_primary: '#1a1a1a',
        text_secondary: '#666666',
        button_primary: '#0066ff',
        button_primary_hover: '#0052cc',
        button_text_primary: '#ffffff',
        border_primary: '#e0e0e0'
      },
      
      // Dark mode colors
      dark: {
        bg_primary: '#1a1a1a',
        bg_secondary: '#2d2d2d',
        text_primary: '#ffffff',
        text_secondary: '#a0a0a0',
        button_primary: '#3385ff',
        button_primary_hover: '#4d99ff',
        button_text_primary: '#ffffff',
        border_primary: '#404040'
      }
    }
  },
  return_url: 'https://yoursite.com/return'
});
Sie müssen nicht alle Farbeigenschaften angeben. Nicht angegebene Eigenschaften verwenden die Standardwerte des Themes.