We highly recommend staying in Test mode until you’ve completed setting up your payment forms. Read more about using Test mode. You may also want to make sure you have your payment confirmation pages excluded from being cached.
In this example, you’ll be creating a simple one-time payment form that collects a few fields in addition to credit card payment information. To see what types of form configurations are available, please visit our demo site.
Login to your WordPress admin, then go to Simple Pay Pro → Add New.
You should now see Add New Payment Form at the top and the form builder itself. Go ahead and set the payment form title and save it.
At this point, you should already be on the Payment Options tab. While you’re here, go ahead and change the one-time amount to charge. We will leave the amount type as “one-time set amount”. Then click Publish to save your progress. See docs for Payment Options for more details.
Form Display Options
Next, select the Form Display Options tab on the left.
Here you can select the type of form display you’d like to use. For this first example, we’ll simply create a form that exists on the page itself, which is the Embedded setting.
As with any form changes, you can try out changing settings, then Update and Preview to see how different form display options look and behave to your site visitors.
Set the optional Company Name and Item Description fields here as well, which are used for the form heading and subheading respectively.
Custom Form Fields
Next, select the Custom Form Fields tab. This is where you can add as many custom fields as you’d like to go in the payment forms themselves.
By now, if you haven’t already, go ahead and click the Create button on the right to save the form at least once before moving on.
When you save the form the first time, if the Embedded form display type is selected, these four fields will be added to your form automatically:
- Customer Name (labeled “Full name”)
- Checkout Button
Let’s go ahead and add one more custom field: a text field to collect the customer’s T-shirt size. Go ahead and click the Add a field, label or button drop-down and select Text Field.
You’ll see a panel open up for configuring this individual field. Go ahead and set the Placeholder text. This acts as an “inline label”, so no need to set the Form Field Label in this case. Check the Required Field box as well.
Now drag the entire field up so it resides under the customer name field, then click Update to save your progress. See docs for Custom Form Fields for more details.
If you preview the payment form at this point, it should look something like this:
One more tab on the left-hand side will appear if you have the Business license or higher for connecting your form with Stripe’s subscription and recurring payment options. See docs for Subscription Options for more details.
Once you like how your payment form looks, make sure it’s published so you can add it to a page.
After it’s published, copy the shortcode assigned to the payment form, which should look like this:
Adding Your Payment Form to a Page
Now that you’ve created your first payment form, you can add it to any page or post with just a few clicks. First, create a new WordPress page (or post) or edit an existing one.
If using the new “Gutenberg” editor that comes standard since WordPress 5.0, simply add a new block, find the Shortcode block in the Widgets category, then paste in the shortcode you copied above after publishing the payment form.
If you’re using the Classic Editor plugin (or WordPress 4.9), you can also paste in the shortcode or you can click Insert Payment Form above the page editor.
This will bring up an Insert Payment Form overlay. Select your form from the dropdown, then click Insert Payment Form.
You can now preview or publish the page and see how your payment form appears on the page.