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 payment form that collects a custom field 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 description.
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.
Select the Payment tab. Here you can enter an optional Label that will be used as the item description by Stripe. Enter the payment Amount and select One-Time or Subscription for the payment type. In this example, we will use a One-Time $5.00 amount.
Custom Form Fields
Next, select the 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 Publish 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:
- Email Address
- Price Options – this field will be ignored since we are only using one price option
- Payment Method
- Checkout Button
Let’s go ahead and add one more custom field: a text field to collect the customer’s preferred car color. Go ahead and click Choose a field and select Dropdown.
You’ll see a panel open up for configuring this individual field. Go ahead and set the Label text. Enter the desired color Options as shown. Check the Required box as well.
Now drag the entire field up so it resides under the email address 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:
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.
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.
You can now preview or publish the page and see how your payment form appears on the page.