Payment Card component

Payment Card component displays customised input fields for payment card data.

Overview

Displays a preformatted set of input fields for accepting, validating, and formatting payment card data.

The data must be stored in a value using the dedicated $Payment Card system type. See System Types.

The component provides the following input field:

Field	Description
Card number	This field only accepts numeric values, up to a maximum of nineteen digits.
Expiry date	This field only accepts numeric values. Input is shown as a single field in MM/YY format, but data is stored as separate MM and YYYY values. Two digit year input is converted to a four digit year in the current century, for example, "22" is stored as "2022".
Security code	This field only accepts numeric values, up to a maximum of 4 digits.
Name on card	This field accepts any number of characters. Values are automatically converted to upper case.
Postal code	This field accepts a maximum of 9 characters. Values are automatically converted to upper case.

note

This component is not supported by the default legacy player runtime.

General Settings

Setting	Description
Name	Enter a name for the component.
Label	Enter a label for the component. The label is displayed above the component by default. Do not enter a label if you do not require this text to be shown.
Editable	Specify if the component can accept user input. Select the checkbox to allow the component to accept input from a user. De-select the checkbox to prevent a user from being able to input or interact with the component.
Help information about this component	Display help text directly below the component, for example to provide further information on how to use the component.

State

Select the value that you wish to save the payment card data into.

Save the component state into: Click Select or create a new value to select an existing value or create a new value.

Values should use the 'Payment Card' system type. See System Types.

Validation

Add client-side page validation to the component.

Switch on the Required toggle.

Setting	Description
Required	Specify if the component requires user input before the next step in the flow can be navigated to. For example, a user must complete the input for this field before they are allowed to progress in the flow. Switch on the toggle to set the component as requiring input from a user before they can progress in the flow, such as to the next page for example. A red asterisk is displayed next to the field name to indicate it is required. Switch off the toggle to allow a user to progress in the flow even if they have not entered any input into the component, for example if the field is optional.

Setting

Description

Required

Specify if the component requires user input before the next step in the flow can be navigated to. For example, a user must complete the input for this field before they are allowed to progress in the flow.

Switch on the toggle to set the component as requiring input from a user before they can progress in the flow, such as to the next page for example. A red asterisk is displayed next to the field name to indicate it is required.
Switch off the toggle to allow a user to progress in the flow even if they have not entered any input into the component, for example if the field is optional.

There are certain validation rules that are used depending on the payment issuers. The validation policies that differ according to the identified payment issuers are shown in the table below:

Card	Length of the Card number	Length of the Security code
Mastercard	16	3
Visa	16	3
American express	15	4
Unknown	1-19	3-4

The table below lists the validation rules that do not change based on the detected issuer.

Field	Length
Name on card	1-Unlimited
Expiry date	4 (two digits for month, two for year)
Postal code	1-Unlimited

Supported Card Issuers

When you enter a card number, the component looks up the Issuer Identification Number (IIN) ranges for each issuers and compares the first few digits of the number to those ranges to identify the issuers. The component utilises the issuers-specific validation ruleset to validate the input and displays the name of the found issuers inside the card number field.

The list of payment issuers accepted by the Payment Card component, together with the IIN ranges it uses to identify them, may be found in the table below.

Card Issuer	IIN range(s)
Mastercard	51-55, 2221-2702
Visa	4
American Express	34, 37

If the component cannot detect the issuer, it displays the issuer as Unknown and applies only loose validation. See the Validation for more information.

Styles

Apply additional CSS styling to the component.

Enter space-delimited CSS classes/selectors into the CSS Classes field.

When you run the flow, these classes are appended to the main component class.