Divi makes it possible to achieve almost any layout, insert almost any content element, and style things in almost any way. But what about payment forms? What about payment forms within modal popups?
By default, Divi doesn’t have options for modals or payment forms. That’s why we’ll be using our Payments for Divi plugin, and the Popups for Divi plugin. In just three simple steps, we’ll have an awesome looking modal popup that contains a custom payment form.
Table of Contents
Step 1: Create a Button to Launch the Payment Form Modal
Once you’ve installed both the Payments for Divi and Popups for Divi plugins, head over to your page, and enable the Divi Visual Builder. Go ahead and add a button wherever you want. I’ve added a button with the text of “Order Now.”
The main requirement for the button is the “Button Link URL” setting. This setting normally takes a URL for the button link. However, to launch our payment form modal popup, we’ll use a hash link. A hash link looks like #id_of_target_element, where id_of_target_element will be the ID of our modal’s section. This tells your browser to open the modal when the button is clicked.
On my test site, I’ve used #order as the Button Link URL, which means my modal section will need to have an ID or order.
Step 2: Create a Modal Popup Section for the Payment Form
Next, you create the modal popup section, which is done with the Popups for Divi plugin. To create the modal, just add a new section to your page. I added mine at the bottom, but it doesn’t matter where you add it because the section will be hidden until the modal is toggled open.
To add my payment form popup, I styled my new section with a full row, and limited the row to 400px in width. I also made sure it was centered in the page.
To enable the section as a popup, the Popups for Divi plugin adds a “Popup” tab to the section’s settings. Click that tab. Under the General dropdown, toggle the setting to enable the section as a popup. Then, give it a “Popup ID” of whatever you used in your Button Link URL above, excluding the # symbol. Since I added #order as my button link, I’ll give the popup an ID of order.
After the basic requirements are set, you can style and configure your popup however you wish.
Step 3: Add the Payment Form
Finally, we’ll add the payment form to the popup section. Simply add a new module to your section’s row, and select the Payment Form module. You can read more about how to create payment forms for Divi here. I also added a text module, with a title for the modal. After saving, this is what my payment form modal looks like.
