Get actionable, trackable data instantly to drive better decisions and performance.
Analytics events are structured data objects that get automatically triggered when significant actions or states occur within the drop-in. These allow you to monitor every aspect of the payment journey.
Analytics events allow you to:
- Gain transparency with native transaction tracking in PXP reports.
- Optimise conversion rates and reduce drop-offs, thanks to actionable insights.
- Feed real-time data into your analytics and CRM systems.
Analytics events should be consumed in the CheckoutDropIn.initialize function.
For example:
import CheckoutDropIn from '@pxpio/web-components-sdk/src/checkoutDropIn/CheckoutDropIn';
import IntentType from '@pxpio/web-components-sdk/src/basePxpCheckout/types/IntentType';
import { BaseSubmitResult } from '@pxpio/web-components-sdk/src/checkoutDropIn/types/BaseSubmitResult';
import BaseSdkException from '@pxpio/web-components-sdk/src/types/sdkExceptions/BaseSdkException';
// Get session data from backend
const sessionData = await fetch('/api/create-session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
}).then(response => response.json());
// Initialise with analytics
const checkoutDropIn = CheckoutDropIn.initialize({
environment: 'test',
session: sessionData,
ownerId: 'MERCHANT-1',
ownerType: 'MerchantGroup',
transactionData: {
currency: 'USD',
amount: 99.99,
entryType: 'Ecom',
intent: {
card: IntentType.Authorisation,
paypal: IntentType.Authorisation
},
merchantTransactionId: crypto.randomUUID(),
merchantTransactionDate: () => new Date().toISOString()
},
onGetShopper: () => Promise.resolve({ id: 'shopper-001' }),
analyticsEvent: (event) => {
console.log('Analytics event:', event.eventName, event);
// Send to your analytics platform
if (typeof gtag !== 'undefined') {
gtag('event', event.eventName, {
session_id: event.sessionId,
timestamp: event.timestamp,
...event
});
}
},
onSuccess: async (result: BaseSubmitResult) => {
await verifyPaymentOnBackend(result);
},
onError: (error: BaseSdkException) => {
console.error('Payment failed:', error);
}
});
// Mount the drop-in
checkoutDropIn.create('checkout-drop-in-container');