Integrating with Elementor Buttons - WP Simple Pay Documentation
  1. Home
  2. Integrations
  3. Integrating with Elementor Buttons

Integrating with Elementor Buttons

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

This document will show you how to get Elementor’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 Elementor 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

Double click the appropriate button – labeled “Click Here” 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.

Enter #form-24 in the Link field. In the example below, you would replace 24 with the ID of your form.

To have the actual form “exist” on the page so it can be launched, add a “Shortcode” element below the pricing table column or underneath a single button and enter the WP Simple Pay shortcode. In this example the shortcode is [simpay id="24"]:

The next step is to hide the Simple Pay “Pay with Card” button where the shortcode is being rendered. You can accomplish this by clicking the Shortcode elements “Advanced” gear icon and adding the following CSS:

#simpay-form-wrap { display: none; }

The final step is to add the following code to an HTML element dragged outside of the pricing table, again replacing 24 with your form’s id:

Be sure to apply all of your changes by clicking the UPDATE button at the bottom of the page.

Everything is now in place, and the pricing table button or a single button will launch the overlay form or Stripe Checkout page. The overlay form is shown below:

Repeat the process detailed above for each button in the pricing table if applicable.

Updated on September 27, 2021

Was this article helpful?

Related Articles