Stripe-Kaufschaltfläche nach Bestätigung hinzufügen

Möchten Sie nach der Bestätigungsnachricht eine Stripe-Kaufschaltfläche anzeigen? WPForms ermöglicht es Ihnen, Zahlungsformulare in WordPress zu erstellen. Das von Ihnen erstellte Formular verwendet jedoch die Standard-Schaltfläche "Senden" von WPForms. Mit einem benutzerdefinierten PHP-Snippet können Sie Ihr Formular anpassen, um die Schaltfläche "Kaufen" anzuzeigen, die Sie in Ihrem Stripe-Konto erstellt haben.

In diesem Tutorial zeigen wir Ihnen, wie Sie die Stripe-Kaufschaltfläche in WPForms hinzufügen.

Erstellen des Formulars

Erstellen Sie zunächst ein neues Formular oder bearbeiten Sie ein vorhandenes, um auf den Formular-Generator zuzugreifen. Fügen Sie im Formular-Generator Ihre Felder zum Formular hinzu. In unserem Beispiel erstellen wir ein Anmeldeformular für Freiwillige, um Informationen über Benutzer zu sammeln, die sich freiwillig melden möchten.

AJAX für das Formular deaktivieren

Der nächste Schritt ist die Deaktivierung der AJAX-Formularübermittlung. Gehen Sie dazu zu Einstellungen » Allgemein und klicken Sie auf Erweitert, um die erweiterten Einstellungen zu öffnen.

Schalten Sie hier die Option AJAX-Formularübermittlung aktivieren aus. Dieser Schritt ist entscheidend, da die Seite die Aktion nicht erkennt, wenn er aktiviert ist. Infolgedessen wird Ihre Schaltfläche nicht angezeigt.

Eintrags-Vorschau aktivieren (optional)

Für dieses Tutorial möchten wir die Eintrags-Vorschau nach dem Absenden des Formulars anzeigen. Um diesen Schritt abzuschließen (der völlig optional ist), navigieren Sie zu Einstellungen » Bestätigungen. Schalten Sie hier die Option Eintrags-Vorschau nach der Bestätigungsnachricht anzeigen auf Ein.

Stellen Sie sicher, dass Sie Ihre Änderungen speichern, nachdem Sie Ihr Formular aktualisiert haben.

Hinzufügen des Snippets

Jetzt ist es an der Zeit, den Snippet hinzuzufügen, der diese Schaltfläche nach dem Absenden des Formulars hinzufügt. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.

/*
 * Add Stripe buy button embed code after form is submitted
 *
 * @link  https://wpforms.com/developers/how-to-add-a-stripe-buy-button-after-confirmation/
 */
     
   
function wpf_dev_add_stripe_embed_button(  $form_data, $fields, $entry_id ) {
      
    // Below, we restrict output to 3116
    // This ID will need to be updated
    if ( absint( $form_data[ 'id' ] ) !== 3116 ) {
        return;
    }
 
// Below starts the JavaScript needed to create your button
// Remember to replace the button ID and publishable key to match your own Stripe account
// https://stripe.com/docs/payment-links/buy-button
?>
 
<script async
  src="https://js.stripe.com/v3/buy-button.js">
</script>
 
<stripe-buy-button
  buy-button-id="buy_btn_unique_to_your_own_stripe_account"
  publishable-key="pk_test_vbMx6qBxSR49z9231ZNYVP7o00euSPrTfx"
>
</stripe-buy-button>
  
<?php
      
}
add_action( 'wpforms_frontend_output_success', 'wpf_dev_add_stripe_embed_button', 10, 3 );

Es ist wichtig zu beachten, dass Sie im obigen Snippet einige Dinge aktualisieren müssen, damit sie zu Ihrer eigenen Website passen. Bitte aktualisieren Sie die 3116, damit sie zu Ihrer eigenen Formular-ID passt. Bitte sehen Sie sich unser Tutorial an, wenn Sie Hilfe beim Finden Ihrer Formular-ID benötigen.

Sie müssen auch die buy-button-id und den publishable-key im obigen Snippet aktualisieren, um sicherzustellen, dass Sie diese Zahlungen erhalten. Die Schaltflächen-ID wird automatisch generiert, wenn Sie eine benutzerdefinierte Kaufschaltfläche in Ihrem Stripe-Konto erstellen. Um zu erfahren, wie Sie eine Kaufschaltfläche erstellen, lesen Sie bitte die Dokumentation von Stripe.

Wenn das Formular nun abgesendet wird, sehen die Benutzer die Bestätigungsnachricht, die Vorschau der Eintragsdaten und eine Schaltfläche, die zu Stripe für eine Zahlung/Spende führt.

Das ist alles! Sie haben jetzt gelernt, wie Sie eine Stripe-Kaufschaltfläche zu Formularbestätigungen in WPForms hinzufügen.

Möchten Sie als Nächstes auch das Styling der Bestätigungsnachricht ändern? Sehen Sie sich unser Tutorial Styling der Bestätigungsnachricht entfernen an.

Verwandt

Aktionsreferenz: wpforms_frontend_output_success