Creating Your First Payment Form - WP Simple Pay Documentation
  1. Home
  2. Getting Started
  3. Creating Your First Payment Form

Creating Your First Payment Form

Now that you’ve installed WP Simple Pay Pro, activated your license, and connected your Stripe account, it’s time to create your first payment form.

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.

Note: More General settings information:

Payment Options

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.

Note: Subscription payment options are only available with the Plus license or higher.

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 field to collect the customer’s preferred car color. Go ahead and click Choose a field and select Dropdown, then click Add Field to add it to the form.

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: [simpay id="123"]

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.

Updated on July 26, 2021

Was this article helpful?

Related Articles