Add a Payment Event to a Form

Prev Next

After setting up the CivicPlus Pay integration, you can add Payment Events to forms. Payment events allow users to process transactions as part of the form submission. These will be completed after any scheduling events if they are configured.

Learn how to Build a Form that Accepts Payments.

Important Notes

  • The user can only be directed to one payment gateway. If you need to add multiple gateways to a form, ensure that conditional logic is configured so that only one payment gateway can ever run for a submission.

  • To embed a form with a payment you will need to create a payment receipt page on your website. Learn more about Embedded Forms with Payments.

Instructions

  1. Sign in to your site

  2. Navigate to Forms and open an existing form The Forms tab in the left navigation menu with a form selected on the page.

  3. Click the Workflow tab The Workflow tab on the form builder screen.

  4. Select Payment Events and click Add Payment EventUser interface for pet license renewal highlighting payment events and adding payment event option.

  5. Choose the Gateway from the dropdown CivicPlus Pay event setup with highlighted Gateway selection and payment options.

  6. Select the Payment Element you wish to use to total the payable amount Payment events section showing various payment elements for selection in a form.

    Note:

    The dropdown will display a list of all Number and Calculation elements from the form.

  7. To have the Payment Event only run under specific conditions, toggle on Run Conditionally and configure the conditional logic for the event Conditional payment rule setup with amount due set to 25.

  8. If needed, click Add Payment Event to add another event The Add Payment Event button on the workflow tab.

    Note:

    The user can only be directed to one payment gateway. If you add multiple payment events to a form, ensure that conditional logic is configured so that only one payment gateway will run for a submission.

  9. Click Save

  10. Now when a user submits the form and meets any set conditions, they will see a payment screen where they can process the transaction Payment form displaying credit card and billing address fields for user input.

    Note:

    This screen will differ depending on the payment gateway.

  11. Once their payment info has been processed, they will be able to view their Receipt Payment receipt showing transaction details and a warning about browser navigation.