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.

​
Integration

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

1

1. Install the `kit-checkout` Module:

npm install @0xsequence/kit-checkout

# or

pnpm install @0xsequence/kit-checkout

# or

yarn add @0xsequence/kit-checkout
2

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

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

}

Was this page helpful?

Suggest edits
Smart SwapsOverview