Launch Overlay from Other Buttons or Links - WP Simple Pay Documentation
  1. Home
  2. Advanced
  3. Launch Overlay from Other Buttons or Links

Launch Overlay from Other Buttons or Links

This article details 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.

Please note: Custom code snippets are provided as-is and there is no guarantee they will continue to work across multiple versions of WP Simple Pay.

Note: To complete this walkthrough, you need to have your payment forms already created.

To launch a Stripe Checkout or overlay payment form via a custom button link you need to change the button link URL. Adjusting the URL of the button link will depend on how you are editing your content. Update the URL to the following:

#form-24

Replace 24 with the ID of the payment form you would like to launch. You can find the ID of your payment form in “Simple Pay Pro > Payment Forms”. The form ID is the number portion of the Simple Pay shortcode as shown below.

Next, embed the WP Simple Pay payment form shortcode in your page as you would normally: [simpay id="24"]. This will cause the payment form to output on the page, but we will hide it in the next steps to ensure only the custom button link is visible.

Add Custom JavaScript

There are many ways to add custom JavaScript code to your WordPress website. We have outlined a few ways in our documentation. Ensure the following JavaScript is output on the same page your custom button link and shortcode are:

Replace the 24 in line 3 with the ID of your payment form. If you are creating multiple buttons on a page, you can add a comma separated list of payment form IDs you want to be able to launch.

Add Custom CSS

There are many ways to add custom CSS code to your WordPress website. We have outlined a few ways in our documentation. Ensure the following CSS is output on the same page your custom button link and shortcode are:

This will hide the default [simpay id="24"] shortcode output so only the custom button link is visible.

Was this article helpful?

Still stuck? How can we help?
Updated on November 11, 2021