1. Home
  2. Advanced
  3. Trigger Stripe Checkout Overlay from Custom Buttons or Links

Trigger Stripe Checkout Overlay from Custom Buttons or Links

This article recommends adding custom code to your WordPress site and is intended for developers. Although we don’t provide custom development services ourselves, if you need help we highly recommend Codeable for one-time projects and WP Buffs for ongoing development, support, and maintenance. Both have people familiar with both Stripe and WP Simple Pay.

If you’re simply trying to get pricing tables up and running without code, remember WP Simple Pay Pro works with Easy Pricing Tables Premium.

If you need to trigger the Stripe Checkout overlay from a custom button or link outside the payment form, you’ll need to add a little custom CSS and JavaScript code.

CSS Instructions

First, if you want to hide the payment form button you’ll need add some CSS. See Adding Custom CSS to WP Simple Pay if needed.

If all you need to do is style the existing payment button, you can change your setting for the Payment Button Style in the SP Simple Pay Pro settings under the General tab.

In these examples we use 510, but you will want to replace this number with your own specific form ID.

You can hide the button for a form by using the form ID like this:
#simpay-form-510 #simpay-510-payment-button { display: none; }

You can also hide all Stripe forms on the page with this:
.simpay-checkout-form { display: none; }

To hide just the payment button (and leave the rest of the form options visible):
#simpay-form-510 .simpay-payment-btn { display: none; } /* (specific form) */
.simpay-checkout-form .simpay-payment-btn { display: none; } /* (all forms) */

JavaScript Instructions

If you still need to trigger the checkout overlay from a separate button or link, you’ll need to add custom JavaScript. See Adding Custom JavaScript to WP Simple Pay if needed.

Each Stripe form on the page is assigned it’s own unique “id” attribute in the format of simpay-form-ID, where ID should be replaced by the form ID found in the admin. Your custom button or link will simply need to trigger the click event of the desired Stripe form’s existing checkout button. You can also check the HTML source to find the IDs and CSS classes of your forms and buttons.

For example, to trigger a Simple Pay form on a page with a button that has an “id” attribute of “my_custom_button”, use this script for Simple Pay Pro:

jQuery( '#my_custom_button' ).click( function( e ) {
  e.preventDefault();

  // Replace '510' with the correct ID of your form
  jQuery( '#simpay-form-510' ).find( '.simpay-payment-btn' ).click();
} );
Updated on December 13, 2018

Was this article helpful?

Related Articles