Skip to main content
Das Stripe-Checkout-Element fügt Ihrer Landingpage ein sicheres Zahlungsformular hinzu. Besucher geben ihre Kartendaten ein und bezahlen, ohne die Seite zu verlassen – so bleibt der Käufer vom ersten Klick bis zum Kauf in Ihrem Funnel. Die Zahlungen werden von Stripe verarbeitet. Kartendaten gehen direkt an Stripe und durchlaufen niemals LanderLab.

Bevor Sie beginnen

Verbinden Sie Ihr Stripe-Konto unter Integrations. Der Checkout nutzt diese Verbindung, um Zahlungen zu verarbeiten und Ihre Stripe-Produkte und -Gutscheine zu laden.

Das Stripe-Checkout-Element hinzufügen

  1. Öffnen Sie Ihre Seite im Editor.
  2. Öffnen Sie in der linken Seitenleiste Elements und suchen Sie die Kategorie Conversion.
  3. Ziehen Sie Stripe Checkout auf die Arbeitsfläche.
  4. Klicken Sie auf das Element, um rechts seine Einstellungen zu öffnen.
Die Arbeitsfläche zeigt den Checkout im Preview Mode. Er aktualisiert sich live, während Sie Einstellungen ändern, sodass Sie genau sehen, was Ihre Besucher sehen werden.
Stripe Element

Produkt

Legen Sie über die Einstellung Source fest, woher die Produktdaten stammen. Manual bietet Ihnen diese Felder:
  • Name: Der Produktname, der oben im Checkout angezeigt wird
  • Description: Eine kurze Zeile unter dem Namen, zum Beispiel Kostenloser Versand
  • Image: Ein optionales Produktbild
Bei Stripe product öffnen Sie das Dropdown Product und durchsuchen Ihren Stripe-Katalog. Die Produkte sind in One-time und Recurring gruppiert. Fehlt ein gerade in Stripe angelegtes Produkt, klicken Sie auf Refresh products. Sie können weiterhin ein Image hinterlegen, das neben dem Produktnamen erscheint.
Wenn Sie Source auf Stripe product setzen, müssen Sie ein Produkt auswählen. Andernfalls funktioniert der Checkout auf der Live-Seite nicht.

Abrechnung

Bei manuellen Produkten wählen Sie One-time für eine Einmalzahlung oder Recurring für ein Abonnement, legen anschließend den Price fest und wählen die Währung. Bei Stripe-Produkten sind diese Einstellungen ausgeblendet, da Preis und Abrechnungsart aus Stripe stammen.

Adaptive Pricing

Aktivieren Sie Adaptive Pricing, um den Preis in der lokalen Währung des Besuchers anzuzeigen. Stripe übernimmt die Umrechnung, und der Checkout zeigt einen Währungswechsel, sodass Käufer zwischen Ihrer und ihrer Währung wählen können. Die endgültigen Beträge können je nach Wechselkurs leicht abweichen.

Menge

Legen Sie die Standardmenge unter Quantity fest. Aktivieren Sie Let customers change quantity, um eine Mengenauswahl anzuzeigen, und bestimmen Sie Min und Max. Der Checkout zeigt Zwischensumme und Gesamtsumme, die sich mit der Menge aktualisieren.

Rabatt

Gutscheine und Promo-Codes stammen aus Ihrem Stripe-Konto. Legen Sie sie zuerst in Stripe an und klicken Sie auf Refresh coupons, falls sie nicht in der Liste erscheinen.
Wenn Sie Discount auf Coupon setzen, müssen Sie einen Gutschein auswählen. Andernfalls funktioniert der Checkout auf der Live-Seite nicht.

Versand

Aktivieren Sie Collect shipping address, um im Checkout eine Lieferadresse abzufragen. Das Formular ergänzt einen Abschnitt Shipping information mit Feldern für vollständigen Namen, Land und Adresse. Ein Kontrollkästchen Billing info is same as shipping erspart Käufern die doppelte Eingabe ihrer Adresse.
  • Countries: Behalten Sie All countries bei oder wählen Sie nur die Länder, in die Sie liefern
  • Shipping Options: Klicken Sie auf Add shipping option, um einen Versandtarif anzulegen
Jede Versandoption hat:
  • Name, zum Beispiel Standardversand oder Express
  • Price, für kostenlosen Versand auf 0 setzen
  • Delivery estimate, eine Spanne aus minimaler und maximaler Lieferzeit in Tagen
Legen Sie mehrere Optionen an, damit Käufer wählen können. Der gewählte Tarif wird zur Gesamtsumme addiert.
D54e4bbb 3f9a 4d83 Bb76 27e49777bff8

Checkout

  • Button Text: Eigener Text für die Bezahlschaltfläche. Lassen Sie das Feld leer, um Stripes Standard zu verwenden, der den Betrag anzeigt, etwa Pay $88.20
  • Language: Die Sprache des Checkout-Formulars. Auto übernimmt die Browsersprache des Besuchers
  • Theme: Das Erscheinungsbild des Formulars. Match Page passt es an Ihr Seitendesign an
  • Billing Address: Erfasst die vollständige Rechnungsadresse des Käufers
  • Stripe Link: Erlaubt Käufern, ihre Zahlungsdaten mit Stripe Link zu speichern und beim nächsten Mal schneller zu bezahlen
  • One purchase per visitor: Verhindert, dass derselbe Besucher zweimal bezahlt – nützlich bei einmaligen Angeboten

Erfolgreiche Zahlung

Legen Sie über die Einstellung Action fest, was nach einer erfolgreichen Zahlung passiert. Bei Stay on page verfassen Sie Ihre eigene Confirmation Message. Lassen Sie das Feld leer, sehen Käufer Payment received, thank you!

Layout

Wie bei anderen Elementen passen Sie Position (Ausrichtung links, zentriert oder rechts), Dimensions (Standardbreite ist 360px) und Spacing (Margin und Padding) an.

Vor dem Veröffentlichen

  1. Klicken Sie auf Preview und prüfen Sie den Checkout so, wie ein Besucher ihn sehen würde.
  2. Kontrollieren Sie Preis, Währung, Rabatt und Versandsummen.
  3. Stellen Sie sicher, dass unter dem Checkout auf der Arbeitsfläche keine Warnung erscheint. Eine Warnung bedeutet, dass ein erforderliches Produkt oder ein Gutschein fehlt.
  4. Veröffentlichen Sie die Seite.

FAQ

Nein. Setzen Sie Source auf Manual und geben Sie Name, Preis und Währung in LanderLab ein. Nutzen Sie Stripe product nur, wenn Preis und Abrechnung in Stripe verwaltet werden sollen. In beiden Fällen muss Ihr Stripe-Konto unter Integrations verbunden sein.
Ja. Wählen Sie unter Billing die Option Recurring oder ein wiederkehrendes Produkt aus Ihrem Stripe-Katalog.
Ein Gutschein wird für jeden Käufer automatisch angewendet. Ein Promo-Code blendet ein Feld ein, in das Käufer den Code selbst eingeben.
Klicken Sie im Dropdown auf Refresh products oder Refresh coupons, um die aktuellen Daten aus Stripe zu laden.
Alle Zahlungen, Erstattungen und Kundendaten finden Sie in Ihrem Stripe-Dashboard.