---
title: Add Payment Summary Field in Payment Forms 
description: "In **Fluent 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…"
url: "https://fluentforms.com/docs/add-payment-summary-field-in-payment-forms/"
updated: "2025-06-03"
category: Field Types / Payment Fields
---

# Add Payment Summary Field in Payment Forms 

In **Fluent 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

To learn how to add the Payment Summary field to the Fluent Forms, follow the steps with the screenshots below –  

First, go tothe**Forms**section from the **Fluent Forms Navbar,**chooseadesired**Payment Form,**and click the **Pencil/Edit** icon to open the **Editor** page of that form.

> If you don’t have an existing payment form, read this [Documentation](https://fluentforms.com/docs/how-to-create-a-payment-form-with-fluent-form/) to create a new one. **For example**, I choose an existing form to show the whole process.

![1. Open desired form 3 scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/1.-Open-desired-form-3-scaled.webp)

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.

> If you don’t have the**Payment Fields Module** enabled in your Fluent Forms, read this **Documentation** to learn how to enable it.

![2. Add Payment Summary field scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/2.-Add-Payment-Summary-field-scaled.webp)

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 coupon field. 

1. Payment Summary
2. Advanced Options

![3. Input Customization tab scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/3.-Input-Customization-tab-scaled.webp)

### 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. 

![4. Payment Summary customization scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/4.-Payment-Summary-customization--scaled.webp)

### 2. Advanced Options 

All the **Settings** under the **Advanced Options**tab mentioned in the screenshot are briefly explained below – 

**A. Conditional Logic**: This option allows the coupon field to function conditionally based on your submission values according to your set of conditional logic/s. To learn more, read this [Documentation](https://fluentforms.com/docs/set-up-forms-with-conditional-logic-in-fluent-forms/). 

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

![5. Advanced Summary options scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/5.-Advanced-Summary-options-scaled.webp)

Once you complete all the customization, don’t forget to add the [Payment Method](https://fluentforms.com/docs/add-payment-method-field-in-payment-forms/) field to collect the payments. Plus to collect the recurring payments, you can add the [Subscription](https://fluentforms.com/docs/add-subscription-field-in-payment-forms/) field.

> **Remember**, the added payment method in your **Form** will not function unless you properly complete the payment configuration process.

![6. Add Payment Method field scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/6.-Add-Payment-Method-field-scaled.webp)

## 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**buttonin 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**.  

![7. Save Form button scaled 48585](https://fluentforms.com/wp-content/uploads/2025/02/7.-Save-Form-button-scaled.webp)

## Preview of Payment Summary field

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

![8. Form Preview 48585](https://fluentforms.com/wp-content/uploads/2025/02/8.-Form-Preview-.webp)

This way you can easily add the **Payment Summary** fields in Fluent Forms!
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our [@support team](https://wpmanageninja.com/support-tickets/?utm_source=wpmn&utm_medium=home&utm_campaign=site#/). Thank you.