1. Home
  2. Integrations
  3. How to Integrate with SeedProd Buttons & Pricing Tables

How to Integrate with SeedProd Buttons & Pricing Tables

To complete this walkthrough, you need to have your payment forms already created. We also assume you have your SeedProd button or pricing table ready to work with.

This document will show you how to get SeedProd’s pricing table or single buttons to work together with WP Simple Pay’s Onsite Overlay forms and Offsite Stripe Checkout pages.

Be aware that when using Offsite Stripe Checkout pages with SeedProd pricing tables, buttons, links, etc., you will not be able to use any custom fields such as coupons, etc.

Prepare Your WP Simple Pay Form Shortcut For Use

To complete this setup, you need to copy the form’s shortcode from the WP Simple Pay > Payment Forms admin.

Instructions for Onsite Overlay forms and/or Offsite Stripe Checkout pages

In the SeedProd > Landing Pages menu, select the page with the pricing table/button you want to work with, which will load the drag and drop editor

You’ll want to add a shortcode block underneath each pricing table button. Here we’ll be working with the “Buy Silver Package” button. Locate the Shortcode block in the left-hand listing, and drag it below the appropriate button and drop it in place.

Click the “Enter Your Shortcode” text in the orange highlighted area that has been created. This will open up the Shortcode block editor.

The Shortcode text area will be blank at first. You will want to paste in the shortcode that you copied at the beginning of this documentation. Your shortcode will most likely contain a different ID number than the one shown here.

You will then want to copy and paste the following code into a new line below the shortcode:

( function( $ ) {
var ids = [ '24' ];

// Do not modify.
ids.forEach( function( id ) { $( 'a[href~="#form-' + id + '"]' ).click( function( e ) { e.preventDefault(); $( '#simpay-' + id + '-payment-button' ).click(); $( '#simpay-modal-control-' + id ).click(); }); });
})( jQuery );
.simpay-form-wrap { display: none; } 

When you are finished, the text area of the shortcode block will look like the example below. Ensure that the ID number in your shortcode has been entered in the var ids area as shown.

Only one more step and you’re done!

Click the pricing table button you want to work with; in this example, the “Buy Silver Package” button – which will open up the settings panel for that button.

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

Once complete, click the big green Save button in the upper right-hand corner.

When you have repeated the process above for each pricing table button, you can click the down arrow to the right of Save and choose Publish. Your Pricing table is now live.

Your buttons are now ready to be tested!

Was this article helpful?

Still stuck? How can we help?
Updated on July 27, 2022