Checkout-Designs

Fünf Checkouts. Ein Baukasten.
Alle live zum Ausprobieren.

So unterschiedlich kann deine Checkout-Seite mit Rabbit Checkout aussehen – vom 1-Euro-Einstieg bis zum Komplettpaket mit drei Zusatzangeboten. Jede Seite unten ist echt: Wähl ein Paket, setz ein Häkchen beim Bump Offer und sieh zu, wie sich der Preis live mitrechnet.

Designs ansehen ↓ Jetzt starten – 100 € Rabatt

14 Tage Geld-zurück-Garantie · Kein Abo · Deutscher Support

Kurz erklärt

Alle fünf Designs sind mit dem Checkout-Baukasten gebaut, den jeder Rabbit-Checkout-Shop hat – ohne Theme, ohne Plugin, ohne Code.
Sie zeigen, was eine Checkout-Seite verkaufen kann: ein Einzelprodukt, drei Pakete, ein Abo mit Testphase, ein Bundle und ein 1-Euro-Einstieg.
Dazu die Bausteine, die mitverkaufen: Bump Offers, Angebotsauswahl, Testimonials, Vertrauenssiegel, FAQ und Gutscheine.
Jedes Design passt sich dem Smartphone an. Bezahlt wird per Karte, PayPal, Klarna, SEPA-Lastschrift und Apple Pay.
Die Seiten laufen live in unserem Demo-Shop – im Testmodus, es wird nichts abgebucht.

programmierschule.rabbit-checkout.de/demo-kurs

Checkout-Seite für den Kurs „React von Null auf Produktiv“: links weißes Formular mit Vorname, Nachname, E-Mail, Widerrufs-Checkbox und Rechnungsadresse, darunter ein gestrichelt umrandetes Zusatzangebot „TypeScript Grundlagen für 29 € statt 49 €“ und die Zahlungsarten Karte, Klarna, SEPA-Lastschrift und iDEAL. Rechts eine dunkle Spalte mit Kurscover, Preisübersicht über 99 €, Gutscheinfeld, Leistungsliste und einem Teilnehmerzitat.

Dieselbe Kurs-Checkout-Seite auf dem Smartphone: Formular oben, Bestellübersicht rutscht unter das Formular.

DESIGN 01 · EINZELPRODUKT · ONLINE-KURS

Der Klassiker im Split-Layout

Links das Formular, rechts eine dunkle Bestellübersicht mit Kurscover, Leistungsliste und der Stimme eines Teilnehmers. Direkt über dem Bezahlknopf sitzt ein Bump Offer, der den TypeScript-Kurs für 29 statt 49 € dazulegt – ein Klick, und die Summe rechnet sich neu.

Zweispaltig, Breite der Spalten frei einstellbar
Bump Offer als Karte mit eigenem BildPRO
Vor- und Nachname in getrennten Feldern
Zustimmung zum vorzeitigen Erlöschen des Widerrufsrechts
Vertrauenssiegel unter dem Bezahlknopf

Live ausprobieren ↗ Öffnet die echte Seite im Demo-Shop

programmierschule.rabbit-checkout.de/demo-pakete

Checkout-Seite „Wähle dein Paket“ für den Kurs „Programmieren mit KI“ auf hellem, warmem Hintergrund: drei Paketkarten nebeneinander – Selbstlerner für 299 €, Mit Community für 398 € mit dem Badge „Beliebteste Wahl“ und ausgewählt, Mit Mentoring für 647 € mit dem Badge „Schnellster Weg“. Darunter links das Formular „Deine Daten“, rechts eine lila hinterlegte Zusammenfassung mit beiden Positionen des gewählten Pakets.

Die Paketauswahl auf dem Smartphone: die drei Pakete stehen untereinander, das empfohlene ist markiert.

DESIGN 02 · ANGEBOTSAUSWAHL · DREI PAKETE

Drei Pakete nebeneinander

Ein Kurs, drei Wege – vom Selbstlerner bis zum Paket mit 1:1-Mentoring. Das empfohlene Paket ist hervorgehoben und vorausgewählt, die Zusammenfassung rechnet bei jedem Wechsel live mit. Firmenkunden geben Firmenname und USt-IdNr. direkt mit ein, häufige Fragen beantwortet ein aufklappbares FAQ unter dem Formular.

Angebotsauswahl mit bis zu vier Optionen, als Spalten oder gestapelt
Badge, „Empfohlen“ und „Vorausgewählt“ je Option
Pakete aus mehreren Produkten, mit eigener Zeile in der Rechnung
Firmenname und USt-IdNr. für Reverse Charge
FAQ-Akkordeon und Serifenschrift für die Überschriften

Live ausprobieren ↗ Öffnet die echte Seite im Demo-Shop

programmierschule.rabbit-checkout.de/demo-mitgliedschaft

Checkout-Seite „Werde Teil des Developer Club“: oben ein lila-oranger Farbverlauf mit Überschrift und drei Hinweisen. Darunter Schritt 1 „Wähle deinen Plan“ mit „Jährlich, 290 € / Jahr“ (ausgewählt, Badge −17 %) und „Monatlich, 29 € / Monat“ (Badge „Gratis testen“), Schritt 2 „Deine Daten“. Rechts eine Karte mit Cover „Developer Club“ und der Preisübersicht mit wiederkehrender Gebühr von 290 € pro Jahr.

Die Mitgliedschafts-Seite auf dem Smartphone: Farbverlauf oben, darunter die beiden Pläne untereinander.

DESIGN 03 · ABO · MITGLIEDSCHAFT

Mitgliedschaft, jährlich oder monatlich

Ein Farbverlauf als Bühne, darunter der Kauf in drei nummerierten Schritten. Der Jahresplan ist vorausgewählt, der Monatsplan startet mit sieben Tagen kostenlos. Rechts das Cover, die Preisübersicht mit der wiederkehrenden Gebühr und ein Karussell mit Stimmen aus der Community.

Abo mit kostenloser Testphase
Jahres- und Monatsplan auf einer Seite
Testimonial-Karussell mit automatischem Wechsel
Farbverlauf, Schatten und runde Ecken ohne Code
Rechtssichere Beschriftung des Bestellknopfs

Live ausprobieren ↗ Öffnet die echte Seite im Demo-Shop

programmierschule.rabbit-checkout.de/demo-bundle

Dunkle Checkout-Seite „Vom ersten Skript zum Fullstack-Entwickler“ mit limettengrünen Akzenten: links ein Cover mit den fünf Kursen und eine Tabelle „Was im Paket steckt“ mit durchgestrichenen Einzelpreisen und „Einzeln gekauft 595 €, 497 €“. Rechts eine weiße Karte „Jetzt Zugang sichern“ mit Preisübersicht und drei Zusatzangeboten – Kickoff-Call für 79 € statt 149 €, Code-Review für 99 € statt 150 €, Projekt-Vorlagen für 29 € statt 49 € – jeweils mit Ersparnis in Prozent.

Das dunkle Bundle auf dem Smartphone: Überschrift, Cover und Wertübersicht untereinander.

DESIGN 04 · BUNDLE · DUNKLES DESIGN

Komplettpaket mit drei Zusatzangeboten

Fünf Kurse in einem Paket, dunkel inszeniert. Links zeigt eine Wertübersicht, was im Paket steckt und was es einzeln kosten würde. Rechts ein helles Bestellformular mit drei Bump Offers in der Ansicht „Liste mit Details“ – jedes mit Bild, Beschreibung und der Ersparnis gegenüber dem regulären Preis.

Bis zu zehn Bump Offers je Checkout, Ersparnis automatisch berechnetPRO
Sechs Darstellungen für Bump Offers, von Karte bis ListePRO
Eigenes CSS pro Seite für den letzten Schliff
Zwei Testimonials nebeneinander
Gutscheinfeld und Rechnung automatisch per E-Mail

Live ausprobieren ↗ Öffnet die echte Seite im Demo-Shop

programmierschule.rabbit-checkout.de/demo-einsteiger

Einspaltige Checkout-Seite „Dein erstes Skript – für 1 €“ auf mintgrünem Hintergrund: eine weiße Karte mit Terminal-Grafik, zwei Etiketten „Für absolute Anfänger“ und „30 Minuten“, drei Stichpunkten und dem Formular mit Kontaktinformationen und Rechnungsadresse.

Der 1-Euro-Checkout auf dem Smartphone: Karte über die volle Breite, Formular direkt unter den Stichpunkten.

DESIGN 05 · LOW-TICKET · MOBIL ZUERST

1-Euro-Einstieg in einer Spalte

Eine Karte, eine Spalte, kein Ballast – gebaut für Besucher, die vom Handy aus einer Anzeige kommen. Titelbild, drei Stichpunkte, Formular, ein kleines Zusatzangebot für 9 statt 19 € und der Bezahlknopf. Mehr braucht ein Einstiegsprodukt nicht.

Einspaltiges Layout, auf dem Smartphone wie eine App
Bump Offer auch bei einem 1-Euro-ProduktPRO
Karte, PayPal, Klarna, SEPA und Apple Pay
Stimme einer Kundin unter der Karte

Live ausprobieren ↗ Öffnet die echte Seite im Demo-Shop

So probierst du die Demos aus: Die Seiten laufen im Demo-Shop „Programmierschule“ mit Stripe und PayPal im Testmodus – es wird nichts abgebucht. Wer einen Kauf bis zum Ende durchspielen will, nimmt die Testkarte 4242 4242 4242 4242 mit einem beliebigen Ablaufdatum in der Zukunft. Die Programmierschule ist fiktiv; Namen und Zitate auf den Seiten sind Beispieltexte.

Bausteine

Was in den fünf Designs steckt.

Jeder Block ist im Baukasten einen Klick entfernt und lässt sich frei kombinieren. Die Designs oben sind nur fünf von vielen möglichen.

Angebotsauswahl

Zwei bis vier Optionen auf einer Seite – Pakete, monatlich oder jährlich. Nur die gewählte landet in der Bestellung.

Bump Offers PRO

Bis zu zehn Zusatzangebote direkt am Checkout, mit eigenem Bild, eigenem Text und automatisch berechneter Ersparnis.

Abos mit Testphase

Täglich bis jährlich abrechnen, mit kostenlosen Testtagen. Käufer verwalten ihr Abo selbst.

Testimonials & Karussell

Stimmen deiner Kunden als Karte, nebeneinander oder als Karussell, das von selbst weiterblättert.

Vertrauenssiegel

Sichere Zahlung, Sofort-Zugang, Garantie – als Siegel, Symbol oder Karte direkt unter dem Bezahlknopf.

Rechtssichere Felder

Zustimmung zum Widerruf, AGB-Hinweis, Bestellknopf mit geprüfter Beschriftung, Firmenname und USt-IdNr.

Farben & Schriften

18 Schriften aus EU-Hosting, eigene Farben, Farbverläufe, Schatten und runde Ecken – oder einmal zentral unter Marke & Design.

Mobil & einbettbar

Spalten stapeln sich auf dem Handy. Und mit zwei Zeilen Code läuft derselbe Checkout auf deiner eigenen Website.

Eingebettet

Und so sieht Design 05 auf deiner Website aus.

Derselbe Checkout, eingebettet mitten in diese Seite – mit den zwei Zeilen, die du im Dashboard kopierst.

Zwei Zeilen, keine Plugins

Der eingebettete Checkout passt seine Höhe selbst an, zeigt genau das Design deiner Checkout-Seite und rechnet Bump Offer, Steuer und Summe genauso live mit wie auf der eigenen Adresse. Das funktioniert in WordPress, Wix, Webflow, Squarespace und in reinem HTML.

<!-- RabbitCheckout Embed Code -->
<script src="https://programmierschule.rabbit-checkout.de/embed.js"></script>
<div data-rc-checkout-link="https://programmierschule.rabbit-checkout.de/demo-einsteiger"></div>

Schritt für Schritt: Checkout einbetten in der Dokumentation.

Lädt den Checkout von programmierschule.rabbit-checkout.de. Erst nach deinem Klick wird eine Verbindung aufgebaut.

Diese fünf Seiten hat ein KI-Assistent gebaut.

Produkte, Preise, Pakete, Bump Offers, Seitenlayouts und Checkout-Links: Alles auf dieser Seite hat Claude über unseren MCP-Connector im Demo-Shop angelegt – nach Beschreibung, nicht per Klick. Dasselbe kann dein Assistent in deinem Shop. So verbindest du ihn.

FAQ

Ja. Alle fünf laufen in unserem Demo-Shop „Programmierschule“ auf Rabbit Checkout – mit echten Produkten, Preisen, Bump Offers und Zahlungsarten. Die Zahlungsanbieter sind dort im Testmodus verbunden, es wird also nichts abgebucht. Die Programmierschule ist fiktiv, Namen und Zitate auf den Seiten sind Beispieltexte.

Ja. Wähle Karte und gib die Stripe-Testkarte 4242 4242 4242 4242 ein, dazu ein beliebiges Ablaufdatum in der Zukunft und eine beliebige Prüfziffer. Nach dem Kauf landest du wieder auf dieser Seite.

Nein. Layout, Farben, Schriften, Abstände, Bilder, Testimonials und Siegel stellst du im Baukasten per Drag & Drop ein. Eigenes CSS ist eine Option für den letzten Schliff, keine Voraussetzung.

Ja. Spalten stapeln sich auf kleinen Bildschirmen automatisch untereinander, und Abstände, Größen und Sichtbarkeit lassen sich je Bildschirmgröße einstellen. Deshalb zeigen wir oben jedes Design auch in der mobilen Ansicht.

Bump Offers gehören zum Pro-Tarif. Angebotsauswahl, Abos, Testimonials, Vertrauenssiegel, eigene Schriften und Farben, Gutscheine und die Einbettung auf deiner Website gibt es in beiden Tarifen.

Ja, mit zwei Zeilen Code – einem Script-Tag und einem div. Der Checkout passt seine Höhe automatisch an und funktioniert in WordPress, Baukästen wie Wix oder Webflow und in reinem HTML.

Im Baukasten setzt du eine Seite aus fertigen Blöcken zusammen und kannst eigene Blöcke speichern und auf der nächsten Seite wiederverwenden. Mit einem verbundenen KI-Assistenten beschreibst du die Seite stattdessen – die fünf Seiten hier hat ein Assistent über unseren MCP-Connector angelegt.

Fünf Checkouts. Ein Baukasten.Alle live zum Ausprobieren.

Kurz erklärt

Der Klassiker im Split-Layout

Drei Pakete nebeneinander

Mitgliedschaft, jährlich oder monatlich

Komplettpaket mit drei Zusatzangeboten

1-Euro-Einstieg in einer Spalte

Was in den fünf Designs steckt.

Angebotsauswahl

Bump Offers PRO

Abos mit Testphase

Testimonials & Karussell

Vertrauenssiegel

Rechtssichere Felder

Farben & Schriften

Mobil & einbettbar

Und so sieht Design 05 auf deiner Website aus.

Zwei Zeilen, keine Plugins

Diese fünf Seiten hat ein KI-Assistent gebaut.

FAQ

Dein Checkout, in deinem Design.

Fünf Checkouts. Ein Baukasten.
Alle live zum Ausprobieren.