# Checkout-Seite gestalten: Editor, Elemente, Formularfelder, Einwilligungen > Der Seiten-Editor: Bereiche und Elemente, welche Bausteine es gibt, Formularfelder und Pflichtangaben, AGB- und Widerrufs-Einwilligungen, Feldlayout für B2B und die Preisanzeige mit Ersparnis. https://rabbit-checkout.de/hilfe/anleitungen/checkout-seite-gestalten/ · Aktualisiert: 2026-08-28 --- 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.
Eine Checkout-Seite kann von mehreren Flows verwendet werden. Eine Änderung wirkt dann überall. Für eine Variante nur an einem Angebot: Seite kopieren (Checkout-Seite kopieren) und die Kopie diesem Flow zuordnen.
## 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. | | **Checkout Options** | Die Auswahl zwischen mehreren Preisen, z. B. monatlich oder jährlich → [Checkout-Optionen](/hilfe/anleitungen/checkout-optionen/). | | **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). |
Pricing Options ist ein Überbleibsel aus einer früheren Version. Der Baustein zeigt nichts mehr an und lässt sich von der Seite entfernen; die Auswahl zwischen mehreren Preisen übernimmt heute Checkout Options.
Ohne Customer Info und Payment Info kann niemand kaufen. Wenn du eine Seite von Grund auf baust, fang mit diesen beiden an und ergänze den Rest.
### 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/).
Die AGB-Zustimmung läuft seit August 2026 ebenfalls über die Einwilligungen. Das frühere eigene AGB-Ankreuzfeld am Kundendaten-Element gibt es nicht mehr. Für dich ändert sich an der Seite nichts — dasselbe Häkchen an derselben Stelle mit demselben Text —, aber gespeichert wird jetzt ein Abbild dessen, was der Käufer gesehen hat: Text, Link und Zeitpunkt statt nur „ja". Bestehende Seiten wurden automatisch umgestellt.
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/).
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.
### 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/). Wie diese Felder präsentiert werden, steuerst du über **Feldlayout**: | Layout | Was der Käufer sieht | | --- | --- | | **Klassisch** (Voreinstellung) | Firma und USt-IdNr. stehen einfach über der Adresse, ohne Markierung. | | **Optionale Felder markieren** | Pflichtfelder tragen ein `*`, optionale den Zusatz „(optional)". | | **Ankreuzfeld „Ich kaufe als Unternehmen"** | Die Firmenfelder erscheinen erst nach dem Häkchen. Die Firma wird dann zur Pflicht, die USt-IdNr. bleibt optional. | Das Ankreuzfeld steht **unten** im Rechnungsblock, es schiebt also nichts nach unten, was darüber liegt. Ob es von vornherein angehakt ist, stellst du separat ein.
Nimmt der Käufer das Häkchen wieder heraus, werden Firma und USt-IdNr. geleert. Das ist wichtiger, als es klingt: Eine stehen gebliebene USt-IdNr. würde mitgeschickt, geprüft und könnte die Bestellung als Reverse-Charge-Fall ohne Umsatzsteuer abrechnen — bei einem Privatkunden.
### Preisanzeige mit Ersparnis Beim Preis-Element wählst du unter **Preisanzeige**, wie ein eingelöster Gutschein dargestellt wird: | Modus | Anzeige | | --- | --- | | **Aufschlüsselung** (Voreinstellung) | Wie bisher: Positionen, Rabatt, Steuer, Summe. | | **Durchgestrichen** | Der ursprüngliche Preis steht durchgestrichen neben dem zu zahlenden. | | **Ersparnis** | Zusätzlich ein Hinweis wie „Du sparst 59,50 € (34 %)". |
Der durchgestrichene Preis erscheint nur, wenn auf diesen Warenkorb tatsächlich ein Rabatt angewendet wurde — ein „Statt-Preis" ohne Gutschein lässt sich damit nicht erzeugen, und das ist Absicht. Umsatzsteuer- und Summenzeile bleiben in jedem Modus sichtbar. Bei Abos und Ratenzahlungen bleibt es bei der Aufschlüsselung.
## 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/). ![Eine fertige Checkout-Seite aus Kundensicht: die Abschnitte Kontaktinformationen (Name, E-Mail), Rechnungsadresse (Adresse, Stadt, PLZ, Land, Bundesland) und Zahlungsinformationen mit den Kacheln Karte, Klarna, SEPA-Lastschrift und iDEAL | Wero, den Kartenfeldern und einer großen Schaltfläche „Jetzt kaufen“ am Ende.](/assets/img/hilfe/checkout-kundenansicht.webp "So sieht das Ergebnis für den Kunden aus. Welche Bezahlkacheln erscheinen, kommt aus deinem Stripe-Konto, nicht aus dem Seiten-Editor.") ## 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/) - [Anleitung: Anker und Sprunglinks](https://rabbit-checkout.de/hilfe/anleitungen/anker-und-sprunglinks/)