WordPress-Angebotsformulare mit Stripe: Einrichtungsleitfaden

Der KI-Assistent ist optional. Dieselben Schritte lassen sich manuell erstellen und die Preise vor der Stripe-Verbindung prüfen.

Starten Sie im Formularbildschirm des Plugins und oeffnen Sie den KI-Assistenten. Beschreiben Sie das Geschaeftsmodell, die Pakete, die benoetigten Felder und die Zahlungsabsicht. In diesem Beispiel fragt der Prompt nach einem Website-Projekt-Angebotsformular, das Online-Website-Pakete verkauft.

Ziel ist nicht, das KI-Ergebnis blind zu veroeffentlichen. Nutzen Sie es, um schneller einen strukturierten ersten Entwurf zu erhalten: Paketauswahl, optionale Services, Kontaktfelder, eine finale Zusammenfassung und einen Zahlungsschritt.

Pruefen Sie nach der Generierung den Builder, bevor Sie Zahlungseinstellungen anfassen. Der erste Durchlauf sollte bereits die Hauptschritte der Kaeuferreise enthalten: Paketwahl, Projektdetails, Optionen, Kontaktdaten und Checkout.

Bezeichnungen anpassen, unnötige Fragen entfernen und ein klares Angebot beschreiben. Prüfen, was der Besucher reserviert oder bezahlt.

Kehren Sie zur Formularliste zurueck und bestaetigen Sie, dass das neue Formular unter einem erkennbaren Namen gespeichert ist. Das ist wichtig, wenn die Website mehrere Angebotsformulare, Demos oder kundenspezifische Rechner hat.

Im Artikelbeispiel heisst das Formular Website-Projekt-Angebot & Anzahlung, damit der Zahlungszweck im Admin klar bleibt.

Oeffnen Sie den Builder erneut und bestaetigen Sie, dass die Kundenreise logisch ist. Ein gutes Angebots-zu-Zahlung-Formular sollte keine Zahlung verlangen, bevor der Besucher Angebot und Summe verstanden hat.

In diesem Beispiel kommen Paket- und Optionswahlen zuerst, dann erscheint der Zahlungsmethoden-Schritt nach der Berechnung der Summe, und die finale Zusammenfassung erscheint vor dem Oeffnen des Stripe-Modals.

Die untersuchten Einstellungen enthalten im Bereich Payment Stripe-Steuerelemente wie Use Stripe payment, Stripe publishable key, Stripe secret key, Currency und Amount to pay. Das zusammengehörige öffentliche und geheime TEST-Schlüsselpaar der autorisierten Stripe-Testumgebung eintragen. Der geheime Schlüssel bleibt in der serverseitigen Plugin-Einstellung, niemals in Screenshots oder öffentlichen Feldern.

Der untersuchte Amount to pay-Selektor bietet Full amount, Percentage of the total price und Fixed amount. Für die dargestellte Anzahlung Percentage of the total price wählen und 30 eingeben. Den daraus entstandenen Betrag prüfen, statt nur den Angebotsgesamtbetrag anzusehen.

Erstellen oder bearbeiten Sie die WordPress-Seite, die das Angebotsformular hosten wird. Fuer einen fokussierten Angebots-Funnel betten Sie das Formular im Vollbildmodus ein, damit die Kaeufererfahrung nicht visuell mit dem umgebenden Theme konkurriert.

Verwenden Sie den Formular-Shortcode und fuegen Sie das Vollbild-Attribut hinzu.

Oeffnen Sie die oeffentliche Seite und starten Sie als normaler Besucher. Der erste Bildschirm sollte das Angebot offensichtlich machen und nicht wie ein generisches Kontaktformular wirken.

Fuer ein Website-Angebotsformular sollten Paketnamen und Preise vor optionalen Fragen sichtbar sein. Das gibt dem Besucher genug Kontext, um fortzufahren.

Waehlen Sie ein Paket und bestaetigen Sie, dass sich die Live-Summe sofort aktualisiert. Das ist der Kernvorteil eines Angebotsformulars gegenueber einem normalen Kontaktformular: Der Kaeufer sieht die Preisfolge jeder Wahl.

Wenn die Summe nicht den Erwartungen entspricht, korrigieren Sie die Preise der Formularelemente, bevor Sie Stripe testen. Zahlungseinstellungen sollten die letzte Ebene sein, kein Workaround fuer falsche Angebotslogik.

Gehen Sie weiter zum Zahlungsmethoden-Schritt und bestaetigen Sie, dass die Option fuer sichere Kartenzahlung nach der Angebotsberechnung erscheint. In diesem Beispiel zeigt das Formular weiterhin die volle Angebotssumme von 2.400 $ im Schritt.

Die 30-%-Regel wird beim Oeffnen des Stripe-Modals angewendet, wo die faellige Anzahlung 720 $ betraegt. Diese Trennung ist wichtig: Die Formularsumme bleibt die Angebotssumme, waehrend Stripe den konfigurierten Zahlbetrag erhaelt.

Pruefen Sie vor dem Oeffnen des Stripe-Modals die finale Zusammenfassung. Eine gute Zusammenfassung hilft dem Kunden zu verstehen, was er gewaehlt hat, und gibt dem Unternehmen einen saubereren Lead- oder Bestelldatensatz.

Stellen Sie sicher, dass erforderliche Kontaktfelder ausgefuellt sind und die Zusammenfassungszeilen dieselben Auswahlen und Preise wie zuvor im Formular widerspiegeln.

Die vorhandene Abbildung zeigt eine Anzahlung von 720 für ein Angebot über 2.400. Betrag und Währung vor dem Absenden prüfen. Im untersuchten Code verarbeitet Stripe Elements das Kartenfeld; keine gewöhnlichen Formularfelder für Kartendaten erstellen.

Auf der separaten Testseite nur offizielle Stripe-Testdaten verwenden, nachdem die Testumgebung bestätigt wurde. Das Öffnen des Dialogs prüft die Oberfläche, nicht eine erfolgreiche Zahlung. Für diesen Artikel wurde keine Zahlung abgesendet.

Im untersuchten Kartenablauf ruft der Server den PaymentIntent ab und verlangt den Status succeeded, bevor der zugehörige Plugin-Protokolleintrag als bezahlt mit Zahlungsart Stripe markiert wird. Eine abgelehnte Prüfung liefert einen Zahlungsfehler. Das ist eine Code-Beobachtung für 10.6.4, kein Beleg für eine ausgeführte Zahlung oder Webhook-Konfiguration.

Beim Test die Stripe-Testzahlung und den passenden Plugin-Auftrag prüfen. Betrag, Währung und Referenz vergleichen, dann Bestätigung und vorgesehene Benachrichtigungen kontrollieren. Weiterleitung, E-Mail oder Bildschirmanzeige allein reichen nicht aus.

Lehnt Stripe die Anfrage ab, zuerst dasselbe Konto und dieselbe Testumgebung für beide Schlüssel, die Stripe-Aktivierung für dieses Formular sowie gültige Währung und Betrag prüfen. Niemals einen geheimen Schlüssel in einen Support-Screenshot einfügen.

Bei falschem Betrag Positionen, Zusatzoptionen und Amount to pay vor einem neuen Versuch prüfen. Zeigt Stripe succeeded, während das Plugin unbezahlt bleibt, PaymentIntent-Referenz und Plugin-Eintrag vergleichen und den Prüfungsfehler untersuchen. Nicht aus der Dankeseite auf eine bestätigte Zahlung schließen.