How to Add a Stripe Buy Button After Confirmation

Updated:

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.

create the form and add your fields

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.

from the General tab under Settings, make sure the Enable AJAX form submission option is disabled for this form

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.

you can toggle on the option to show the entry preview after confirmation message from the Confirmations tab. Please note this step is completely optional.

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 );

It’s important to remember that in the above snippet, there are a few things you’ll need to update to match your own site. Please update the 3116 to match your own form ID. If you need help in finding your form ID, please checkout this helpful documentation. You’ll also need to update the buy-button-id and the pulishable-key in the snippet above to make sure that you receive these payments. Stripe has it’s own documentation on how and where to find these unique values from your own Stripe dashboard.

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.

when the form submits, you can see the Stripe buy button

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.

Action Reference: wpforms_frontend_output_success

Tagged:
Still stuck? How can we help?
Last Updated on Jun 08, 2023