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.

Integration steps

A full integration involves the following steps:

1. Set up the Unity Portal: To use the SDK, you first need to activate the Checkout and Card services in the Unity Portal. You also need to whitelist any domains that you'll be sending requests from.
2. Install the SDK: Install the latest version of the SDK using npm and set it up.
3. Embed components: Initialise the Checkout SDK, create your components, and mount them.
4. Handle results: Add proper handling for events and errors. Implement analytics to monitor your customers' payment journeys.
5. Submit and view transactions: Call the submitAsync() method. The SDK then validates all form data, tokenises the card (if needed), and sends the transaction request to PXP.
   After PXP processes the payment, the SDK receives the response and triggers an onPostAuthorisation callback that receives a transaction response. This response includes:
   • The transaction state, which tells you whether or not it was successful.
   • The transaction's unique identifier.
   • The provider response, if there's no 3DS challenge.
   • The authentication URL, if there is a 3DS challenge.

Component types

There are two types of Card Components:

• Pre-built components: For convenience and speed. They offer ready-to-use user interfaces, pre-designed and responsive layouts, and a consistent experience.
• Standalone components: For maximum flexibility and control. They offer individual field control, custom layouts, and fine-grained validation.

You can think of pre-built components as containers that manage multiple standalone components internally, while standalone components are individual building blocks you assemble yourself.

Use cases

Use pre-built components if:

• You want a complete payment form with minimal setup.
• You're happy with pre-designed, responsive payment forms.
• You want to get up and running quickly, with minimal custom styling.
• You want a proven user interface that follows payment best practices.

Use standalone components if:

• You want to position and style each payment field (card number, expiry, CVC, etc.) separately in your own custom user interface.
• You're building a completely custom payment form layout that doesn't fit standard patterns.
• You need to handle validation for each field independently.
• You're integrating with existing forms or complex UI frameworks.

Available components

Supported transaction intents

When you initiate a transaction, you have to provide key information about the transaction method, as well as the amount and currency.

The transaction method is made up of three elements:

• The entry type, which describes the origin of the transaction and determines the supported payment methods and available features. For components, this is always ECOM.
• The funding type, which describes the method used to fund the transaction. In this case, Card.
• The intent, which describes the purpose of a transaction, indicating the intended money flow direction. Each intent dictates a specific transaction flow and affects how the transaction is handled by the system.

For card transactions, we support the following intents:

ℹ️

We support recurring payments for subscription-based services where payments are automatically made on a regular schedule (e.g., monthly memberships, subscription services).