Pre-built components
Learn about the different pre-built components that we offer.
Billing address
The billing address component is a pre-built form that collects billing address information required for payment processing. It combines multiple address-related fields into a single, cohesive component:
- Country selection: a drop-down for selecting the billing country.
- Postcode/ZIP code: an input field for postal codes.
- Address: an input field for the street address/house number.
- Prefill checkbox (optional): a checkbox that allows the shipping address to be copied to the billing fields.
The component handles validation, styling, and data collection automatically, making it easy to integrate address verification (AVS) into your payment flow.
Customisation
The billing address component allows you to:
- Decide which fields to display (e.g., postcode, street, country).
- Configure whether to request billing address data for AVS during authorisation.
- Customise how the billing address fields are displayed and in which order.
- Include a checkbox to enable you to prefill the billing address fields with the customer’s shipping address.
Additionally, you can:
- Adjust the label and validation for each field.
- Control the behaviour when no billing address is provided.
Billing address component with a shipping checkbox.
Billing address component with custom ordering and styling.
Card-on-file
Customisation
The card-on-file component allows you to:
- Customise how the card list is displayed, including setting the list order and deciding which cards to show first based on priority.
- Choose whether display or hide expired cards and set a maximum number of tokens shown.
- Adjust which fields to display and how tokenised cards appear (e.g., generic brand image, card's last four digits).
- Add in-line or pop-up tooltips for better user guidance.
- Enable or disable card deletion with confirmation.
- Set flags for CVV request on tokenised cards.
Click-once
Customisation
The click-once component allows you to:
- Adjust how the card information is presented for quick selection.
- Display the tokenised card list with configurable priorities.
- Set the default behaviour for CVV requests and bypass it for returning users.
- Customise error handling and provide user feedback.
- Customise the button's styling.
Click-once component with a custom error message.
New card
Customisation
The new card component allows you to:
- Control which fields are shown and how they're labelled.
- Customise the layout by arranging the fields as you wish.
- Configure field labels, placeholders, and error messages.
- Control the appearance of the submit button and disable it until all fields are valid.
- Add in-line or pop-up tooltips for each field.
- Customise the field styling and input validation rules.
- Choose whether to auto-capitalise the cardholder name or allow editing.
Updated 3 days ago