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 Pay 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 of CivicOptimize, we recommend that you also reference the Calculation element article, especially if you are utilizing 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 and whether or not their pet is spayed/neutered. 

Instructions

1. Edit an existing form or create a new form
   
2. Navigate to the Builder tab and click Add New Element
   
   
3. Select the Element Type that will collect information to determine the amount a user is charged
   
   
   Note: Learn more about the available Element Types.
4. Configure the element as needed
   
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
   
   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
   
7. Configure the Calculation element as needed
   
   
   Note: In this example, we are adding the selected values of the Renewal Option and Spayed/Neutered elements.
8. Click Save
   
9. The form will now calculate a total at the bottom, based on previous selections by the user
   
   
   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).

Return to Article Navigation

Add Taxes / Fees to a Payment Form

Instructions

1. Edit an existing form or create a new form
   
2. Navigate to the Builder tab and click Add New Element
   
3. Select the Calculation element
   
4. In the Calculation field, times the tax/fee rate by the element that calculated the amount due
   
5. Repeat step 3 to add another Calculation element that combines the initial amount due plus the taxes/fees calculation element you just created
   
6. Click Save
   
   
7. The form will now add taxes/fees to the total amount due
   

Return to Article Navigation

Add Multiple Payment Methods

If your integrated gateway allows both ACH (bank account) and Credit/Debit card transactions, you can set up the form to let a user choose how they would like to process their payment. 

Instructions

1. Edit an existing form or create a new form
   
2. Navigate to the Builder tab and click Add New Element
   
   
3. Select the Radio Buttons element
   
4. Add a Label and configure any other element details
   
5. Enter the available payment method options
   
6. Click Save
   
   
7. Navigate to the Workflow tab and select Payment Events
   
   
8. Add a Payment Event, toggle on Run Conditionally, and select the payment method option that should trigger the selected gateway
   
9. Click Add Payment to add an additional event
   
10. Select the applicable Gateway, toggle on Run Conditionally, and choose the payment method option that will trigger this event
    
11. Click Save
    
    
12. The form will now have an option where a user can select their preferred payment method
    
13. Once they click Submit, the related payment form will display
    
    
    Note: Payment forms will differ depending on the gateway selected.

Related Articles

• CivicPlus Pay Integration
• Add a Payment Event to a Form
• Calculation Element
• Conditional Logic

Return to Article Navigation