Skip to main content
Log payment errors with diagnostic information to help debug issues and work with Primer support.

​
Recipe

checkout.addEventListener('primer:ready', (event) => {
  const primer = event.detail;

  primer.onPaymentFailure = ({ error }) => {
    console.error('Payment failed:', {
      code: error.code,
      message: error.message,
      diagnosticsId: error.diagnosticsId, // Share with Primer support
    });
  };
});

​
How it works

  1. Listen for the primer:ready event to access the Primer SDK instance
  2. Set the onPaymentFailure callback
  3. Log the error details including diagnosticsId which helps Primer support investigate issues
The diagnosticsId is a unique identifier for the error. When contacting Primer support, always include this ID to help them quickly locate and diagnose the issue.

​
Variations

​
Send errors to logging service

primer.onPaymentFailure = ({ error, paymentMethodType }) => {
  // Send to your logging service (Sentry, LogRocket, etc.)
  Sentry.captureException(new Error(error.message), {
    extra: {
      code: error.code,
      diagnosticsId: error.diagnosticsId,
      paymentMethod: paymentMethodType,
    },
  });
};

​
Log all Primer events for debugging

const primerEvents = [
  'primer:ready',
  'primer:state-change',
  'primer:methods-update',
  'primer:payment-start',
  'primer:payment-success',
  'primer:payment-failure',
  'primer:card-success',
  'primer:card-error',
  'primer:card-network-change',
  'primer:vault:methods-update',
];

primerEvents.forEach((eventName) => {
  document.addEventListener(eventName, (event) => {
    console.log(`[${eventName}]`, event.detail);
  });
});

​
Check available payment methods

checkout.addEventListener('primer:methods-update', (event) => {
  const methods = event.detail.toArray();
  console.table(methods.map((m) => ({ type: m.type, id: m.id })));
});

​
See also