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.
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:
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.
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/