Note: To complete this walkthrough, you need to have your payment forms already created.
This document will show you how to get Divi’s pricing table or single buttons to work together with WP Simple Pay’s Overlay forms and Stripe Checkout pages.
Be aware that when using Stripe Checkout pages with Divi pricing tables, buttons, links, etc., you will not be able to use any custom fields such as coupons, etc.
Instructions for Overlay forms and/or Stripe Checkout pages
The first step is to change the button link URL, You can do this by double-clicking the appropriate button – labeled “Choose Plan” in the image above – which will open up the settings panel for that button.
To complete this setup, you need your form’s ID number and the form’s shortcode. You can find both in the WP Simple Pay Pro > Payment Forms admin. The form ID is the number portion of the Simple Pay shortcode as shown below.
#form-24 in the Button Link URL field. In the example below, you would replace 24 with the ID of your form.
Next, you will need to add a Divi “Code” module to the page containing the pricing table or button. You want to paste the WP Simple Pay shortcode for each form used in the pricing table into the “Code” module.
The final step is to add the following code to the <body> section of the Divi > Theme Options > Integration tab. Remember to use the appropriate form IDs rather than the 24 shown in this example.
If this is the first time you are adding code to this section of Divi, you may need to switch the Enable body code toggle on. For the <body> code to work, the toggle should look like the image below:
Code for Overlay forms & Stripe Checkout pages
Everything is now in place, and the buttons will now launch overlay forms, shown below, or launch Stripe Checkout depending on your form type.
Repeat the process detailed above for each button in the pricing table if applicable.
If you’ve added everything properly and the forms still do not launch, you may need to change a setting in the Divi > Theme Options > General > Performance tab. You’ll want to ensure the setting pictured below is disabled, as shown: