Event Handling

All payment and form events are delivered as a single CustomEvent on the document:

const cleanup = revup.onRevupMessage((event) => {
  const { type, source, context, error } = event.detail;
  // Handle events
});

The returned cleanup function removes the event listener when called.

Event Sources

SOURCE	DESCRIPTION
'form'	Events related to the credit card form
'apm'	Events related to Alternative Payment Methods

Event Types Reference

TYPE	SOURCE	DESCRIPTION
'initialized'	Both	SDK component initialized and ready
'validation.changed'	'form'	Form validation state changed
'payment.authorized'	Both	Payment successfully authorized
'payment.failed'	Both	Payment failed
'payment.cancelled'	'apm'	User cancelled APM payment
'apm.unavailable'	'apm'	Requested APM is not available
'apm.ready'	'apm'	APM button ready to display
'form.submitted'	'form'	Form submitted
'bin.changed'	'form'	BIN (first 6 digits) changed

Event Payload Structure

{
  type: string,      // Event type
  source: string,    // 'form' or 'apm'
  context?: {        // Present for successful events
    transactionId: string,
    orderId: string,
    apm?: string     // For APM events
  },
  error?: {          // Present for error events
    code: string,
    message: string,
    statusCode?: number
  }
}

Complete Event Handler Example

const handleRevupMessage = (event) => {
  const { type, source, context, error } = event.detail;
  switch (type) {
    case 'initialized':
      console.log(`${source} initialized`);
      break;
    case 'payment.authorized':
      // Success - redirect or show confirmation
      console.log(`Payment authorized: ${context.transactionId}`);
      window.location.href = `/success?transaction=${context.transactionId}`;
      break;
    case 'payment.failed':
      // Payment declined or error
      console.error(`Payment failed: ${error?.message}`);
      showErrorMessage(error?.message || 'Payment failed');
      break;
    case 'payment.cancelled':
      // User cancelled (APM)
      console.log('Payment cancelled by user');
      break;
    case 'apm.unavailable':
      // APM not available for this transaction
      console.warn(`APM unavailable: ${context?.apm} - ${error?.message}`);
      break;
    default:
      console.log('Event:', type, source, context);
  }
};
const cleanup = revup.onRevupMessage(handleRevupMessage);