Skip to main content
Track payment success and failure events in your analytics platform (Google Analytics, Segment, etc.).

​
Recipe

document.addEventListener('primer:payment-success', (event) => {
  const { paymentSummary, paymentMethodType } = event.detail;

  analytics.track('Payment Completed', {
    paymentId: paymentSummary.id,
    orderId: paymentSummary.orderId,
    method: paymentMethodType,
    last4: paymentSummary.paymentMethodData?.last4Digits,
  });
});

document.addEventListener('primer:payment-failure', (event) => {
  const { error, paymentMethodType } = event.detail;

  analytics.track('Payment Failed', {
    errorCode: error.code,
    method: paymentMethodType,
    diagnosticsId: error.diagnosticsId,
  });
});

​
How it works

  1. Listen for primer:payment-success and primer:payment-failure DOM events
  2. Extract relevant data from event.detail
  3. Send to your analytics platform with meaningful event names and properties

​
Variations

​
Google Analytics 4

document.addEventListener('primer:payment-success', (event) => {
  const { paymentSummary, paymentMethodType } = event.detail;

  gtag('event', 'purchase', {
    transaction_id: paymentSummary.orderId,
    value: paymentSummary.amount / 100, // Convert from cents
    currency: paymentSummary.currencyCode,
    payment_type: paymentMethodType,
  });
});

​
Segment

document.addEventListener('primer:payment-success', (event) => {
  const { paymentSummary, paymentMethodType } = event.detail;

  analytics.track('Order Completed', {
    order_id: paymentSummary.orderId,
    total: paymentSummary.amount / 100,
    currency: paymentSummary.currencyCode,
    payment_method: paymentMethodType,
  });
});

​
Track payment method selection

document.addEventListener('primer:payment-start', (event) => {
  const { paymentMethodType } = event.detail;

  analytics.track('Payment Method Selected', {
    method: paymentMethodType,
  });
});

​
See also