Der Zahlungsbutton Block ermöglicht es Ihnen, Stripe-Zahlungen direkt auf jeder SeedProd-Seite zu akzeptieren – kein WooCommerce-Shop, keine komplexe Checkout-Einrichtung erforderlich. Verbinden Sie einfach Ihr Stripe-Konto, legen Sie einen Betrag und eine Beschreibung fest, und ein voll funktionsfähiger Zahlungsbutton erscheint auf Ihrer Seite, bereit, Geld einzuziehen.
Dieser Block ist ideal für den Verkauf einzelner Produkte, digitaler Downloads, Dienstleistungen, Event-Tickets oder Spendenaktionen, ohne den Aufwand eines vollständigen E-Commerce-Shops. Der Button ist mit demselben flexiblen Designsystem wie der Standard-Button-Block von SeedProd gestaltet und bietet Ihnen Vorlagen, Farbverläufe, Rahmenkontrollen und Icon-Unterstützung, damit er perfekt zu Ihrem Seitendesign passt.
Hinzufügen des Zahlungsbutton Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Zahlungsbutton Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke den Zahlungsbutton Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Zahlungsbutton Block, um seine Einstellungen zu öffnen. Der Inhalt Tab ist in drei Abschnitte unterteilt.
Zahlungseinrichtung:
Bevor Sie die Zahlungsdetails konfigurieren, müssen Sie Ihr Stripe-Konto verbinden. Klicken Sie auf Mit Stripe verbinden, um SeedProd zu autorisieren, Zahlungen über Ihr Konto abzuwickeln. Sobald verbunden, können Sie die folgenden Felder ausfüllen:
- Betrag: Geben Sie den zu berechnenden Zahlungsbetrag ein (erforderlich). Dieser Wert wird an Stripe übergeben, wenn der Button geklickt wird.
- Zahlungsbeschreibung: Geben Sie eine kurze Beschreibung dessen ein, wofür der Kunde bezahlt (erforderlich). Dies wird in Ihrem Stripe-Dashboard und auf der Quittung des Kunden angezeigt.
- Zahlungswährung: Wählen Sie die Währung für die Transaktion aus einer umfassenden Liste von Weltwährungen (Standard: USD).
- Erfolgs-URL: Geben Sie die URL ein, zu der Kunden nach einer erfolgreichen Zahlung weitergeleitet werden sollen, z. B. eine Dankesseite.
Schaltfläche:
- Button-Text: Geben Sie die Hauptbeschriftung ein, die auf dem Button angezeigt wird (Standard: „Jetzt bezahlen“).
- Button-Untertext: Fügen Sie optional eine sekundäre Zeile mit kleinerem Text unter der Hauptbeschriftung des Buttons hinzu.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Buttons fest – Links, Mitte oder Rechts – mit geräteabhängiger Steuerung für Desktop, Tablet und Mobilgeräte.
- Größe: Wählen Sie die Button-Größe aus Klein, Mittel, Groß, X-Groß oder 2X-Groß.
Icons:
- Icon vor Text: Wählen Sie ein Icon aus, das links vom Button-Text angezeigt werden soll, über die Icon-Auswahl.
- Icon nach Text: Wählen Sie ein Icon aus, das rechts vom Button-Text angezeigt werden soll, über die Icon-Auswahl.
Schritt 2a: Wählen Sie einen Vorlagenstil
Im Tab Vorlagen können Sie mit einem einzigen Klick einen vordefinierten Stil auf Ihre Zahlungs-Schaltfläche anwenden. Verfügbare Vorlagen sind Pill-Schaltfläche, Flache Schaltfläche, Blaue Schaltfläche, Hellgrüne Schaltfläche, Grüne Schaltfläche, Orange Schaltfläche, Rote Schaltfläche, Gelbe Schaltfläche, Weiße Schaltfläche, Graue Schaltfläche und Schwarze Schaltfläche. Das Anwenden einer Vorlage aktualisiert sofort die Farben, die Form und den Stil der Schaltfläche, um dem gewählten Voreinstellung zu entsprechen.
Schritt 3: Design anpassen
Im Tab Erweitert gibt der Abschnitt Stile Ihnen die volle Kontrolle über das visuelle Erscheinungsbild der Schaltfläche:
- Typografie: Legen Sie Schriftfamilie, Größe, Stärke, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für den Schaltflächentext fest.
- Schaltflächenstil: Wählen Sie aus den Rendering-Stilen Flach, 2D, Vintage oder Ghost.
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe der Schaltfläche für den normalen Zustand und den Hover-Zustand fest.
- Schaltflächentextfarbe: Legen Sie die Farbe der Schaltflächenbeschriftung für den normalen Zustand und den Hover-Zustand fest.
- Hintergrundstil der Schaltfläche: Wechseln Sie zwischen einfarbigen und Farbverlauf-Hintergründen. Der Farbverlauf-Modus zeigt Typ (Radial/Linear), Winkel, Position, erste und zweite Farben sowie deren Position an.
- Vertikales Padding: Steuern Sie den inneren Abstand oben und unten der Schaltfläche.
- Horizontales Padding: Steuern Sie den inneren Abstand links und rechts der Schaltfläche.
- Abgerundete Ecken: Runden Sie die Ecken der Schaltfläche ab, indem Sie den Wert für die abgerundeten Ecken anpassen.
- Randbreite der Schaltfläche: Legen Sie die Dicke des Randes um die Schaltfläche fest.
- Randfarbe der Schaltfläche: Wählen Sie die Farbe des Schaltflächenrandes.
- Textschatten: Fügen Sie dem Schaltflächentext einen Schatten hinzu, indem Sie vordefinierte Größenoptionen verwenden (Keine, Haarfein, Klein, Mittel, Groß, X-Groß, 2X-Groß).
- Schatten: Fügen Sie der Schaltfläche einen Schatten hinzu, indem Sie dieselben vordefinierten Größenoptionen verwenden.
Der Tab Erweitert bietet auch Steuerelemente für Abstände (Rand und Innenabstand), benutzerdefinierte CSS-Attribute, Geräte-Sichtbarkeit und Eingangs-Animationen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie mit der Konfiguration des Zahlungs-Schaltflächen-Blocks und der Anpassung seines Erscheinungsbilds fertig sind, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Zahlungs-Schaltflächen-Block zu Ihrer Seite hinzugefügt! Mit Ihrem verbundenen Stripe-Konto und konfigurierten Zahlungsdetails kann Ihre Seite jetzt echte Transaktionen akzeptieren, ohne dass ein Warenkorb oder eine vollständige E-Commerce-Einrichtung erforderlich ist. Experimentieren Sie mit Vorlagen, Schaltflächenstilen und Icon-Kombinationen, um eine Zahlungs-Schaltfläche zu erstellen, die sich natürlich in das Design Ihrer Seite einfügt und Besucher zum Abschluss ihres Kaufs anregt.