Overview

Checkout Components allows you to empower your teams with real-time insights from every interaction.

With Checkout Components, you can:

Gain transparency with native transaction tracking in PXP reports.
Create custom event tracking to monitor every aspect of the payment journey.
Use these actionable insights to optimise conversion rates and reduce drop-offs.
Feed real-time data into your analytics and CRM systems.

Consuming events

To consume an analytics event, use the following snippet:

analyticsEvent(analyticsEvent: any) {
  if (analyticsEvent instanceof SecurityCheckAnalyticsEvent) {
    console.log("{eventName}", analyticsEvent);
  }
}

Events

The following table lists all the available events and describes the structure of each event.

Event name	Structure
`BrowserData`	For card-on-file and new card components: `eventName` `timestamp` `browserType` `browserVersion` `operatingSystem` `pageUrl` For click-once components: `eventName` `timestamp` `browserType` `browserVersion` `operatingSystem` `pageUrl` `componentType` `sessionId`
`CardBrandType`	`eventName` `timestamp` `cardBrand` `pageUrl`
`CardDeletion`	`eventName` `timestamp` `cardStatus` `cardBrand` `pageUrl` `elementId`
`CardValidationError`	For card-on-file components: `eventName` `timestamp` `errorType` `errorMessage` `componentId` For click-once components: `eventName` `timestamp` `messageContent` `elementId` `pageUrl` `componentType` `sessionId`
`ChangePreselectedCardClick`	`eventName` `timestamp` `componentId` `pageUrl`
`ComponentAbandonment`	For card-on-file components: `eventName` `timestamp` `formId` `pageUrl` For new card components: `eventName` `timestamp` `formId` `pageUrl` `componentType`
`ComponentError`	`eventName` `timestamp` `errorCode` `errorMessage` `componentId`
`ComponentInteraction`	`eventName` `timestamp` `interactionType` `componentId` `pageUrl`
`ComponentLifecycle`	`eventName` `timestamp` `eventType` `componentId`
`CustomerClick`	`eventName` `timestamp` `elementId` `pageUrl`
`CvvFillTime`	`eventName` `startTimestamp` `endTimestamp` `duration` `pageUrl`
`DetectClick`	`elementId` `pageUrl` `sessionId`
`DeviceType`	For card-on-file and new card components: `eventName` `timestamp` `deviceType` `pageUrl` For click-once components: `eventName` `timestamp` `deviceType` `pageUrl` `componentType` `sessionId`
`EditCardClick`	`eventName` `timestamp` `elementId` `pageUrl` `editedFields`
`ErrorMessageShown`	`eventName` `timestamp` `messageContent` `elementId` `pageUrl`
`OneClickPaymentAbandonment`	`timestamp` `pageUrl` `componentType` `sessionId`
`OneClickPaymentCompletionTime`	`startTimestamp` `endTimestamp` `duration` `pageUrl` `sessionId`
`OneClickPaymentConfirmed`	`timestamp` `pageUrl` `componentType` `sessionId`
`PaymentAbandonment`	`sessionId` `pageUrl` `componentType`
`PayButtonClick`	`eventName` `timestamp` `cardBrand` `cardType` `componentId` `pageUrl`
`PreInitiateAuthentication`	`eventName` `componentId` `sessionId` `transactionId`
`PreTokenization`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostAuthorisation`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostInitiateAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PostTokenization`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PreAuthentication`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`PreAuthorisation`	`eventName` `timestamp` `componentId` `sessionId` `transactionId`
`SecurityCheck`	`eventName` `timestamp` `checkType` `pageUrl`
`ValidationMessageShown`	`eventName` `timestamp` `messageContent` `elementId` `pageUrl`

Event data

The following table describes the different types of data that can be returned by events.

Name	Description
`browserType`	The browser type (e.g., `Chrome`).
`browserVersion`	The browser version.
`cardBrand`	The card brand (e.g., `Visa` or `Mastercard`).
`cardStatus`	The state of the card (e.g., `Expired`).
`componentId`	The component's unique identifier.
`componentType`	The component type (e.g., `NewCard`).
`duration`	The total time taken to complete a payment or fill in a CVV.
`editedFields`	The fields that were edited.
`elementId`	The element's unique identifier.
`endTimestamp`	The date and time when the customer starts the payment process.
`errorCode`	The error code.
`errorMessage`	The description of the error.
`eventName`	The name of the event.
`eventType`	The type of lifecycle event (e.g., mount or unmount).
`formId`	The form's unique identifier.
`interactionType`	The type of interaction (e.g., `Focus`).
`messageContent`	The content of the message.
`operatingSystem`	The operating system.
`pageUrl`	The URL of the page that the event occurred on.
`sessionId`	The session's unique identifier.
`startTimestamp`	The date and time when the customer completes the payment process.
`timestamp`	The date and time when the event occurred.