Kapitel 05

Stripe verbinden

Bezahlt wird über dein eigenes Stripe-Konto. Du verbindest es einmal über ein Stripe-Fenster, ohne Schlüssel zu kopieren. Zahlungen, Auszahlungen und Rückerstattungen laufen danach direkt bei dir.

So funktioniert der Checkout

Framer hat keine eigene Kasse. Deshalb gibt es das Checkout-Plugin von kspr studio:

• Dein Warenkorb auf der Website schickt nur, welche Produkte in welcher Menge gekauft werden.
• Unser Checkout-Dienst liest die Preise in deinem Stripe-Konto und öffnet den Stripe-Checkout in deinem Namen.
• Stripe nimmt die Zahlung entgegen. Das Geld landet in deinem Stripe-Konto, Stripe zahlt es auf dein Bankkonto aus.

Kartendaten sehen weder du noch wir, die verarbeitet nur Stripe. Und weil der Preis aus deinem Stripe-Konto kommt, lässt er sich im Browser nicht manipulieren.

Bevor du anfängst

• Ein Stripe-Konto. Falls du noch keines hast, kannst du es im Stripe-Fenster beim Verbinden anlegen. Für den Testmodus reicht das. Für echte Zahlungen verlangt Stripe später Angaben zu deinem Geschäft und ein Bankkonto.
• Ein Framer-Projekt mit Warenkorb: ein remixtes kspr-Template (Template remixen) oder dein eigenes Projekt nach „Set up shop“ (Ohne Template).

1. Plugin öffnen

1. Öffne dein Projekt in Framer.
2. Öffne das Plugin-Menü und suche nach „Checkout“ von kspr studio.
3. Klicke auf „Open“.

Das Plugin ist auf Englisch, die Knöpfe heissen so, wie sie hier in Anführungszeichen stehen. Es hat zwei Ansichten, umschaltbar im Menü oben:

• „Dashboard“: ein grosses Fenster mit den Bereichen „Overview“, „Design“, „Products“, „Checkout“, „Plan“ und „Help“. Zahlen in der Seitenleiste zeigen, wo noch etwas offen ist.
• „Compact view“: ein schmales Fenster für den Alltag, mit dem nächsten Schritt, „Update products“, den Warenkorb-Knöpfen, deinem Stripe-Konto und dem Abo. Alles andere öffnet das Dashboard.

Der Bereich „Overview“ führt dich durch die Einrichtung. Unter „Setup“ stehen alle Schritte der Reihe nach, jeder offene Schritt hat einen Knopf, der ihn erledigt. Unter „Help“ findest du diese Anleitung, Links zu Stripe, „Support details“ zum Kopieren für eine Support-Anfrage sowie „Terms“ und „Privacy“.

2. Checkout einrichten

1. Klicke in „Overview“ beim Schritt „Create your checkout“ auf „Set up checkout“. Das kostet nichts.
2. Danach steht dort „Checkout created for this project“.

3. Mit Stripe verbinden

1. Öffne den Bereich „Checkout“ und klicke unter „Stripe“ auf „Connect with Stripe“. Es öffnet sich ein Fenster von Stripe. Blockiert dein Browser das Fenster, zeigt das Plugin stattdessen einen Link.
2. Melde dich bei Stripe an oder lege ein neues Konto an.
3. Wähle das Konto, mit dem du verkaufen möchtest, und bestätige die Verbindung.
4. Schliesse das Stripe-Fenster, falls es offen bleibt. Das Plugin zeigt jetzt „Connected“ und den Namen deines Stripe-Kontos.

Steht dort zusätzlich „Stripe still needs details before you can accept payments“, fehlen Stripe noch Angaben für echte Zahlungen. Im Testmodus spielt das keine Rolle. Vor dem Livegang ergänzt du sie im Stripe-Dashboard.

4. Website erlauben

Der Checkout nimmt Bestellungen nur von erlaubten Adressen an. Im Bereich „Checkout“ unter „Allowed websites“:

1. Veröffentliche deine Website, falls noch nicht geschehen.
2. Zeigt das Plugin „Your published site cannot start a checkout yet“, klicke „Allow these domains“.
3. Weitere Adressen, zum Beispiel eine eigene Domain, trägst du bei „Add a domain“ ein und klickst „Add domain“.

Testkäufe aus der Vorschau im Framer-Editor brauchen keinen Eintrag, siehe Checkout testen.

Zugang und Schlüssel

Das Plugin speichert in deinem Projekt einen Schlüssel, mit dem es deinen Checkout verwalten darf. Im Menü oben findest du dazu:

• „Renew key“: erzeugt einen neuen Schlüssel. Der alte funktioniert danach nicht mehr. Sinnvoll, wenn eine Kopie deines Projekts in fremde Hände geraten ist.
• „Forget or delete this checkout…“: Mit „Forget in this project“ entfernst du nur den Schlüssel aus diesem Projekt, der Checkout läuft weiter. Mach das, bevor du eine Kopie des Projekts weitergibst. „Delete checkout“ löscht alle Daten auf unserem Server und trennt Stripe. Produkte und Zahlungen bleiben in deinem Stripe-Konto. Ein laufendes Abo kündigst du vorher.

Fehlt der Schlüssel (zum Beispiel nach „Forget“), meldet das Plugin das. Mit „Restore access with Stripe“ meldest du dich beim verbundenen Stripe-Konto an. Das Stripe-Fenster zeigt danach einen sechsstelligen Code, den du im Plugin bei „Code from the Stripe window“ eingibst und mit „Restore access“ bestätigst. Gib diesen Code nie weiter.

Was wir dürfen und was nicht

Mit der Verbindung erlaubst du unserem Checkout-Dienst, in deinem Stripe-Konto Produkte, Preise und Checkout-Sitzungen anzulegen. Dein Konto bleibt deines: Auszahlungen, Rückerstattungen, Steuern und Zahlungsarten verwaltest du selbst im Stripe-Dashboard. Du kannst die Verbindung jederzeit in den Einstellungen deines Stripe-Kontos trennen. Danach nimmt der Checkout dieser Website keine Zahlungen mehr an, bis du wieder verbindest.

Weiter geht es mit dem Abgleich der Produkte.