Skip to main content

​
FundCardPropsReact

type FundCardPropsReact = {
  children?: ReactNode;
  assetSymbol: string;
  placeholder?: string | React.ReactNode;
  headerText?: string;
  buttonText?: string;
  country: string;
  subdivision?: string;
  currency?: string;
  className?: string;
  presetAmountInputs?: PresetAmountInputs;
} & LifecycleEvents;

​
LifecycleStatus

type LifecycleStatus =
  | {
      statusName: "init";
      statusData: null;
    }
  | {
      statusName: "exit";
      statusData: null;
    }
  | {
      statusName: "error";
      statusData: OnrampError;
    }
  | {
      statusName: "transactionSuccess";
      statusData: SuccessEventData;
    }
  | {
      statusName: "transactionPending";
      statusData: null;
    };

​
PresetAmountInputs

type PresetAmountInputItemPropsReact = {
  presetAmountInput: string;
  currency: string;
  onClick: (presetAmountInput: string) => void;
};

/**
 * To use this type, you must provide a tuple of strings with a length of 3.
 *
 * Example:
 *
 * const presetAmountInputs: PresetAmountInputs = ['100', '200', '300'];
 */
type PresetAmountInputs = readonly [string, string, string];

​
FundButtonReact

type FundButtonReact = {
  className?: string; // An optional CSS class name for styling the button component
  disabled?: boolean; // An optional prop to disable the fund button
  text?: string; // An optional text to be displayed in the button component
  hideText?: boolean; // An optional prop to hide the text in the button component
  hideIcon?: boolean; // An optional prop to hide the icon in the button component
  fundingUrl?: string; // An optional prop to provide a custom funding URL
  openIn?: "popup" | "tab"; // Whether to open the funding flow in a tab or a popup window
  /**
   * Note: popupSize will be ignored when using a Coinbase Onramp URL
   * (i.e. https://pay.coinbase.com/*) as it requires a fixed popup size.
   */
  popupSize?: "sm" | "md" | "lg"; // Size of the popup window if `openIn` is set to `popup`
  rel?: string; // Specifies the relationship between the current document and the linked document
  target?: string; // Where to open the target if `openIn` is set to tab
};

​
GetOnrampUrlParams

Props used to get an Onramp buy URL using a session token created using the Onramp session token API. See Session Token Authentication 
type GetOnrampUrlParams = {
  /**
   * A session token created using the Onramp session token API. The token will
   * be linked to the project ID, addresses, and assets params provided in the
   * create session token API request.
   */
  sessionToken: string;
} & GetOnrampBuyUrlOptionalProps;

​
GetOnrampBuyUrlOptionalProps

The optional properties that can be used to create an Onramp buy URL. 
type GetOnrampBuyUrlOptionalProps = {
  /**
   * If specified, this asset will be automatically selected for the user in
   * the Onramp UI. Should be a valid asset symbol e.g. BTC, ETH, USDC.
   */
  defaultAsset?: string;
  /**
   * If specified, this network will be automatically selected for the user in
   * the Onramp UI. Should be a valid network name in lower case e.g. ethereum,
   * base.
   */
  defaultNetwork?: string;
  /**
   * A unique identifier that will be associated with any transactions created
   * by the user during their Onramp session. You can use this with the
   * Transaction Status API to check the status of the user's transaction.
   * See https://docs.cdp.coinbase.com/onramp/docs/api-reporting#buy-transaction-status
   */
  partnerUserId?: string;
  /**
   * This amount will be used to pre-fill the amount of crypto the user is
   * buying or sending. The user can choose to change this amount in the UI.
   * Only one of presetCryptoAmount or presetFiatAmount should be provided.
   */
  presetCryptoAmount?: number;
  /**
   * This amount will be used to pre-fill the fiat value of the crypto the user
   * is buying or sending. The user can choose to change this amount in the UI.
   * Only one of presetCryptoAmount or presetFiatAmount should be provided.
   */
  presetFiatAmount?: number;
  /**
   * The default payment method that will be selected for the user in the
   * Onramp UI. Should be one of the payment methods supported for the user's
   * location.
   */
  defaultPaymentMethod?: string;
  /**
   * The currency code of the fiat amount provided in the presetFiatAmount
   * param e.g. USD, CAD, EUR.
   */
  fiatCurrency?: string;
  /**
   * A URL that the user will be automatically redirected to after a successful
   * buy/send. The domain must match a domain on the domain allowlist in
   * Coinbase Developer Platform (https://portal.cdp.coinbase.com/products/onramp).
   */
  redirectUrl?: string;
  /**
   * The name of the component that is calling the Onramp buy URL. This will
   * be used for analytics.
   */
  originComponentName?: string;
};

​
OnrampConfigResponseData

type OnrampConfigResponseData = {
  countries: OnrampConfigCountry[];
};

type OnrampConfigCountry = {
  id: string;
  /**
   * ISO 3166-2 two-digit country subdivision code representing
   * the purchasing user’s subdivision of residence within their country,
   * e.g. NY. Required if the country=“US” because certain states (e.g., NY)
   * have state specific asset restrictions.
   */
  subdivisions: string[];
  paymentMethods: OnrampPaymentMethod[];
};

type OnrampPaymentMethod = {
  id: string;
};

​
OnrampOptionsResponseData

type OnrampOptionsResponseData = {
  /**
   * List of supported fiat currencies that can be exchanged for crypto on Onramp in the given location.
   * Each currency contains a list of available payment methods, with min and max transaction limits for that currency.
   */
  paymentCurrencies: OnrampPaymentCurrency[];
  /**
   * List of available crypto assets that can be bought on Onramp in the given location.
   */
  purchaseCurrencies: OnrampPurchaseCurrency[];
};

type OnrampPurchaseCurrency = {
  id: string;
  name: string;
  symbol: string;
  iconUrl: string;
  networks: OnrampNetwork[];
};

type OnrampPaymentCurrency = {
  id: string;
  limits: OnrampPaymentMethodLimit[];
  iconUrl: string;
};

type OnrampNetwork = {
  name: string;
  displayName: string;
  chainId: string;
  contractAddress: string;
};

type OnrampPaymentMethodLimit = {
  id: string;
  min: number;
  max: number;
};

​
OnrampTransactionStatusResponseData

type OnrampTransactionStatusResponseData = {
  /** List of `OnrampTransactions` in reverse chronological order. */
  transactions: OnrampTransaction[];
  /** A reference to the next page of transactions. */
  nextPageKey: string;
  /** The total number of transactions made by the user. */
  totalCount: string;
};

type OnrampTransaction = {
  status: OnrampTransactionStatusName;
  purchaseCurrency: string;
  purchaseNetwork: string;
  purchaseAmount: OnrampAmount;
  paymentTotal: OnrampAmount;
  paymentSubtotal: OnrampAmount;
  coinbaseFee: OnrampAmount;
  networkFee: OnrampAmount;
  exchangeRate: OnrampAmount;
  txHash: string;
  createdAt: string;
  country: string;
  userId: string;
  paymentMethod: string;
  transactionId: string;
};

​
SuccessEventData

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

​
OnrampError

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

​
EventMetadata

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

​
OnrampQuoteResponseData

type OnrampQuoteResponseData = {
  /**
   * Object with amount and currency of the total fiat payment required to complete the purchase, inclusive of any fees.
   * The currency will match the `paymentCurrency` in the request if it is supported, otherwise it falls back to USD.
   */
  paymentTotal: OnrampAmount;
  /**
   * Object with amount and currency of the fiat cost of the crypto asset to be purchased, exclusive of any fees.
   * The currency will match the `paymentCurrency`.
   */
  paymentSubtotal: OnrampAmount;
  /**
   * Object with amount and currency of the crypto that to be purchased.
   * The currency will match the `purchaseCurrency` in the request.
   * The number of decimals will be based on the crypto asset.
   */
  purchaseAmount: OnrampAmount;
  /**
   * Object with amount and currency of the fee charged by the Coinbase exchange to complete the transaction.
   * The currency will match the `paymentCurrency`.
   */
  coinbaseFee: OnrampAmount;
  /**
   * Object with amount and currency of the network fee required to send the purchased crypto to the user’s wallet.
   * The currency will match the `paymentCurrency`.
   */
  networkFee: OnrampAmount;
  /**
   * Reference to the quote that should be passed into the initialization parameters when launching the Coinbase Onramp widget via the SDK or URL generator.
   */
  quoteId: string;
};
⌘I