Skip to main content
The setupOnrampEventListeners utility sets up event listeners for the Coinbase Onramp widget. It helps you handle various events like successful purchases, exits, and other user interactions.

Usage

// @errors: 2305
import { setupOnrampEventListeners } from '@coinbase/onchainkit/fund';
import type { SuccessEventData, OnrampError, EventMetadata } from '@coinbase/onchainkit/fund';
const unsubscribe = setupOnrampEventListeners({
  onSuccess: (data: SuccessEventData) => {
    console.log('Purchase successful:', data);
  },
  onExit: (error: OnrampError) => {
    if (error) {
      console.error('Exit with error:', error);
    }
  },
  onEvent: (event: EventMetadata) => {
    console.log('Event received:', event);
  },
});

// Clean up when done
unsubscribe();

Parameters

{
  host?: string;                                   // Optional custom host URL
  onSuccess?: (data?: SuccessEventData) => void;  // Success callback
  onExit?: (error?: OnrampError) => void;         // Exit callback
  onEvent?: (event: EventMetadata) => void;       // General event callback
}

Returns

() => void - Returns an unsubscribe function that removes the event listeners when called.

Event Types

type SuccessEventData = {
  assetImageUrl: string;
  assetName: string;
  assetSymbol: string;
  chainId: string;
};

type OnrampError = {
  errorType:
    | 'internal_error'
    | 'handled_error'
    | 'network_error'
    | 'unknown_error';
  code?: string;
  debugMessage?: string;
};

type EventMetadata =
  | OpenEvent
  | TransitionViewEvent
  | PublicErrorEvent
  | ExitEvent
  | SuccessEvent
  | RequestOpenUrlEvent;

type OpenEvent = {
  eventName: 'open';
  widgetName: string;
};

type TransitionViewEvent = {
  eventName: 'transition_view';
  pageRoute: string;
};

type PublicErrorEvent = {
  eventName: 'error';
  error: OnrampError;
};

type ExitEvent = {
  eventName: 'exit';
  error?: OnrampError;
};

type SuccessEvent = {
  eventName: 'success';
  data?: SuccessEventData;
};

type RequestOpenUrlEvent = {
  eventName: 'request_open_url';
  url: string;
};
I