1. Home
  2. WP Simple Pay Pro 2.5 & Lite 1.6
  3. Using External Buttons to Open the Stripe Checkout Overlay (Pro 2.5 & Lite 1.6)

Using External Buttons to Open the Stripe Checkout Overlay (Pro 2.5 & Lite 1.6)

Go here for WP Simple Pay Pro 3 instructions.

If you’re simply trying to get pricing tables up and running without code, both WP Simple Pay Pro 3 and 2.5 (legacy) work 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.

Disclaimer: We offer this code as a starting point but don’t provide support for code customizations or 3rd party development.

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

If you’re running WP Simple Pay Pro 2.5 and all you need to do is style the existing Stripe button, you can add the attribute payment_button_style="none" to your shortcode to disable Stripe button styles.

In both WP Simple Pay Pro 2.5 and Lite 1.6, the Stripe button includes the CSS class stripe-button-el. In Pro 2.5 only, the button also includes the CSS class sc-payment-btn.

Next, you’ll need to add a bit of JavaScript. See Adding Custom JavaScript to WP Simple Pay if needed.

Each Stripe form on the page is assigned its own unique “id” attribute, starting with sc_checkout_form_1 for the first form, sc_checkout_form_2 for the second, etc. Your custom button or link will need to simply need to trigger the click event of the desired Stripe form’s existing checkout button. Check your HTML source to find the IDs and CSS classes of your forms and buttons.

You can also assign a custom ID to each checkout form by setting the “id” attribute of the main [stripe] shortcode (i.e. [stripe id="my_custom_form_id" ... ]).

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

jQuery('#my_custom_button').click(function(e) {
  e.preventDefault();
  jQuery('#sc_checkout_form_1').find('.sc-payment-btn').click();
});

Just change the button’s CSS class target for WP Simple Pay Lite 1.6:

jQuery('#my_custom_button').click(function(e) {
  e.preventDefault();
  jQuery('#sc_checkout_form_1').find('.stripe-button-el').click();
});

You can then hide the existing Stripe button with some simple CSS:

#sc_checkout_form_1 { display: none; }

You can also hide all Stripe forms on the page with this:

.sc-checkout-form { display: none; }

To hide just the payment button (and leave the rest of the form options visible):

#sc_checkout_form_1 .sc-payment-btn { display: none; } (specific form)
.sc-checkout-form .sc-payment-btn { display: none; } (all forms)

Updated on November 19, 2018

Was this article helpful?

Related Articles