Zum Inhalt springen
edoobox Docs
Kostenlos testen 7 Tage unverbindlich testen
Menü
Kostenlos testen 7 Tage unverbindlich testen

Vorlage: Anmeldung Zusammenfassung und Payment

Die Abbildungen zeigen einen früheren Oberflächenstand. Verwenden Sie für die verfügbaren Funktionen und Optionen die Schritte in dieser Anleitung.

Die Vorlage Anmeldung: Zusammenfassung Abschliessen dient zur Kontrolle vor der Abschlussaktion. Teilnehmende prüfen ihre Angaben und bestätigen die vorgesehenen Rechtstexte. Der weitere Weg führt je nach Design und Buchungsregeln zum direkten Abschluss, zum Warenkorb oder zur Zahlung.

Die darauffolgende Payment-Seite erscheint je nach Angebot, MustPay-Regel und globalen Einstellungen. Bei zahlungspflichtigen Abläufen wird sie nach der Zusammenfassung angezeigt; in anderen Fällen wird sie übersprungen.

Zusammenfassung und Payment im Design Manager

Zweck der Zusammenfassung

Die Zusammenfassung zeigt die wichtigsten Eckdaten der Buchung, bevor die buchende Person auf Abschliessen klickt. Dadurch können Teilnehmende Namen, Preise, Termine, Zusatzleistungen, Zusatzfragen und rechtliche Hinweise nochmals kontrollieren.

Wenn Pflichtfelder fehlen oder fehlerhaft sind, kann edoobox in den passenden Schritt zurückführen, damit die nötigen Angaben korrigiert werden.

Abschlusslogik verstehen

Die Zusammenfassung bereitet die Abschlussaktion vor. Je nach Buchungsansicht wird danach direkt abgeschlossen oder zuerst der Warenkorb geöffnet. Wenn Pflichtfelder oder Validierungen fehlen, führt edoobox die buchende Person zurück zum betroffenen Schritt. Platzieren Sie den Abschliessen-Button deshalb so, dass er nach der Kontrolle logisch erreichbar ist.

Die Teilnehmer Tabelle zeigt die Personen dieser Buchung. Bei normalen Buchungen ist das meist eine Person, bei Sammelbuchungen mehrere. Die angezeigten Kerndaten sind bewusst standardisiert und nicht als frei gestaltbare Auswertung gedacht.

Widgets der Zusammenfassung

  • Abschliessen Button: Startet die im Design vorgesehene Abschlussaktion. Je nach Einstellung wird direkt fortgefahren oder zuerst der Warenkorb geöffnet. Die Position kann je nach Design links oder rechts gewählt werden.

  • Teilnehmendentabelle: Zeigt die erfassten Personen. Bei Sammelbuchungen sind mehrere Teilnehmende sichtbar. Welche Daten wie Vorname oder Name erscheinen, ist im Widget weitgehend vorgegeben und nicht frei als Spaltenkonfiguration gedacht.

  • Promotions Codes: Ermöglicht die Eingabe eines Gutscheins oder Promotionscodes, sofern Promotions im Konto und Design aktiv sind. Das Widget selbst besitzt nur wenige Einstellungen; die fachliche Logik kommt aus den Promotionskampagnen.

  • Gesetzestexte: Bindet die global gepflegten rechtlichen Texte mit den vorgesehenen Bestätigungen ein. Für neue Designs dieses Widget verwenden.

  • Widerrufsbelehrung (älteres Widget): Kann in bestehenden Designs rechtliche Widerrufsinformationen anzeigen. Neue Bestätigungen im Widget Gesetzestexte einrichten.

  • Datenschutzerklärung (älteres Widget): Kann in bestehenden Designs vorkommen. Neue Bestätigungen im Widget Gesetzestexte einrichten.

  • Zusammenfassung: Gibt Buchungsdaten, Preise und gewählte Optionen aus. Im aktuellen Widget wählen Sie die sichtbaren Bereiche und deren Reihenfolge, zum Beispiel Termine, Preise, Teilnehmende und Gesamtbetrag.

  • Schutz vor Bots: Unterstützt Schutzmechanismen gegen automatisierte Buchungen, zum Beispiel Cloudflare Turnstile.

  • Text Block: Ergänzt feste Hinweise, zum Beispiel Kontakt oder Zahlungsinformation. Texte und Bilder sollten in allen aktiven Systemsprachen gepflegt und im iFrame getestet werden.

Promotionen und rechtliche Widgets prüfen

Promotionscodes funktionieren nur, wenn die globale Promotion-Funktion aktiv ist, passende Kampagnen vorhanden sind und das Widget im Design platziert wurde. Details stehen unter Promotionskampagnen und Gutscheine.

AGB, Widerruf und Datenschutz müssen inhaltlich zu Ihrer Organisation passen. Prüfen Sie diese Inhalte unter Gesetzestexte und Einstellungen Legal. Die rechtlichen Widgets holen ihre Texte von dort; im Widget selbst sind nur begrenzte fachliche Anpassungen möglich.

Binden Sie AGB, Widerrufsinformation und Datenschutzerklärung in neuen Designs über jeweils ein Widget Gesetzestexte mit dem passenden veröffentlichten Text ein. Aktivieren Sie die Pflichtbestätigung pro Widget, wenn diese für den vorgesehenen Ablauf erforderlich ist. Die getrennten älteren Widgets können noch im Bestand stehen; die aktuelle Einfügeauswahl bietet sie nicht mehr an.

Die Texte selbst pflegen Sie in den Rechtstexten beziehungsweise globalen Einstellungen. Der Schutz vor Bots reduziert automatisierte Formularsendungen und sollte besonders bei öffentlich stark beworbenen Angeboten getestet werden.

Richten Sie Auswahl, Bestätigungspflicht und Sprachen mit Gesetzestexte im Buchungsprozess einbinden und nachweisen ein. Für die zusätzliche Widerrufsbestätigung bei kurzfristigem Angebotsbeginn müssen auch die Stornobedingungsgruppe und ihr Gesetzestext zusammenpassen; folgen Sie Widerruf für Teilnehmende. Eine dynamisch angehängte Stornotabelle und die veröffentlichte Textversion sind getrennt zu kontrollieren.

Widgets der Payment-Seite

  • Tabelle Transaktion Inhalt: Zeigt die zu bezahlenden Positionen und Beträge.

  • Payment Systeme: Zeigt aktivierte Zahlungsarten wie Kreditkarte, PayPal, Rechnung oder weitere Anbieter. In Bootstrap 5.3 können die im Design sichtbaren Zahlungssysteme und ihre Reihenfolge gezielt gewählt werden; bei älteren Bootstrap-Designs erscheinen eher alle im Konto aktivierten Zahlungsarten.

  • Text Block: Ergänzt Hinweise zu Zahlungsablauf, Support, Rechnung oder Sicherheitsinformationen.

Welche Zahlungsarten erscheinen, hängt von den aktivierten Bezahlsystemen, Angebotsregeln und MustPay-Einstellungen ab. Bei PayPal Checkout kann zusätzlich relevant sein, ob PayPal automatisch verfügbare Zahlungsmethoden anzeigen darf oder ob Sie die sichtbaren Methoden selbst einschränken.

Payment-Vorlage mit markierten Widgets I, J und K

Beispiel für eine Payment-Seite: Buchungsbetrag und Zahlungsarten werden durch eigene Widgets dargestellt. Die fachliche Zahlungslogik wird in den Angebots- und Anmeldeeinstellungen festgelegt.

I
Buchungspositionen und Zahlbetrag anzeigen
J
Verbundene Zahlungsarten anbieten
K
Ergänzende Zahlungshinweise ausgeben

Die Payment-Seite erscheint automatisch nach der Zusammenfassung, wenn das Angebot MustPay verwendet. Zusätzlich kann in den globalen Anmeldeeinstellungen festgelegt werden, dass die Payment-Seite nach jedem Buchungsabschluss angezeigt wird, auch wenn ein einzelnes Angebot nicht ausdrücklich MustPay aktiviert hat.

Payment-Seite im Detail

Die Payment-Seite zeigt Zahlungsoptionen und Transaktionsinformationen, wenn der Buchungsprozess dies erfordert. Das Widget Tabelle Transaktion Inhalt erklärt, welche Positionen bezahlt werden. Das Widget Payment Systeme zeigt die aktivierten und für diese Buchung verfügbaren Zahlungsarten.

Ein Textblock auf der Payment-Seite eignet sich für kurze Hinweise zu Rechnung, Zahlungsfrist, MustPay oder Supportkontakt. Halten Sie diesen Text knapp, damit die Zahlung nicht unnötig unterbrochen wird.

Zahlungsarten für einen Angebotsbereich auswählen

In Bootstrap 5.3 wählen und sortieren Sie im Widget Payment Systeme die im Design gezeigten Zahlungsarten. Die Anbieter müssen zusätzlich im Konto aktiv und für den konkreten Zahlungsvorgang verfügbar sein. Eine Designauswahl verbindet keinen Anbieter und ändert keine MustPay-Regel.

  1. Prüfen Sie unter Einstellungen → Zahlungssysteme die benötigten aktiven Anbieter.
  2. Öffnen Sie das eigene Design, das die betreffenden Angebote tatsächlich verwenden. Soll sich nur ein Angebotsbereich unterscheiden, prüfen Sie dessen Designzuordnung beziehungsweise passenden Einbettungslink.
  3. Wählen Sie die Payment-Seite, öffnen Sie Payment Systeme und passen Sie die Auswahl und Reihenfolge an. Lassen Sie für einen zahlungspflichtigen Ablauf mindestens einen tatsächlich zulässigen Weg verfügbar.
  4. Speichern Sie die Änderung und beginnen Sie einen neuen Buchungsdurchlauf über den echten Website- oder Angebotslink. Prüfen Sie zusätzlich den direkten öffentlichen Angebotslink, sofern er verwendet wird.
  5. Kontrollieren Sie die angebotenen Zahlungswege, Abschlussseite, Rechnung, Transaktionen und Bestätigung. Wiederholen Sie den Test mit den relevanten Währungen und MustPay-Einstellungen.
Beispiel: Rechnung für einen eigenen Angebotsbereich

Im Konto sind Rechnung und ein Onlineanbieter aktiv. Ein eigener Angebotsbereich verwendet ein eigenes Bootstrap-5.3-Design, dessen Payment-Widget nur Rechnung enthält. Das Team prüft mit einer neuen Demobuchung, ob die Rechnung unter den geltenden Abschlussregeln auswählbar ist. Die übrigen Angebote behalten ihre beabsichtigte Auswahl im jeweils verwendeten Design.

Ein kopiertes Design wirkt erst über die tatsächlich verwendete Zuordnung oder den aufgerufenen Link. Fehlt eine erwartete Zahlungsart, prüfen Sie daher Kontoverbindung, Designauswahl und konkrete Buchungsregeln gemeinsam. Entfernen Sie für Zahlung erst vor Ort nicht lediglich das Widget.

MustPay, Countdown und Abschluss

Bei MustPay muss die Zahlung abgeschlossen werden, bevor die Buchung definitiv wird. Ein Countdown kann verhindern, dass Plätze zu lange blockiert bleiben. Details finden Sie unter MustPay und Countdown.

Testen Sie die Payment-Seite mit erfolgreicher Zahlung, abgebrochener Zahlung, Rechnung und nicht zahlungspflichtigem Angebot. Danach prüfen Sie die Abschlussseite, E-Mail und Dokumente.

Anwendungsbeispiel: Buchung mit Gutschein und Kreditkarte

Eine Kundin prüft auf der Zusammenfassung ihre Teilnehmenden, löst einen Promotionscode ein, akzeptiert AGB und Datenschutz und klickt auf Abschliessen. Danach erscheint die Payment-Seite mit reduziertem Betrag und Kreditkartenzahlung. Nach erfolgreicher Zahlung wird sie zur Abschlussseite geführt.

Praxischeck für Zusammenfassung und Payment

Die Zusammenfassung ist die letzte Kontrollseite vor dem Abschluss. Prüfen Sie dort Preis, Teilnehmende, Zusatzleistungen, Rechtstexte, Gutscheine und Zahlungsart. Auf der Payment-Seite sollten Sie zusätzlich testen, wie sich MustPay, Countdown, Rechnung, Stripe, PayPal oder andere Zahlungsarten im echten Buchungsablauf verhalten.

Anwendungsbeispiel: Rechnung und Karte sauber unterscheiden

Ein Angebot erlaubt Rechnung und Kreditkarte. Die Zusammenfassung zeigt Gesamtpreis und Rechtstexte; erst die Payment-Seite zeigt die verfügbaren Zahlarten. Der Test prüft beide Wege bis zur Abschlussseite und kontrolliert, dass keine Zahlart nur optisch vorhanden ist.

Anwendungsbeispiel: Promotion mit Pflichtbestätigung

Eine Promotion reduziert den Preis erst nach gültigem Code. Die Zusammenfassung zeigt alten und neuen Betrag sowie einen verpflichtenden Gesetzestext. Zusätzlich wird ein ungültiger Code und ein nicht bestätigter Rechtstext getestet, bevor die Abschlussaktion freigegeben wird.

Aktuelle Zusammenfassung und Abo-Auswahl einrichten

Verwenden Sie in neuen Designs das aktuelle Widget Zusammenfassung. Es kann Angebot, Termine, Preiskategorien, Zusatzleistungen, Lektionen, Multiangebote, Teilnehmende, Promotionen, MwSt. und Gesamtbetrag anzeigen. Reihenfolge, Sichtbarkeit einzelner Bereiche, Leerzustände, Bilddarstellung und Bezeichnungen pro Sprache lassen sich einstellen. Als rechte Sticky Sidebar kann es ab Tabletbreite seitlich stehen; Smartphoneansicht und lange Texte müssen weiterhin gut lesbar bleiben.

Bei aktivem Abo-Plugin und Bootstrap 5.3 steht in dieser Vorlage die Abo-Auswahl zur Verfügung. Entscheiden Sie, ob die Person die Auswahl ändern darf und ob Gültigkeit und Restnutzungen sichtbar sind. Prüfen Sie den Gesamtbetrag nach Wahl eines passenden Abos und nach Eingabe eines Codes. Die geltenden Regeln zu Vorteilen und deren Kombination erklärt Abonnemente buchen und verwenden.

Für neue Rechtstextbestätigungen verwenden Sie Gesetzestexte. Die älteren getrennten Widgets AGB, Widerrufsbelehrung und Datenschutzerklärung können in bestehenden Designs vorkommen, werden in der aktuellen Einfügeauswahl aber nicht mehr angeboten. Bearbeiten Sie die Inhalte unter Gesetzestexte und prüfen Sie die tatsächlich verlangte Bestätigung vor dem Abschluss.

Für den Kauf eines neuen Abonnements gilt die eigene Checkout-Vorlage. Die Abo-Auswahl in einer Kursbuchung verwendet dagegen ein vorhandenes Abo. Prüfen Sie bei Einzelkauf und gemeinsamem Warenkorb die unterschiedlichen Abo-Rechtstexte und Bestätigungsnachweise.

Buttontext, Warenkorb und Zahlung abstimmen

Öffnen Sie den Abschliessen Button. Wählen Sie die Beschriftung automatisch, Buchung, Warenkorb, Zahlung oder einen eigenen Text je Sprache und richten Sie die Buttonposition aus. Die Beschriftung ändert die tatsächliche Aktion nicht. Mit Warenkorb anbieten kann im klassischen Ablauf ein zusätzlicher Warenkorbbutton erscheinen; in der Design-Buchungsansicht mit Mitgliedschaften wird der Warenkorb zum primären Abschlussweg.

Listenbuchungen haben einen eigenen Abschluss; der Warenkorb wird für Wartelisten- und Anfragelisteneinträge hier nicht als primäre Aktion angeboten. Lesen Sie Warenkorb und Abschlussaktion und prüfen Sie den Ablauf mit kostenpflichtiger, kostenloser und noch offener MustPay-Buchung.

Im Widget Payment Systeme wählen und sortieren Sie die aktiven Zahlungsarten. Bei PayPal steuert die automatische Auswahl der Zahlungsquellen, welche Einzeloptionen noch angezeigt werden. Eine sichtbare Zahlart im Design ersetzt weder ihre Kontoeinrichtung noch die Zulässigkeit für die aktuelle Buchung.

Verwandte Anleitungen