Billing address input fields

Capture billing address details using highly-customisable standalone input fields.

Address input field

The address input field component allows you to:

• Customise the label copy.
• Customise the styling of the input field.

Country selection drop-down

The country selection component allows you to:

• Customise the label copy.
• Customise the styling of the drop-down and drop-down options, depending on their state.
• Choose a message to display when no country is found.

Postcode input field

The postcode input field allows you to:

• Customise the label copy.
• Customise the styling of the input field.

Pre-fill billing address checkbox

The card consent component allows you to:

• Customise the label copy.
• Add custom styling for the checked and unchecked versions of the checkbox.

Card input fields

Capture card details using highly-customisable standalone input fields.

Card brand selector

The card brand selector component allows you to:

• Decide which cards to show/accept.
• Choose how cards appear when selected.
• Highlight the detected card brand as the customer types their card number.

Card consent

The card consent component allows you to:

• Customise the label copy.
• Add custom styling for the checked and unchecked versions of the checkbox.

Card CVC

The card CVC component allows you to:

• Decide whether or not to mask the CVC.
• Add a toggle so cardholders can show or hide the CVC.
• Display a hint icon, with or without tooltip.
• Sync with the dynamic card component.

Card expiry date

The card expiry component allows you to:

• Choose the expiry date format.
• Set an initial placeholder value.
• Display a hint icon, with or without tooltip.
• Sync with the dynamic card component.

Card number

The card number field allows you to:

• Format the card number as the user types.
• Display the card scheme logo.
• Validate the card number on input change or input blur.
• Sync with the dynamic card component.

Cardholder name

The cardholder name component allows you to:

• Set an initial placeholder value.
• Choose whether to convert the input to uppercase automatically.
• Display a hint icon, with or without tooltip.
• Sync with the dynamic card component.

Card submit

Display a button to finalise the payment process.

The submit button component allows you to:

• Customise the button's text.
• Disable the button until all fields are validated or show a loading state.
• Show or hide the button based on validation status.
• Enable AVS (address verification) checks or skip if not needed.

ℹ️

You can also choose to use your own button instead of rendering the PXP button.

Dynamic card image

Display a live preview of a customer's card with dynamically updated information.

The dynamic card image component allows you to:

• Choose front and back images for the card preview.
• Customise the text labels and styles for the card fields displayed on the image.
• Dynamically update the card preview as the user types.