Verwenden Sie den Block-Editor-Schaltflächenblock mit WP Simple Pay

Wollten Sie schon immer ein Overlay-Zahlungsformular auf der Website oder ein externes Stripe Checkout-Formular über eine Schaltfläche starten, die zu Ihrer Website passt?

In diesem Tutorial zeigen wir Ihnen, wie Sie den Button-Block mit WP Simple Pay einrichten und verwenden.

Erstellen eines Zahlungsformulars

Zuerst müssen wir sicherstellen, dass ein kompatibles Zahlungsformular erstellt wurde. Aufgrund der Natur des Startens des Zahlungsformulars von einer einzelnen Schaltfläche können nur Overlay-Modal-Zahlungsformulare auf der Website oder externe Stripe Checkout-Formulare ohne zusätzliche Felder verwendet werden.

Externes Stripe Checkout-Formular

Besuchen Sie WP Simple Pay → Neu hinzufügen und wählen Sie die Vorlage Zahlungsschaltfläche für das Zahlungsformular.

Klicken Sie anschließend auf die Registerkarte „Stripe Checkout“ im Zahlungsformular-Builder, um die Stripe Checkout-Funktionalität anzupassen, die dem Benutzer bei der Weiterleitung angezeigt wird.

Fügen Sie keine zusätzlichen Felder im Tab „Formularfelder“ hinzu. Benutzerdefinierte Formularfelder auf der Website verhindern, dass die Zahlungsschaltfläche für die Verwendung mit dem Button-Block verfügbar ist.

Overlay-Modal-Zahlungsformular auf der Website

Besuchen Sie WP Simple Pay → Neu hinzufügen und wählen Sie die Vorlage Zahlungsformular für das Zahlungsformular.

Aktivieren Sie anschließend „In einem Overlay-Modal öffnen“.

Von hier aus können Sie die „Zahlung“-Einstellungen des Zahlungsformulars nach Ihren Wünschen anpassen und das Zahlungsformular veröffentlichen.

Hinzufügen des Button-Blocks

Mit Ihrem Block-kompatiblen Zahlungsformular können Sie nun den Button-Block hinzufügen, um Ihr Zahlungsformular zu starten oder zu Stripe Checkout weiterzuleiten. Besuchen Sie Seiten → Neu hinzufügen. Klicken Sie auf das „+“-Symbol, um einen neuen Block einzufügen, und suchen Sie nach „Button“.

Von hier aus können Sie alle Einstellungen des Button-Blocks nach Ihren Wünschen anpassen.

Verknüpfen des Zahlungsformulars und des Button-Blocks

Sobald Sie den Button-Block eingefügt und angepasst haben, können Sie das erstellte Zahlungsformular oder die Zahlungsschaltfläche verknüpfen. Wählen Sie im Einstellungsbereich des Blocks im Panel „WP Simple Pay“ das Formular aus, das Sie verwenden möchten.

Jeder Button-Block kann verwendet werden, um ein kompatibles Zahlungsformular oder eine Zahlungsschaltfläche zu starten. Sie können zum Beispiel eine Schaltfläche in einer Preistabelle-Spalte verwenden: