Kasse und Zahlung

„Zur Kasse“ reserviert die Tickets für zehn Minuten und führt zur Kasse auf deiner Website. Sie läuft genau wie im Shop: dieselben Regeln, Preise, Gebühren und Mails.

Die ganze Kasse

<ts-route match="order"><ts-checkout></ts-checkout></ts-route>

ts-checkout zeigt von selbst das Richtige: das Formular, danach die Zahlung, danach die Tickets. Ist die Reservierung abgelaufen, sagt er das und führt zurück zur Auswahl.

Teil für Teil

Willst du das Formular in zwei Spalten mit Zusammenfassung daneben, setzt du die Teile selbst. Sie teilen sich die Eingaben, du kannst sie also frei verteilen:

<ts-route match="order">
  <div class="kasse">
    <main>
      <ts-order-timer></ts-order-timer>
      <ts-buyer-form></ts-buyer-form>
      <ts-payment></ts-payment>
    </main>
    <aside>
      <ts-order-summary></ts-order-summary>
      <ts-voucher-field></ts-voucher-field>
      <ts-product-offer></ts-product-offer>
      <ts-order-actions></ts-order-actions>
    </aside>
  </div>
  <ts-order-confirmation></ts-order-confirmation>
  <ts-order-downloads></ts-order-downloads>
  <ts-order-tickets></ts-order-tickets>
</ts-route>

Jeder Teil erscheint nur, wenn er dran ist. ts-buyer-form verschwindet, sobald die Zahlung läuft, und ts-order-tickets taucht erst nach dem Bezahlen auf. Auch das Formular lässt sich zerlegen, die Teile stehen unter Alle Bausteine.

Gutscheine und Rabattcodes

• ts-code-field löst bei der Ticketauswahl Rabattcodes und geheime Links ein. Der Code steht danach in der Adresse (?code=SOMMER), so kannst du auch Links mit Code verschicken.
• ts-voucher-field löst in der Kasse Gutscheine ein. Sie decken den offenen Betrag ganz oder teilweise.
• ts-voucher-purchase verkauft Gutscheine. Er zeigt nur etwas, wenn du im Dashboard Gutscheine verkaufst.

Zahlung

Zahlungsart	Was der Käufer sieht
Stripe	Das Payment Element direkt auf deiner Seite, mit Karte, Apple Pay, Google Pay und allem, was du bei Stripe freigeschaltet hast
Mollie, PayPal	Weiterleitung zum Anbieter, danach zurück auf deine Website
Vorkasse	Bankdaten zum Kopieren und GiroCode
Testzahlung	Nur solange du noch kein Zahlungskonto verbunden hast

Die Kartenfelder von Stripe liegen im Rahmen von Stripe. Dort greift dein CSS nicht. Standardmäßig übernimmt das Payment Element Schrift und Textfarbe deiner Seite und die Farbe deines Shops. Genauer stellst du es mit der Appearance API von Stripe ein:

<script>
  addEventListener("DOMContentLoaded", () => {
    TickySmart.init({
      stripeAppearance: {
        theme: "flat",
        variables: { colorPrimary: "#e8503a", borderRadius: "12px" },
      },
    });
  });
</script>

Was die Kasse immer mitbringt

Die Kasse ist ein Kaufvertrag, deshalb lassen sich die Pflichtangaben nicht weglassen. Setzt du ts-checkout-submit ohne ts-terms oder ts-withdrawal-note auf die Seite, bringt er sie selbst mit. Ohne Zustimmung nimmt TickySmart keine Bestellung an. Du kannst die Texte gestalten und verschieben, sie müssen aber gut sichtbar bleiben. Mehr unter Messung, Recht und Sicherheit.

Häufige Fragen

Was passiert, wenn der Käufer den Tab schließt?

Die Reservierung läuft nach zehn Minuten ab, die Tickets werden wieder frei. Kommt er vorher zurück, geht es an derselben Stelle weiter, denn sein Browser merkt sich die Bestellung 30 Tage lang.

Wohin führen die Links in der Bestellmail?

In deinen Shop, nicht auf deine Website. Dort sieht der Käufer dieselben Tickets. Das funktioniert auch, wenn du deine Website später umbaust.

Wie erkenne ich Bestellungen über Elements?

In der Bestellung steht unter Verkauft über dann Elements auf deiner Webseite. In den Statistiken zählen sie zu Deine Webseite (Widget oder Elements).