# 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 information, including their billing address and payment details.

With Payment Field, you have control over various aspects of the payment form. You can customize the heading for the billing address section, choose whether to display 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                                                                                                                                            |
| ------------------------------ | -------------------------------------- | ------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| billingAddressHeading          | Billing address                        | string  | Billing Address heading                                                                             | The heading text for the billing address section of the payment form.                                                                                  |
| 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.