So fügen Sie Ihren Preistabellen in Divi . einfache Stripe-Zahlungsschaltflächen hinzu

Stripe ist eine äußerst flexible Zahlungsabwicklungslösung für Online-Unternehmen, insbesondere wenn Sie ein technisch versierter Entwickler sind. Wenn Sie jedoch kein Entwickler sind und dennoch Stripe verwenden möchten, um ein paar Produkte online zu verkaufen, gibt es einfache Möglichkeiten, dies zu tun. Tatsächlich können Sie mit ein paar Codeschnipseln (oder einem einfachen Plugin) im Handumdrehen Stripe-Zahlungsschaltflächen zu Ihrer Website hinzufügen.

In diesem Tutorial zeige ich Ihnen, wie Sie Stripe-Zahlungsschaltflächen mit dem Stripe Payments für WordPress-Plugin zu Ihrer Divi-Website hinzufügen. Ich zeige Ihnen sogar, wie Sie Ihre Schaltflächen so gestalten, dass sie zu Ihrem Divi-Layout passen.

Lass uns anfangen!

Vorgeschmack

Hier ist ein kleiner Vorgeschmack auf die Stripe-Zahlungsschaltflächen, die wir in diesem Tutorial erstellen werden.

Einstieg

Für dieses Anwendungsfall-Tutorial benötigen Sie Folgendes:

• Das Divi-Theme (installiert und aktiv)
• Ein Stripe-Konto
• Das Stripe Payments for WordPress Plugin von WP Simply Pay (installiert und aktiv)
• Wir werden auch ein Seitenlayout für die Preisgestaltung für digitale Produkte verwenden, das KOSTENLOS im Divi Builder verfügbar ist

Über das Plugin

Stripe Payments for WordPress von WP Simply Pay ist ein Plugin, mit dem Sie mit Stripe über eine einfache Shortcode-Einbettung Kreditkartenzahlungen einziehen können. Sie können tatsächlich Checkout-Formulare und Zahlungsschaltflächen manuell erstellen, ohne das Plugin zu verwenden, aber da dieses Plugin die Dinge einfach macht und ein paar praktische Funktionen bietet (wie Zahlungsbestätigungs- und Zahlungsfehlerseiten), dachte ich, dass es auf lange Sicht hilfreicher ist . Ich werde die KOSTENLOSE Lite-Version des Plugins für dieses Tutorial verwenden. Die Pro-Version des Plugins gibt Ihnen mehr Kontrolle über den Stil Ihrer Formulare und unterstützt Dinge wie benutzerdefinierte Felder, benutzerdefinierte Beträge und Abonnementfunktionen.

Stripe-Formulare mit dem Plugin einrichten

Sobald Sie das Plugin installiert und aktiv haben, navigieren Sie zu Simple Pay Lite > Einstellungen . Dann müssen Sie auf der Registerkarte Stripe-Schlüssel die API-Schlüssel Ihres Stripe-Kontos eingeben. Für dieses Tutorial verwende ich nur die Testschlüssel, aber Sie müssen sicherstellen, dass Ihr Stripe-Konto aktiviert und aktiviert und einige Live-API-Schlüssel generiert werden, wenn Sie echtes Geld sammeln möchten.

Sie finden Ihre API-Schlüssel, indem Sie sich bei Ihrem Stripe-Konto anmelden und auf Entwickler > API-Schlüssel klicken.

Sie müssen sowohl den Veröffentlichungsschlüssel als auch den geheimen Schlüssel in die Plugin-Einstellungen kopieren.

Springen Sie nun zur Registerkarte Allgemein. Dort können Sie eine Zahlungserfolgsseite und eine Zahlungsfehlerseite festlegen. Sie werden feststellen, dass das Plugin diese Seiten bereits für Sie erstellt hat. Da der Seiteninhalt jedoch durch einen Shortcode generiert wird, können Sie diese Shortcodes tatsächlich zu jedem Divi-Modul in jedem Divi-Layout hinzufügen, um benutzerdefinierte Versionen dieser Seiten zu erstellen. Behalten Sie vorerst diese Standardseiten bei und fahren Sie mit der Einrichtung fort.

Setzen Sie den Stil der Zahlungsschaltfläche auf „Keine (Vom Thema übernehmen)“. Alles, was dies tut, ist das CSS zu entfernen, das verwendet wird, um die standardmäßige blaue Streifenschaltfläche zu gestalten. Dadurch wird die Sache etwas übersichtlicher, wenn wir unser eigenes benutzerdefiniertes CSS hinzufügen, um die Schaltfläche in Divi zu gestalten.

Speichern Sie dann die Änderungen.

Auf der Registerkarte Zahlungsbestätigung können Sie die verfügbaren Vorlagen-Tags verwenden, um die Nachricht und die Informationen anzupassen, die vom Shortcode auf Ihrer Zahlungsbestätigungsseite angezeigt werden. Aber für dieses Tutorial werde ich einfach die Standardnachricht belassen.

Stripe-Zahlungsformulare erstellen

Die Zahlungsformulare sind in Wirklichkeit Stripe-Zahlungsschaltflächen, die ein Popup-Zahlungsformular generieren, mit dem Benutzer einen Kauf abschließen können, ohne die Seite zu verlassen. Daher müssen Sie für jedes Produkt oder jede Dienstleistung, die Sie verkaufen, ein neues Zahlungsformular erstellen. In diesem Anwendungsfall erstellen wir drei Zahlungsformulare für drei Scheinprodukte.

Um ein neues Zahlungsformular zu erstellen, gehen Sie zum WordPress Dashboard und navigieren Sie zu Simple Pay Lite > Neu hinzufügen.

Geben Sie dem Zahlungsformular einen Titel (dieser Titel wird nicht im Frontend angezeigt).

Geben Sie dann auf der Registerkarte Zahlungsoptionen einen Einmalbetrag ein.

Klicken Sie als Nächstes auf die Registerkarte Formularanzeige auf der Seite und ändern Sie den Standardtext der Zahlungsschaltfläche in "Jetzt kaufen" (oder was auch immer Sie möchten). Sie können auch den Bearbeitungstext der Zahlungsschaltfläche auswählen.

Aktualisieren Sie auf der Registerkarte Checkout-Overlay-Anzeige Folgendes:

Name der Firma
Artikelbeschreibung
Logo-/Bild-URL
Erinnere dich an mich aktivieren: JA

Diese Optionen bestimmen, was im Popup-Fenster des Checkout-Formulars für dieses bestimmte Produkt angezeigt wird.

Wenn Sie fertig sind, stellen Sie sicher und veröffentlichen/aktualisieren Sie das Zahlungsformular.

Sie müssen schließlich den Zahlungsformular-Shortcode oben rechts auf der Seite Zahlungsformular bearbeiten kopieren, um ihn in Ihr Divi-Seitenlayout einzufügen.

Aber vorerst können Sie den gleichen Vorgang fortsetzen, um zwei weitere Zahlungsformulare mit jeweils eigener Artikelbeschreibung, Logo/Bild und Betrag zu erstellen.

Nachdem alle Ihre Zahlungsformulare erstellt wurden, können Sie Ihre Zahlungsformulare aufrufen, indem Sie zu Simple Pay Lite > Zahlungsformulare navigieren. Dort haben Sie einfachen Zugriff auf die Shortcodes.

Hinzufügen von Stripe-Zahlungsschaltflächen zu Ihrem Divi-Seitenlayout

Da die Shortcodes für Stripe-Zahlungsformulare einsatzbereit sind, müssen wir jetzt unser Divi-Seitenlayout zum Laufen bringen. Erstellen Sie dazu eine neue Seite, geben Sie Ihrer Seite einen Titel und klicken Sie, um den Divi Builder zu verwenden.

Wählen Sie dann die Option „Wählen Sie ein vorgefertigtes Layout“.

Öffnen Sie das Paket „Digitales Produkt-Layout“ und klicken Sie auf , um die Seite „Preise für digitale Produkte“ zu verwenden.

Nachdem das Layout auf die Seite geladen wurde, veröffentlichen Sie die Seite und klicken Sie dann auf , um das Frontend zu erstellen.

Gehen Sie in einem separaten Tab zurück zur Seite mit den Zahlungsformularen und greifen Sie auf den Shortcode zu, den Sie der Preistabelle hinzufügen möchten.

Kehren Sie dann zu Ihrem Preisseitenlayout zurück und öffnen Sie die Preistabelleneinstellungen für eine der Preistabellen im Layout.

Nehmen Sie den Schaltflächentext heraus (Sie brauchen ihn nicht, da der Shortcode als Schaltfläche dient) und fügen Sie den Shortcode dann unter dem Inhalt in das Inhaltsfeld ein.

Sie sehen eine nicht gestylte Schaltfläche mit dem Text "Testmodus" unter der Schaltfläche hervorgehoben. Die Schaltfläche ist ohne Stil, da wir die Option ausgewählt haben, die Designstile für die Schaltfläche anstelle der standardmäßigen blauen Schaltfläche zu verwenden. Der Text für den Testmodus dient lediglich dazu, Sie daran zu erinnern, dass Sie kein Live-Stripe-Zahlungsformular verwenden. Der Text für den Testmodus verschwindet offensichtlich, sobald die Live-API-Schlüssel verwendet werden.

Fahren Sie als Nächstes mit dem Kopieren und Einfügen der anderen beiden Zahlungsformular-Shortcodes in die verbleibenden beiden Preistabellen fort.

Testen Sie eine der Schaltflächen, um sicherzustellen, dass das Zahlungsformular-Overlay ordnungsgemäß funktioniert. Es sollte so aussehen…

Leider können Sie mit dieser Version des Plugins das Overlay des Zahlungsformulars nicht über den angezeigten Standardstil hinaus anpassen. Aber die Funktionalität ist da und in vielen Fällen brauchen Sie dieses zusätzliche Styling nicht. Sie können diese Schaltflächen jedoch stylen!

Styling der Stripe-Zahlungsschaltflächen passend zum Layout

Um die Stripe-Zahlungsschaltflächen zu gestalten, werden wir unseren Seiteneinstellungen einige benutzerdefinierte CSS hinzufügen. Zuerst müssen wir herausfinden, welchen Selektor wir verwenden werden, um die Schaltfläche zu gestalten. Sie finden dies mithilfe Ihrer Browser-Entwicklertools. Klicken Sie mit der rechten Maustaste auf den Stripe-Button und wählen Sie "Inspect". Im HTML-Code sieht man, dass der Button eine CSS-Klasse „simpay-payment-btn“ hat.

Dies ist der Selektor, den wir benötigen, um auf den Stil der Schaltfläche abzuzielen.

Wenn wir den Stil unserer Stripe-Zahlungsschaltflächen mit den Schaltflächen in unserem vorgefertigten Layout abgleichen möchten, können wir eine der bereits auf der Seite gestalteten Divi-Schaltflächen überprüfen, um den benötigten CSS-Code zu erhalten.

Öffnen Sie nun die Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS unter der Registerkarte Erweitert hinzu:

.simpay-payment-btn {
    color: #ffffff!important;
    border-color: rgba(0,0,0,0);
    border-radius: 100px;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Poppins',Helvetica,Arial,Lucida,sans-serif!important;
    font-weight: 600!important;
    background-color: #091c4f;
    padding-top: 16px!important;
    padding-right: 32px!important;
    padding-bottom: 16px!important;
    padding-left: 32px!important;
}

Das ist es! Schauen wir uns das Endergebnis an.

Anpassen Ihrer Zahlungsbestätigungs- und Zahlungsfehlerseiten

Vergessen Sie nicht, dass Sie, da das Plugin Ihre Zahlungsbestätigung und den Inhalt der fehlgeschlagenen Seite mit einem Shortcode generiert, diesen Shortcode zu jedem Divi-Layout hinzufügen und dann die integrierten Einstellungen von Divi verwenden können, um den Text nach Ihren Wünschen zu gestalten.

Dies ist hilfreich, um die Stile dieser Seiten an Ihre Website anzupassen, ohne auf benutzerdefiniertes CSS zurückgreifen zu müssen.

Abschließende Gedanken

Stripe kann eine äußerst bequeme Lösung für das Sammeln von Online-Zahlungen sein. Und mit dem Simple Payments for WordPress-Plugin können Sie die grundlegende Stripe Checkout-Funktionalität in wenigen Minuten auf Ihrer Divi-Site zum Laufen bringen. Wenn Sie die vorgefertigten Layouts von Divi nutzen, können Sie Ihre Stripe-Zahlungsschaltflächen einfach hinzufügen und so gestalten, dass sie Ihrem Layout entsprechen, indem Sie einfach für Sie erstellten CSS-Code kopieren und einfügen. Das Ergebnis ist ein voll funktionsfähiges und sicheres Zahlungsabwicklungstool, das Zahlungen von Besuchern einziehen kann, ohne dass diese die Seite jemals verlassen müssen.

Fühlen Sie sich frei, weitere Möglichkeiten zum Akzeptieren von Stripe-Zahlungen auf Ihrer WordPress-Website zu erkunden.

Ich hoffe, Sie finden dieses Tutorial hilfreich und ich freue mich, von Ihnen in den Kommentaren zu hören.

Danke schön!