Form Subcomponents: Payment Field

The payment field subcomponent can only be used within the Form component.

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.

An example of payment methods listed in the payment field subcomponent.

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.

Invalid form feedback, as defined by Invalid message if option not selected" prop.

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