Kapitel 07

Checkout testen und live schalten

Zuerst stellst du Versand und Steuer ein und spielst einen ganzen Kauf mit einer Testkarte durch. Wenn alles stimmt, schaltest du auf echte Zahlungen um. Der Testmodus kostet nichts und bleibt dir immer erhalten.

1. Warenkorb verbinden

Der Warenkorb deiner Website braucht die Checkout-Adresse deiner Website. Das Plugin trägt sie für dich ein:

1. Klicke im Bereich „Checkout“ unter „Cart buttons“ auf „Update cart buttons“. Das Plugin setzt die Adresse in jede Warenkorb-Komponente des Projekts (in Nibble die Tasche in der Navigation), dazu die Grenze für Gratis-Versand und die Versand-Einstellung für Abos. So zeigt der Warenkorb dieselben Beträge wie die Kasse.
2. Veröffentliche die Website.

Findet das Plugin keine Warenkorb-Komponente, zeigt es die Adresse zum Kopieren an. Sie sieht so aus: https://kspr.online/checkout/s/deine-id?items={items}. Wähle dann deine Warenkorb-Komponente aus und füge die Adresse rechts in die Eigenschaft „Checkout URL“ ein. Lass {items} stehen, dort setzt der Warenkorb die Produkte ein.

2. Versand, Steuer und Optionen

Im Bereich „Checkout“ legst du unter „Shipping“, „Tax“ und „At checkout“ fest, was der Stripe-Checkout abfragt und berechnet. Danach „Save options“. Das Speichern aktualisiert auch die Warenkorb-Knöpfe im Projekt, damit der Warenkorb denselben Versand zeigt wie die Kasse.

Versand

• „Ship to (country codes)“: in welche Länder du lieferst, als Ländercodes mit zwei Buchstaben, zum Beispiel CH, DE, AT. Stripe fragt dann die Lieferadresse ab.
• „Shipping price“: ein fester Versandpreis pro Bestellung. Leer heisst: kein Versand verrechnet.
• „Free shipping from“: Bestellwert, ab dem der Versand gratis ist. Leer heisst: nie gratis.
• „Offer pickup (free)“: Kundschaft kann gratis Abholung wählen.
• „Subscriptions ship free“: Abos ohne Versandkosten (siehe Abos).
• Unter „Advanced“: „Stripe shipping rates (advanced, shr_…)“ für eigene Versandtarife aus dem Stripe-Dashboard. Sie gelten nur, wenn kein Versandpreis eingetragen ist.

Steuer

• „Calculate tax automatically (Stripe Tax)“: Stripe berechnet die Steuer an der Kasse. Dafür muss Stripe Tax in deinem Stripe-Konto eingerichtet sein.
• „Prices in the CMS include tax“ (Standard: an): Deine CMS-Preise enthalten die Mehrwertsteuer schon, wie in Europa üblich. Ausschalten, wenn die Steuer an der Kasse dazukommen soll, wie in den USA.
• „Tax category“: die Steuerkategorie deiner Produkte bei Stripe, zum Beispiel für Lebensmittel.

Steuer-Einstellungen gelten für deine Produkte erst nach dem nächsten „Update products“. Welche Steuersätze für dich gelten, klärst du mit deiner Buchhaltung.

Weitere Optionen

• „Allow discount codes“: Gutscheine, die du im Stripe-Dashboard anlegst, kann deine Kundschaft im Checkout eingeben.
• „Ask for a phone number“: zum Beispiel für den Kurierdienst.
• „Require terms checkbox“ mit „Checkbox text (optional)“: Die Kundschaft muss vor dem Bezahlen ein Häkchen setzen, etwa für deine Verkaufsbedingungen oder eine Altersbestätigung bei Alkohol. Im Text darfst du auf deine AGB-Seite verlinken, zum Beispiel I accept the [terms](https://deinemarke.ch/terms). Dafür braucht dein Stripe-Konto unter „Settings → Public details“ die Adresse deiner AGB, sonst lehnt Stripe das Häkchen ab.

Gibt es mit deinen Einstellungen ein Problem, das den Checkout stört, zeigt das Plugin oben „Checkout problem:“ mit einer Erklärung.

Abos für deine Kundschaft

Ein Produkt mit Billing Interval Week, Month oder Year ist ein Abo: Stripe bucht den Betrag in diesem Rhythmus automatisch ab (Produkte abgleichen).

• Gemischter Warenkorb: Abos und Einmalkäufe dürfen zusammen im Warenkorb liegen. Abos mit unterschiedlichen Intervallen (zum Beispiel wöchentlich und monatlich) nicht, dann meldet die Kasse „Checkout not possible“.
• Versand: Bei Abos wird der Versand als wiederkehrender Posten mit abgebucht, ausser du hast „Subscriptions ship free“ eingeschaltet oder die Bestellung liegt über der Gratis-Grenze.
• Kündigen: Deine Kundschaft verwaltet ihr Abo selbst über „Manage your subscription“, das Kundenportal deines Stripe-Kontos. Der Link steht auf der Danke-Seite und in der Mail nach dem Kauf.
• Footer-Link: Im Plugin findest du unter „Subscription page for your customers“ die Adresse dieses Portals. Verlinke sie im Footer deiner Website, damit Abonnentinnen und Abonnenten jederzeit kündigen oder ihre Karte ändern können.

3. Testkauf

Solange das Plugin auf „Test“ steht, laufen alle Zahlungen im Testmodus von Stripe. Es wird kein echtes Geld bewegt. Der Testmodus ist gratis, live kostet der Checkout $9.90 pro Monat und Website (Abo und Preise).

Aus der Vorschau im Editor

Im Testmodus kannst du direkt aus Framers Vorschau einkaufen, ohne die Website zu veröffentlichen und ohne Domain-Eintrag. Die Kasse öffnet sich dafür in einem neuen Tab. Zurück in der Vorschau fragt der Warenkorb „Finished a test purchase?“ und bietet an, ihn zu leeren. Im Livemodus funktioniert die Vorschau nicht als Kasse, echte Käufe laufen nur über deine veröffentlichte Website.

Auf der veröffentlichten Website

1. Öffne deine veröffentlichte Website (nicht die Vorschau im Editor).
2. Lege zwei verschiedene Produkte in den Warenkorb und ändere eine Menge.
3. Klicke auf „Check out“. Der Stripe-Checkout öffnet sich und zeigt oben den Hinweis auf den Testmodus.
4. Zahle mit der Testkarte 4242 4242 4242 4242, einem beliebigen Ablaufdatum in der Zukunft, einer beliebigen Prüfnummer (CVC) und beliebigen Adressdaten.
5. Nach der Zahlung landest du auf der Danke-Seite deiner Website.
6. Prüfe im Stripe-Dashboard (Testmodus) unter „Zahlungen“, ob der Kauf mit den richtigen Beträgen, Versand und Steuer angekommen ist.

Probiere auch die Sonderfälle aus:

Brichst du im Checkout ab („Zurück“), kommst du auf die Abbruch-Seite deiner Website, und der Warenkorb bleibt erhalten. Verkaufst du Abos, teste auch einen Abo-Kauf und die Kündigung über „Manage your subscription“.

4. Live schalten

1. Stripe-Einstellungen prüfen: Das Plugin zeigt dazu die Liste „Stripe settings to check“: Belege per Mail an die Kundschaft, öffentliche Angaben (Firmenname, Support-Adresse, AGB-Adresse), Stripe Tax, Zahlungsarten und Benachrichtigungen bei neuen Zahlungen. Geh jeden Punkt in deinem Stripe-Dashboard durch.
2. Stripe-Konto vollständig: Im Plugin steht kein Hinweis mehr, dass Stripe noch Angaben braucht.
3. Rechtstexte: Impressum, Datenschutz und Verkaufsbedingungen sind ausgefüllt (Rechtstexte DACH).

4. Öffne den Bereich „Plan“ und klicke „Go live“. Das Plugin zeigt „Before you go live“:

   • „Start a plan ($9.90 / month per site)“
   • „Connect Stripe again for live mode“: Testmodus und Livemodus sind bei Stripe getrennt.
   • „Update products again, live prices are separate“
   • „Update cart buttons and publish your site“
   • „Make one real purchase and refund it in Stripe“
5. Geh die Liste durch und bestätige mit „Switch to live“.

Schaltest du später zurück auf Test, warnt das Plugin: Solange der Checkout im Testmodus ist, kann echte Kundschaft nicht bezahlen.

Zahlungsarten

Der Checkout zeigt die Zahlungsarten, die du in deinem Stripe-Dashboard unter den Einstellungen zu den Zahlungsarten eingeschaltet hast, zum Beispiel Karte, Apple Pay, Google Pay, Klarna oder TWINT, wo Stripe es anbietet. Stripe zeigt dabei nur, was zum Land, zur Währung und zur Art des Kaufs passt. Nicht jede Zahlungsart eignet sich für Abos.

Wenn etwas nicht klappt

Der Checkout meldet Probleme auf einer kleinen Seite mit einem Link zurück zu deiner Website. Die Meldungen sind auf Englisch:

Startet der Checkout nicht, wenn du von deiner eigenen Domain kommst, fehlt diese Domain im Plugin unter den erlaubten Websites.