​
Import

import { useAddFundsModal } from '@0xsequence/checkout'

​
Usage

import { useAddFundsModal } from '@0xsequence/checkout'

function App() {
  const { triggerAddFunds } = useAddFundsModal()
  const walletAddress = '0x123...' // User's wallet address
  
  const handleAddFunds = () => {
    triggerAddFunds({
      walletAddress,
      defaultFiatAmount: '50',
      defaultCryptoCurrency: 'USDC',
      onOrderSuccessful: (data) => {
        console.log('Order successful!', data)
      }
    })
  }
  
  return (
    <button onClick={handleAddFunds}>
      Add Funds
    </button>
  )
}

If you receive a 403 error when trying to load Transak’s URL, it means your domain needs to be whitelisted. Please contact us for assistance in resolving this issue.

​
Return Type: UseAddFundsModalReturnType

The hook returns an object with the following properties:

type UseAddFundsModalReturnType = {
  triggerAddFunds: (settings: AddFundsSettings) => void
  closeAddFunds: () => void
  addFundsSettings: AddFundsSettings | undefined
}

​
Properties

​
triggerAddFunds

(settings: AddFundsSettings) => void

Opens the On-ramp modal with the specified parameters.

Parameters:

ParameterTypeDescription
walletAddressstring | HexThe address of the wallet to receive funds
fiatAmountstring(Optional) The exact fiat amount to be used
fiatCurrencystring(Optional) The currency for the fiat amount (e.g., ‘USD’, ‘EUR’)
defaultFiatAmountstring(Optional) The default fiat amount to display
defaultCryptoCurrencystring(Optional) The default cryptocurrency to purchase
cryptoCurrencyListstring(Optional) Comma-separated list of available cryptocurrencies
networksstring(Optional) Comma-separated list of available networks
onClose() => void(Optional) Callback when the modal is closed
onOrderCreated(data: any) => void(Optional) Callback when a new order is created
onOrderSuccessful(data: any) => void(Optional) Callback when order completes successfully
onOrderFailed(data: any) => void(Optional) Callback when order fails

​
closeAddFunds

() => void

Closes the On-ramp modal.

​
addFundsSettings

AddFundsSettings | undefined

AddFundsSettings Interface:

interface AddFundsSettings {
  walletAddress: string | Hex
  fiatAmount?: string
  fiatCurrency?: string
  defaultFiatAmount?: string
  defaultCryptoCurrency?: string
  cryptoCurrencyList?: string
  networks?: string
  onClose?: () => void
  onOrderCreated?: (data: any) => void
  onOrderSuccessful?: (data: any) => void
  onOrderFailed?: (data: any) => void
}

The current settings configuration for the On-ramp modal.

​
Notes

This hook provides methods to control the On-ramp modal powered by Transak, allowing users to buy cryptocurrency with a credit/debit card directly within your application.

Was this page helpful?