Zum Hauptinhalt springen

Stripe Checkout Block

Vor über einer Woche aktualisiert

⭐ Verfügbar im folgenden Paket: Conversion-Paket (inkl. in Growth, Scale)

⭐ Verfügbar in den folgenden Plänen: Business

👀 Nicht sicher, welchen Plan du hast? Überprüfe dein Abonnement.

Mit dem Stripe Checkout-Block kannst du Zahlungen und Transaktionen zu deinem Heyflow hinzufügen und es Flow-Besucher:innen ermöglichen, einmalige Käufe abzuschließen, ohne die Seite verlassen zu müssen.

Du nutzt Heyflow aktuell in der Testphase? Aus Sicherheitsgründen steht dir diese Funktion während der Testphase nicht zur Verfügung. Wenn du Fragen hast oder Hilfe brauchst, schreib uns gerne im Chat oder per Mail an [email protected].


Wie funktioniert es?

  • Das Design deines Stripe-Blocks hängt von deinen Stripe-Presets ab. Du kannst im Tab "Aussehen" in den Blockeinstellungen aus verschiedenen Stripe-Presets wählen.

  • Aus Sicherheitsgründen kannst du nur einen Betrag pro Checkout-Block festlegen. Wenn du mehrere Checkout-Optionen mit unterschiedlichen Beträgen in deinen Heyflow einbauen möchtest, empfehlen wir dir, mehrere Seiten mit Stripe-Checkout-Blöcken einzufügen und deine Flow-Besucher:innen mit konditionaler Logik zu der entsprechenden Option zu leiten.

  • Im Moment akzeptiert der Stripe Checkout-Block nur Kreditkarten. Andere Zahlungsarten (z.B. PayPal, Bankkonto) können nicht verwendet werden.

  • Der Block funktioniert nicht in eingebetteten Flows.

Bitte beachte: Dieses Feature wird zunächst als Beta-Version veröffentlicht, die für Heyflow-Kunden kostenlos zugänglich ist. Bitte beachte, dass wir in Zukunft möglicherweise eine Preisstruktur mit Umsatzbeteiligung oder Pauschalgebühr einführen werden.


Ersteinrichtung der Stripe-Integration

  1. Klicke auf deine Initialen in der oberen rechten Ecke, um deine Account-Einstellungen zu öffnen und gehe zu "Integrationen".

  2. Wähle "Integration hinzufügen" und ein Pop-up-Fenster wird angezeigt. Hier musst du Stripe auswählen.

  3. Dann wirst du aufgefordert, deine Stripe-Anmeldedaten einzugeben, um dein Konto zu authentifizieren.

  4. Nachdem du Stripe verbunden hast, kannst du den Stripe Checkout-Block zu jedem Heyflow hinzufügen!


Inhalt bearbeiten

Nach dem Klick auf einen Block findest du rechts den Bereich Inhalts.

Zuerst aktualisierst du das Button-Label, das den Nutzer:innen angezeigt werden soll. Anschließend legst du die Erfolgsmeldung fest – also den Text, der Nutzer:innen angezeigt wird, sobald ihre Zahlung erfolgreich abgeschlossen wurde.

🔎 Die Button-Farbe des Stripe-Blocks ist immer die Sekundärfarbe. Lerne hier mehr über das allgemeine Flow-Design.


Einstellungen anpassen

Nach dem Klick auf einen Block findest du rechts den Bereich Einstellungen. Hier passt du Optionen, Darstellung und Verhalten des Blocks so an, wie es zu deinem Flow passt.

Allgemein

In den Allgemeinen Einstellungen konfigurierst du alle Details rund um die Zahlungsabwicklung. Zuerst wählst du das Stripe-Konto, das du verbinden möchtest.

Anschließend bestimmst du die Währung für die Transaktion – entweder EUR (€) oder USD ($). Danach legst du den Preis der Zahlung fest. Außerdem kannst du Werte aus deinem Flow an Stripe übergeben, z. B. Name, E-Mail und Telefonnummer.

Wichtig: Wenn du den Preis in den Blockeinstellungen änderst, wird der neue Betrag sofort in deinem Live-Flow angezeigt, ohne dass du ihn erneut veröffentlichen musst.

Navigation

Unter Navigation kannst du einstellen, was nach der Stripe Bezahlung passiert:

  • Nächste Seite: Immer zur nächsten Seite gehen

  • Zur Seite springen: Immer zu einer bestimmten Seite gehen

  • Weiterleitung: Zu einer anderen Website navigieren

  • Absenden: Das Formular absenden

Erscheinungsbild

Lege fest, ob der Block nur auf Mobile, Desktop oder gar nicht angezeigt wird. Du kannst außerdem eine Hintergrundfarbe für den Block wählen.

Für das Layout wähle zwischen Automatic, Tabs und Accordion. Du kannst außerdem auch ein anderes Stripe Theme, wie z.B. Night, Flat, Minimal, Ninety Five, Bubble Gum oder Dark Blue Theme wählen.

❗ Wichtig: Die Sprache des Blocks passt sich automatisch an die Sprache des Browsers der Besucher:innen an.

Abstände

Passe die Breite des Blockes (S, M, L oder max.) an und definiere die Abstände nach oben, unten, links und rechts mit einer Pixelangabe.

Labels & Variablen

System Label legen fest, wie deine Daten gespeichert und organisiert werden.

Tracking

Wenn das Tracking für diesen Block aktiviert ist, kannst du der erfolgreichen Bezahlung einen Ereignisnamen geben, der an deine integrierten Tracking-Tools gesendet wird. Hier findest du mehr Informationen zum Tracking.

Hat dies deine Frage beantwortet?