About Card Components
Learn about Card Components.
Overview
Card Components allow you to easily integrate a highly secure and customisable payment solution into your website. By offering full control over layout, styling, and field visibility, Card Components ensure a seamless and branded payment experience, while maintaining top-tier security with PXP’s Token Vault service and 3DS service.
Component types
There are two types of Card Components:
- Pre-built components: UI elements that combine multiple individual fields (e.g., card number, expiry, CVC, and cardholder name). These manage layout, validation, and interactions internally.
- Standalone components: Individual input fields, buttons, or checkboxes that can be placed, styled, and arranged anywhere you want within your page layout.
Component | Description | Type |
---|---|---|
Address input field | Collect the first line of a customer's shipping address. | Standalone. |
Billing address | Collect a customer's billing address to use for AVS checks during authorisation. The pre-built version includes: TODO | Pre-built. |
Card-on-file | Allow customers to select previously tokenised cards for quick and easy payments. | Pre-built. |
Card CVC | Collect a card's CVC. | Standalone. |
Card expiry date | Collect a card's expiry date. | Standalone. |
Cardholder name | Collect a cardholder's name. | Standalone. |
Card number | Collect a card's number. | Standalone. |
Click-once | Allow customers to pay with just one click, using a tokenised card. | Standalone. |
Country selection drop-down | Allow customers to select their shipping country using a customisable drop-down. | Standalone. |
Dynamic card image | Display a live preview of a customer's card with dynamically updated information. | Standalone. |
New card | Securely capture full card details for first-time users. | Pre-built. |
Pre-fill billing address checkbox | Allow customers to pre-fill their billing address using their shipping address details. | Standalone. |
Postcode input field | Collect a customer's postal or ZIP code. | Standalone. |
Submit button | Display a button to finalise the payment process. | Standalone. |
Supported transaction intents
We support the following transaction intents, enabling flexibility across different business models:
- Purchase: Standard transaction where the customer completes a payment for goods or services.
- Estimated authorisation: Temporarily holds an amount on the card, typically used for transactions where the final payment amount is not fixed (e.g., hotel reservations, car rentals).
- Authorisation: Verifies that the cardholder has sufficient funds for the transaction and locks the funds until the transaction is completed.
- Card verification: Verifies the validity of the card without completing a full transaction. Useful for checking card details before performing a transaction.
- Payout: Used to transfer funds to the cardholder, such as refunds or withdrawals. This can be done using tokenised cards that were previously saved.
We support recurring payments for subscription-based services where payments are automatically made on a regular schedule (e.g., monthly memberships, subscription services).
Updated 15 days ago