How to Add a Stripe Buy Button After Confirmation

Introduction

Would you like to display a Stripe buy button after the confirmation message? You can easily connect Stripe payments inside the form builder by default, but if you wanted to embed your own stripe buy button using the embed code that Stripe offers, this tutorial will walk you through exactly how to achieve this.

Creating the form

To begin, create a new form and add your fields to this form. For the purpose of our documentation, we’re creating a volunteer sign up form to gather information on users who wish to volunteer.

If you need help in creating a form, please review our helpful guide.

Disable AJAX for the form

The next step would be to click on the Settings tab inside the form builder and navigate to General. Click the arrow by the Advanced section of this page and make sure that Enable AJAX form submission is not enabled for the form. This is important as if this option is enabled, the page won’t see this action and therefore won’t display your button.

Enable Entry Preview (optional)

For the purpose of this documentation, we want to show the entry preview after the form was submitted. To complete this step (which is completely optional) navigate to Settings then click Confirmations. Here you will toggle the switch for the option Show entry preview after confirmation message.

Adding the snippet

Now it’s time to add the snippet that will add this button after the form is submitted. If you need help with how and where to add snippets to your site, please check out this 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 );

Now when the form submits, they’ll see the confirmation message, the entry preview information and a button that links to Stripe for a payment/donation.

Would you like to also like to change the styling of the confirmation message? Check out our tutorial on How to Remove Confirmation Message Box Styling.

Related

Action Reference: wpforms_frontend_output_success