Add Payment Summary Field in Payment Forms

The Payment Summary field allows users to view a summary of their total payments based on the selected items or products and you can use it in any form.

This article will guide you through adding the Payment Summary field in your Fluent Forms for your WordPress Site.

Add Payment Summary Field

Go to Forms from the Fluent Forms navbar, open your payment form, and click the Edit icon to open the form editor.

For example, I choose an existing form to show the whole process.

Once you open the Editor page, go to the Input Fields in the right sidebar, open the Payment Fields module, and add the Payment Summary field.

NOTE

Enable Payment Fields on your form first. See How to Create a Payment Form With Fluent Form.

You can see that a Payment Summary field is added to the form. You can edit this field by hovering over it and clicking the Pencil Icon.

It will take you to the Input Customization tab on the right side and offer you the following options for customizing the Payment Summary field.

1. Payment Summary

2. Advanced Options

1. Payment Summary

Here, you will get the following setting option for customizing the field.

• Empty Payment Selected Text: Here, you can set a text you want to show when no payment item has been selected yet.

2. Advanced Options

Each option in the Advanced Options tab is explained below –

A. Conditional Logic: This option allows the Payment Summary field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this Documentation.

B. Container Class: Use this option to add your custom CSS classes to the field’s wrapper.

Once you complete all the customization, don’t forget to add the Payment Method field to collect the payments. Plus to collect the recurring payments, you can add the Subscription field.

NOTE

Payment fields work only after you configure your gateway. See Configure Payment Settings with Fluent Forms.

Embed the Form into Frontend

Once you complete the customization, click the Save Form button to save all changes you made. Also, to see the form preview, click the Preview & Design button in the middle.

To integrate and display the form on a specific Page/Post, copy the Shortcode from the top right side and paste it into your desired Page/Post.

Preview of Payment Summary field

Here, is the preview of the added Payment Summary field under the Payment Form.

This way you can easily add the Payment Summary fields in Fluent Forms!