Home » Help Center » How to Build a Payment Form on Your Website

How to Build a Payment Form on Your Website

To build a simple payment form on your website to collect funds without the need for extensive information or multiple forms, follow the steps below!

how to build a payment form on your website

Ready in 15 minutes!

Ingredients:

Anonymous system

Checkout Widget

1 triggered invoice email

1 report template

Recipe:

  1. Create a new project.
  2. Select an individual system with payments.
  3. Build out products (if needed) or ability to select the amount the user wishes to pay.
  4. Add fields for the information you want to collect (email, first name, last name, free text field, etc) + the product widget.
  5. Add a 2nd form with the checkout widget to facilitate the payment process.
  6. Trigger an email to go out with a confirmation of the payment plus payment token information.

Create a new project

website payment form

In this example, we chose a donation template, since this is already an anonymous system with payments enabled.

You can also head to “courses” and select an individual system with payments to find a basic anonymous system template.

Build Your Forms and Products:

create your payment options

In this example, we’re using 2 forms and 2 products.

On the first form you have:

  1. Name
  2. Email
  3. Phone number
  4. Product Widget

On the second form you have:

  1. The cart widget to display the options selected on the first form
  2. The checkout widget which allows for payment of the selected products
  3. **Don’t forget to trigger this form so it appears after the first form is completed.**

For the products, we’ve added 2 options, but the sky is the limit for what you offer.

  1. We created a $1 product and turned off “only order once” to allow the user to select the $ amount they wish to be charged.
  2. We created a $100 product that will add as is to the cart

Feel free to create as little or as many products as possible. If you, for example, want to create a merchandise project to manage t-shirt and water bottle sales for your camp separate from your registration, simply create products for everything you are selling with a price, and use this same quick structure of 2 forms and you’re all set!

 

front end payment flow

Once the user makes the selection on the first form, they will go immediately to the next form to pay. Once complete, you will see that user, created with the email address they entered on the first form, so you can filter for them, communicate with them, and include their payment information in your reporting.

Create a Triggered Invoice Email

Automate communication when payments are made. A payment confirmation automatically sends from the system when a user makes a payment.

You can trigger a 2nd email to go out if you’d like to include more information to the user. To do this, use our tokens to personalize the text and a trigger to have the email send automatically when a payment is made.

email trigger after payment

You can create more email templates to use when you want to send specific messages. If you have more than 2 products, and want to target emails to everyone who ordered Product A, you can do this by simply filtering for users who ordered that product, and sending them all an email! The tokens will make the communication personal and relevant for the receiver!