# Checkout-Seite gestalten: Editor, Elemente, Formularfelder, Einwilligungen

> Der Seiten-Editor: Bereiche und Elemente, welche Bausteine es gibt, Formularfelder und Pflichtangaben, AGB- und Widerrufs-Einwilligungen, Firmenfelder für B2B.

https://rabbit-checkout.de/hilfe/anleitungen/checkout-seite-gestalten/ · Aktualisiert: 2026-08-04

---


Die **Checkout-Seite** ist das Design deiner Bezahlseite, unabhängig von
Produkt und Preis. Dieselbe Seite kann für beliebig viele Angebote dienen.

Zum Editor kommst du über **Design → Checkout-Seiten** → Seite öffnen, oder aus
der Liste der Checkout Flows über das **Auge**-Symbol.

<div class="docs-warn">
Eine Checkout-Seite kann von <strong>mehreren Flows</strong> verwendet werden.
Eine Änderung wirkt dann überall. Für eine Variante nur an einem Angebot:
Seite kopieren (<strong>Checkout-Seite kopieren</strong>) und die Kopie diesem
Flow zuordnen.
</div>

## Die Bereiche der Seite

Die Seite hat vier Bereiche, in die du Elemente legst:

| Bereich | Typische Verwendung |
| --- | --- |
| **Top** (Oben) | Kopfzeile, Logo, Überschrift, Vertrauenszeile |
| **Main** | Kundendaten, Preisoptionen, Zahlung: die eigentliche Bestellstrecke |
| **Side** | Zusammenfassung, Argumente, Testimonials, Garantien |
| **Bottom** (Unten) | Fußzeile, rechtliche Hinweise |

Elemente ziehst du aus der Werkzeugleiste an die gewünschte Stelle.
Auswählen, verschieben, löschen funktioniert wie in einem Baukasten; rechts
findest du zum ausgewählten Element die Einstellungen (Abstände, Farben,
Rahmen, Ausrichtung, Spaltenbreite).

## Die Elemente

### Checkout-Elemente

Diese Bausteine tragen die Funktion der Seite:

| Element | Wofür |
| --- | --- |
| **Customer Info** | Kundendaten und Rechnungsadresse. |
| **Pricing Options** | Auswahl der Preisoption, wenn der Flow mehrere anbietet. |
| **Payment Info** | Zahlungsart und Bezahlfelder. |
| **Total Price** | Zusammenfassung mit Zwischensumme, Rabatt, Steuer, Gesamtbetrag. |
| **Coupon** | Das Gutscheinfeld („Hast du einen Gutscheincode?"). |
| **Bump Offer** | Das Ankreuzfeld für das Zusatzangebot. |
| **Form** | Formularfelder und Einwilligungen (siehe unten). |

<div class="docs-note">
Ohne <strong>Customer Info</strong> und <strong>Payment Info</strong> kann
niemand kaufen. Wenn du eine Seite von Grund auf baust, fang mit diesen beiden
an und ergänze den Rest.
</div>

### Inhaltselemente

| Element | Wofür |
| --- | --- |
| **Text** | Überschriften und Fließtext. |
| **Markdown** | Längere formatierte Texte. |
| **Image** | Bilder, Logo, Produktabbildung. |
| **Video** | Videoeinbettung. |
| **Testimonial** | Kundenstimme mit Name und Bild. |
| **List** | Aufzählungen („Was ist enthalten"). |
| **Container** | Gruppiert Elemente, für Spalten und Abstände. |
| **Divider** | Trennlinie. |
| **File List** | Liste von Dateien. |
| **HTML** | Eigener HTML-Block, wenn dir sonst etwas fehlt. |

## Formularfelder und Einwilligungen

Im Element **Form** legst du fest, was der Käufer außer den Standardangaben
noch ausfüllt oder bestätigt.

### Eigene Felder

Über **Feld hinzufügen** kommen zusätzliche Felder dazu: Beschriftung,
Hilfetext, Pflichtfeld, Spaltenbreite. Die Antworten stehen später im
Bestelldetail und stehen auch Webhooks zur Verfügung.

Typische Fälle: Umsatzsteuer-relevante Zusatzangaben, „Wie hast du von uns
erfahren?", ein Wunschtermin.

### Einwilligungen

Über **Einwilligung hinzufügen** nimmst du Zustimmungen in den Checkout auf,
etwa AGB und Widerrufsverzicht. Pro Einwilligung wählst du:

| Einstellung | Bedeutung |
| --- | --- |
| **Explizit (Ankreuzfeld)** | Der Käufer muss aktiv ein Häkchen setzen. |
| **Implizit (Hinweis ohne Ankreuzfeld)** | Nur ein Hinweistext. |

Vorbereitet sind unter anderem **Widerrufsverzicht – Digitale Inhalte** und
**Widerrufsverzicht – Dienstleistung** →
[Widerruf und Rückerstattung](/hilfe/anleitungen/widerruf-und-erstattung/).

Was der Kunde bestätigt hat, wird mit Datum an der Bestellung gespeichert und
lässt sich über den Platzhalter `consentRecord` in die Bestätigungsmail
übernehmen →
[E-Mail-Vorlagen](/hilfe/anleitungen/e-mail-vorlagen/).

<div class="docs-note">
Die mitgelieferten Texte sind Vorlagen, keine geprüften Rechtstexte. Weil deine
eigenen Dokumente extern verlinkt sind, musst du deren Versionsstand selbst
dokumentieren, damit eine Einwilligung nachweisbar bleibt.
</div>

### Firmenfelder für Geschäftskunden

Beim Kundendaten-Element gibt es die Option **Firmenfelder anzeigen (Firma +
USt-IdNr.)**. Aktiviere sie, wenn du an Unternehmen verkaufst, nur dann kann
ein Käufer seine Umsatzsteuer-Identifikationsnummer angeben, und nur dann kann
Reverse Charge greifen →
[Mehrwertsteuer einstellen](/hilfe/anleitungen/mehrwertsteuer-einstellen/).

## Ansicht prüfen

Der Editor hat eine Umschaltung zwischen **Desktop-** und **Mobilansicht**.
Prüfe beides: Der überwiegende Teil der Käufe passiert am Handy, und lange
Seitenspalten sehen dort oft anders aus als gedacht.

Wie die Seite wirklich wirkt, mit echten Preisen, echter Zahlung und echter
Bestätigungsmail, zeigt der [Testkauf](/hilfe/start/testkauf/).

## Erfolgsseiten

Die Seite nach dem Kauf gestaltest du unter **Design → Erfolgsseiten** mit
demselben Editor und denselben Inhaltselementen. Im Checkout-Flow wählst du
unter **Nach dem Kauf** aus, ob eine Erfolgsseite gezeigt oder auf eine eigene
Adresse weitergeleitet wird.

Fehlerseiten lassen sich nicht gestalten.


## Häufige Fragen

**Wo bearbeite ich das Aussehen meiner Checkout-Seite?**

Design → Checkout-Seiten → Seite öffnen. Alternativ in der Zeile eines Checkout-Flows über das Auge-Symbol, das ebenfalls in den Editor führt.

**Wie füge ich ein Gutscheinfeld in den Checkout ein?**

Im Editor das Element „Coupon“ aus der Werkzeugleiste in den gewünschten Bereich ziehen. Pro Checkout-Flow lässt sich die Eingabe zusätzlich abschalten.

**Wie frage ich die Umsatzsteuer-ID von Geschäftskunden ab?**

Im Editor beim Kundendaten-Element die Option für Firmenfelder (Firma und USt-IdNr.) aktivieren. Damit greift bei bestätigter USt-IdNr. aus dem EU-Ausland auch das Reverse-Charge-Verfahren.

**Kann ich eigene Felder im Checkout abfragen?**

Ja. Im Formular-Element lassen sich zusätzliche Felder anlegen. Die Antworten stehen später bei der Bestellung.

**Ändert eine Änderung an der Checkout-Seite alle meine Angebote?**

Ja, wenn mehrere Checkout-Flows dieselbe Seite verwenden. Willst du nur ein Angebot ändern, kopiere die Seite zuerst und ordne die Kopie diesem Flow zu.


## Passend dazu

- [Einstieg: Checkout-Flow erstellen](https://rabbit-checkout.de/hilfe/start/checkout-flow-erstellen/)
- [Anleitung: Checkout einbetten](https://rabbit-checkout.de/hilfe/anleitungen/checkout-einbetten/)