Sign Up
Skip to content

On-ramp Overview

The checkout on-ramp modal enables developers to easily facilitate on-ramp via fiat currency into a cryptocurrency. With this integration, one can use a credit card to purchase tokens across many different networks.

Enable the on-ramp modal in Sequence Kit to onboard users using fiat currencies with a credit or debit card

Integration

To integrate the on-ramp feature, follow these steps:

1. Install the kit-checkout Module:

npm install @0xsequence/kit-checkout
# or
pnpm install @0xsequence/kit-checkout
# or
yarn add @0xsequence/kit-checkout

2. Place the KitCheckoutProvider Below the Sequence Kit Core Provider in your App:

import { KitCheckoutProvider } from '@0xsequence/kit-checkout'
 
 
const App = () => {
  return (
    <SequenceKit config={config}>
      <KitCheckoutProvider>
        <Page />
      </KitCheckoutProvider>
    </SequenceKit>
  )
}

3. Adding Funds with a Credit Card

Call the triggerAddFunds function to cause a modal to appear

  import { useAddFundsModal } from '@0xsequence/kit-checkout'
 
  const MyComponent = () => {
    const { triggerAddFunds: toggleAddFunds } = useAddFundsModal()
 
    const onClick = () => {
      toggleAddFunds({
        walletAddress: recipientAddress,
      })
    }
 
    return (
      <button onClick={onClick}>Add Funds</button>
    )
  }

Configuration Overview

The following is the available configuration customization options for toggleAddFunds params

interface AddFundsSettings {
  walletAddress: string | Hex // Address of the wallet where funds will be added
  fiatAmount?: string // Specify the amount in fiat to add
  fiatCurrency?: string // Specify the fiat currency (e.g., USD, EUR)
  defaultFiatAmount?: string // Default amount in fiat to add
  defaultCryptoCurrency?: string // Default cryptocurrency to use (e.g., ETH, BTC)
  cryptoCurrencyList?: string // List of cryptocurrencies available for selection. Example: "USDT,BTC,USDC"
  networks?: string // Specify network(s) to use for the transaction. Example: "mainnet,ethereum"
  onClose?: () => void // Callback function to execute when the modal is closed
}