---
title: "Build a Form that Accepts Payments"
slug: "build-a-form-that-accepts-payments"
description: "Learn how to set up a payment form with calculation elements, taxes, and multiple payment methods for user-friendly transactions."
updated: 2026-08-28T15:00:17Z
published: 2026-08-28T15:00:17Z
canonical: "www.civicplus.help/build-a-form-that-accepts-payments"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://www.civicplus.help/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Form that Accepts Payments

This article walks through some examples of how to set up a form to accept payments when using the [CivicPlus Payments integration](/process-automation/docs/payments-integration).

There are several ways you can set up a payment form, but you will most likely use the Calculation element. If you are not familiar with the ISNULL and ROUND functionalities, we recommend that you also reference the [Calculation element](/process-automation/docs/calculation-element) article. This is especially useful if you are utilizing [Conditional Logic](/process-automation/docs/conditional-logic).

## Calculate the Total Due Based on User Selections

You can set up a form to total the amount due based on the options a user selects when filling it out. In this example, we are setting up a pet license form that will charge users a specific amount for the type of renewal option they choose. It will also charge them based on whether or not their pet is spayed/neutered.

[Embedded content](https://www.iorad.com/player/2107449/CivicOptimize--How-to-Calculate-the-Total-Due-Based-on-User-Selections-Practice-Tutorial)

1. Edit an existing form or [create a new form](/process-automation/docs/create-and-manage-forms) ![The Forms tab in the left navigation menu with a form selected on the page.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Select Form - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
2. Navigate to the **Builder** tab and click **Add New Element**![The Add New Element button on the form builder page.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Add%20New%20Element%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
3. Select the **Element Type** that will collect information to determine the amount a user is charged ![User input options for form elements including text, number, and date selections.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Element%20Types%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)

> [!WARNING]
> **Note**:
> 
> Learn more about the available [Element Types](/process-automation/docs/form-element-types).
4. Configure the element as needed ![Form element asking if a pet is spayed or neutered, with required options.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Radio%20Button%20Element%20Details%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
5. In this example, **Values** were added to the radio button options to correspond to the dollar amount that will be charged to the user ![Options for conditional display with values for 'Yes' and 'No' selections shown.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Radio%20Button%20Values%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)

> [!WARNING]
> **Note**:
> 
> Values must be unique. If you want multiple options to have the same value, you can add decimal points so that they differ from each other. For example, if three options should be valued at $20, you can set one option as 20, one option as 20.0, and one as 20.00.
6. To total up the amount due, add a **Calculation** element to the form ![Menu displaying various element types including a highlighted calculation option.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Select%20Calculation%20Element%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
7. [Configure the Calculation element](/process-automation/docs/calculation-element) as needed ![Calculation element details for pet license total with renewal options and spayed/neutered status.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Calculation%20Element%20Details%20for%20Payment%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)

> [!WARNING]
> **Note**:
> 
> In this example, we are adding the selected values of the Renewal Option and Spayed/Neutered elements.
8. Click **Save** ![](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Save Form Builder - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
9. The form will now calculate a total at the bottom, based on previous selections by the user ![Form for pet renewal with options for type, spaying status, and payment details.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Form%20with%20Calculated%20Total%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)

> [!WARNING]
> **Note**:
> 
> In this example, the Total Due is $35 since the user selected the $15 renewal option and answered "No" to the spayed/neutered question (which has a set value of $20).

---

## Add Taxes/Fees to a Payment Form

[Embedded content](https://www.iorad.com/player/2107474/CivicOptimize--How-to-Add-Taxes---Fees-to-a-Payment-Form-Practice-Tutorial)

1. Edit an existing form or [create a new form](/process-automation/docs/create-and-manage-forms) ![The Forms tab in the left navigation menu with a form selected on the page.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Select Form - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
2. Navigate to the **Builder** tab and click **Add New Element** ![The Add New Element button on the form builder page.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Add%20New%20Element%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
3. Select the **Calculation** element ![Menu displaying various element types including a highlighted calculation option.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Select%20Calculation%20Element%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
4. In the **Calculation** field, times the tax/fee rate by the element that calculated the amount due ![Calculation element details for pet license fees in a software interface.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Calculation%20Tax%20Rate%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
5. Repeat step 3 to add another **Calculation** **element** that combines the initial amount due plus the taxes/fees calculation element you just created ![Calculation element details showing total amount due with pet license and taxes fees.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Calculation%20Tax%20Rate%20Plus%20Total%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
6. Click **Save**![](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Save Form Builder - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
7. The form will now add taxes/fees to the total amount due ![Summary of pet license fees including total amount due and breakdown of costs.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Form%20Preview%20with%20Taxes%20and%20Total%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)

---

## Add Multiple Payment Methods

If your [payment processor](/civicplus-help-center/docs/civicplus-payments-and-external-processors) allows both ACH and credit/debit card transactions, you can set up the form to let a user choose how they would like to process their payment.

> [!WARNING]
> **Note**:
> 
> The user can only be directed to one Payment Gateway. The following instructions ensure that conditional logic is configured so that only one payment gateway will run for a submission.

[Embedded content](https://www.iorad.com/player/2107497/CivicOptimize--How-to-Add-Multiple-Payment-Methods-to-a-Form-Practice-Tutorial)

1. Edit an existing form or [create a new form](/process-automation/docs/create-and-manage-forms) ![The Forms tab in the left navigation menu with a form selected on the page.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Select Form - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
2. Navigate to the **Builder** tab and click **Add New Element**![The Add New Element button on the form builder page.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Add New Element - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
3. Select the **Radio Buttons** element ![Selection options for user inputs including radio buttons, checkboxes, and other elements.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Select%20Radio%20Button%20Element%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
4. Add a **Label** and configure any other element details ![Settings for radio buttons including payment method and required options.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Radio%20Button%20Element%20Label%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
5. Enter the available payment method options ![Options for payment methods including Card, Checking, and Pay Later selections.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Radio%20Button%20Payment%20Options%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
6. Click **Save**![](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Save Form Builder - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
7. Navigate to the **Workflow** tab![The Workflow tab on the form builder screen.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Workflow Tab - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
8. [Add a Payment Event](/process-automation/docs/add-a-payment-event-to-a-form), toggle on **Run Conditionally**, and select the payment method option that should trigger the selected gateway ![Configuration settings for payment events with conditional rules based on payment method.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Payment%20Event,%20Run%20Card%20Conditionally.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
9. Click **Add Payment** to add an additional event ![The Add Payment Event button on the workflow tab.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Add%20Payment%20Event%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
10. Select the applicable **Gateway**, toggle on **Run Conditionally**, and choose the payment method option that will trigger this event ![CivicPlus Pay event setup with payment methods and conditional rules displayed.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Payment%20Event,%20Run%20ACH%20Conditionally.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
11. Click **Save**![](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Save Workflow - PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
12. The form will now have an option where a user can select their preferred payment method ![Payment method selection with total amount due displayed below the options.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/Payment%20Method%20on%20Form%20Front-End%20-%20PADS.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)
13. Once they click **Submit**, the related payment form will display ![Forte Card Checkout.](https://cdn.us.document360.io/17dc564a-8310-4f61-b929-1bd73b36e158/Images/Documentation/26733350897943.png?sv=2026-02-06&spr=https&st=2026-11-12T17%3A21%3A31Z&se=2026-11-12T18%3A21%3A31Z&sr=c&sp=r&sig=9F4vuWiZO6omNKzVEzFuzFxZSjYw6BvAJdz6gYctt%2FY%3D)

> [!WARNING]
> **Note**:
> 
> Payment forms will differ depending on the gateway selected.

Automated Clearing House. A network that allows banks to transfer money electronically between each other.

An e-commerce service that processes credit card payments for online and traditional brick-and-mortar stores. Payment gateways facilitate these transactions by transferring key information between payment portals such as web-enabled mobile devices/websites and the front-end processor/bank. Payment gateways fulfill a vital role in the e-commerce transaction process, authorizing the payment between merchant and customer

## Related

- [Payments Integration](/payments-integration.md)
- [Add a Payment Event to a Form](/add-a-payment-event-to-a-form.md)
- [Calculation Element](/calculation-element.md)
- [Conditional Logic](/conditional-logic.md)