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, activated your license (if you purchased the Pro version), 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. 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 WP Simple Pay → 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.

Adding 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.

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

Adding 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.

If you haven’t already, go ahead and click the Publish button on the right-hand side of the screen to save the form before moving on.

When you save the Embedded form the first time, 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. 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.

Making A Test Payment

Now you are ready to view your form and make a test payment While in Test mode you can use any number of test card numbers provided by Stripe.

NOTE: Stripe provides international test card numbers that should be used to properly reflect the appropriate ZIP/Postal code configuration for your country or locale. For example, the 4242-4242-4242-4242 test card number is considered a US-based number and will display a 5-digit ZIP Code field.

Once you’ve submitted the payment form, Stripe will process the test payment, and you will see the default payment confirmation page, as show below

More information about configuring the payment confirmation display can be seen here: https://docs.wpsimplepay.com/articles/configuring-payment-confirmation-display/

You've created & tested your first form! Now what?

See our list of “What Happens After A Payment” articles to learn what you can explore next.

Was this article helpful?

Still stuck? How can we help?
Updated on January 21, 2022