Creating a one-time payment form

Introduction

In this tutorial, we’ll show you how to create and customize a one-time payment form.

We’d recommend reading the Introducing form types article, if you haven’t read it yet.

Creating a one-time payment form in 7 easy steps

We recommend going through the following steps:

1. Gather your requirements
2. Switch to test mode
3. Create form
4. Insert form shortcode
5. Preview form
6. Fine-tune and customize form
7. Switch to live mode

1. Gather your requirements

It’s a good practice to have a bird’s eye view before creating the form. Thinking about your business case and requirements will help you go live much faster.

Let’s ask few questions that might help you create the right form:

• Is it an inline or checkout form?
• What currency is used for payment?
• Does the form charge immediately or use authorize & capture?
• Does the customer pay a fixed amount, select a product, or enter the payment amount?
• Does the form collect billing address or shipping address?
• Does the form display a “Terms of service” checkbox?
• Are custom fields needed to gather extra information from the customer?
• Does the form send an email receipt?
• Does the form redirect to a page after payment?
• Do you want to protect the form from bots and spammers?

2. Switch to test mode

It’s recommended to create and test your forms in test mode where you can use test cards to simulate every possible payment outcome. No need to refund your payment after testing either.

You can switch to test mode on the “Full Stripe / Settings / Stripe” page in WP admin:

2. Create form

You can create a one-time payment form on the “Full Stripe / One-time Payments / Payment Forms” page in WP admin.

Depending on the form layout you choose (inline or checkout), press the “Create Inline Form” or “Create Checkout Form” button:

2a) Create form - Payment tab

The “Payment” tab is for business related options. You can configure the payment options the form offers to customers.

Form name

Set the unique identifier of the form. The name will be used by the form shortcode to render the form, and also for referring to the form in lists.

Use alphanumerical characters for your form names. Don’t use spaces or special characters.

Inline shortcode example:
[fullstripe_form name=”yourFormName” type=”inline_payment”]

Checkout shortcode example:
[fullstripe_form name=”yourFormName” type=”popup_payment”]

Payment type

You can specify how much the customer will pay:

• Set amount
  The payment amount is fixed, no options to choose from.
• Select amount from list
  The customer can choose a product from list of options, or (optionally) enter the payment amount.
• Custom amount
  The customer can enter the payment amount manually.

You can specify the payment amount of these payment options in the smallest unit of the currency, so 1000 means 10,00 USD and 800 means 800 JPY (Japanese Yen).

Set amount

Select this option if you’d like to charge a preset, fixed amount:

Enter the amount in the “Payment amount” field.

Select amount from list

Select this option if you’d like the customer to choose from several products (payment amounts):

Add the products (Amount + description) to the “Payment amount options” field:

You might want to enable entering a custom amount by ticking the “Allow custom amount to be entered?” option. This is very useful for donation forms.

Custom amount

Select this option if the only required payment option is entering the payment amount manually. This is used on forms for paying invoices:

Charge type

The plugin charge the payment immediately, or it can just authorize it so you can capture it later:

You can read more about authorize & capture on the Stripe website.

If a payment is authorized then you can capture it manually on the “Full Stripe / One-time payments / Payments” page in WP admin.

Payment description

You can configure the description that will appear on the Stripe dashboard for the payment.

The payment description may contain placeholder tokens that are replaced with actual values after payment.

2b) Create form - Appearance tab

The “Appearance” tab is for configuring how your form will look like.

There are some options which are the same for both inline and checkout forms, but most of the options are different.

Appearance tab - Common options

CSS class for custom styles

You can use this CSS selector to add custom styles to the form.
Please refer to the Customizing forms with CSS knowledge base article for more information.

Amount selector style

When the form lets the customer select a product to purchase you can configure how the products list looks like.

Possible values are:

• Product selector dropdown
  This is the default option. It conserves space when the form offers a lot of choices.
• List of products
  Shows a list of radio buttons. Ideal when there are only a few options to choose from.
• Donation button group
  Offers a group of amount buttons organized for donation amount selection.

Product selector dropdown

List of products

Donation button group

Include amount on button?

The payment amount is displayed on the button when this option is turned on.

The amount is appended to the button label by default. You can use the {{amount}} placeholder to insert the payment amount wherever you see fit.

Include billing address field?

The form collects billing address when this option is turned on.

Appearance tab - Inline form options

Payment button text

This is the label of the payment button.

The label may contain the {{amount}} placeholder if the “Include amount on button?” option is turned on:

Appearance tab - Checkout form options

Amount style selector