> For the complete documentation index, see [llms.txt](https://docs.limio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponents-payment-field.md).

# Form Subcomponents: Payment Field

The payment field subcomponent can only be used within the [Form component](/components/component-library/modular-checkout-components/component-checkout-form.md).

{% hint style="warning" %}
This subcomponent is a legacy component. We recommend to now use [Form Subcomponents: Payment Manager Field](/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponents-payment-manager-field.md) and [Form Subcomponents: Payment Method Selector Field](/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponents-payment-method-selector-field.md) as it allows additional layout flexibility.
{% endhint %}

The Payment Field provides a seamless way for users to enter their payment details. Billing address details are collected by the Address Fields subcomponent, not by the Payment Field.

With Payment Field, you have control over various aspects of the payment form. You can customise the heading for the payment details section and specify the heading for the auto renewal option. Additionally, you can set a message to be shown when an invalid payment method is entered and provide an option for enabling auto renewal.

The component also offers flexibility in terms of user experience. You can decide whether to always show an authorization message or only display it when necessary. Furthermore, you have the option to automatically select the first payment type for user convenience.

### Validation

The payment field is a required field, if *selectFirstPaymentType* is set to false, and a user tries to submit the form without selecting a payment method, the form will not submit and the user will be displayed with the invalid validation.

### Props

| Prop Name                      | Label                                  | Type    | Default Value                                                                                       | Description                                                                                                                                            |
| ------------------------------ | -------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| paymentDetailsHeading          | Payment details                        | string  | Payment details heading                                                                             | Determines whether to display the payment details section in the payment form                                                                          |
| autoRenewalHeading             | Auto-renewal terms                     | string  | Auto-renewal terms headinG                                                                          | The heading text for the auto renewal section of the payment form                                                                                      |
| autoRenewalText                | Auto-renewal terms bodY                | string  | You will be charged each term for the rate in effect unless you cancel. You can cancel at any time. | The text for the auto renewal option in the payment form                                                                                               |
| alwaysShowAuthorisationMessage | Always show authorisation message?     | boolean | false                                                                                               | Determines whether to always show the authorization message in the payment form                                                                        |
| methodNotSelectedMessage       | Invalid message if option not selected | string  | Please select a payment method                                                                      | If *selectFirstPaymentType* is set to false, and user submits form without select option, this invalid message will display below the payment options. |
| selectFirstPaymentType         | Preselect First Payment Type           | boolean | false                                                                                               | Determines whether the first payment type should be selected by default.                                                                               |
| fieldClassName                 | Class Name                             | string  | ""                                                                                                  | The CSS class name for styling the field component                                                                                                     |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.limio.com/components/component-library/modular-checkout-components/modular-checkout-subcomponents-in-form/form-subcomponents-payment-field.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.