Skip to main content

​
Summary

This hook can be used to trigger an Onramp UI so that users can immediately buy crypto with fiat.

​
How it works

After setting up your onramp provider, you can use the useOnramp to prompt your user to fund their wallet.
For other funding methods, see usePayWithDynamic for unified payment flow.
The following attributes are exposed:
MethodTypeDescription
enabledbooleanWhether some onramp method is enabled and ready to use.
providersOnrampOption[]Array of available onramp providers with their configuration and URLs
open(props: { address?: string; token?: string; onrampProvider: OnrampProviders }) => voidTrigger the onramp UI with required onrampProvider attribute and optional address and token attributes, returns a Promise that will resolve once the onramp UI is closed

​
Example

Custom onramp button: 
import { useOnramp } from '@dynamic-labs/sdk-react-core'
import { OnrampProviders } from '@dynamic-labs/sdk-api-core'

const FundMyWalletButton = () => {
  const { enabled, open } = useOnramp()

  const onClick = () => {
    open({
      onrampProvider: OnrampProviders.Banxa,
      token: 'USDT',
      address: '0x1234567890123456789012345678901234567890',
    }).then(() => window.alert('Success!'))
  }

  return (
    <button onClick={onClick} disabled={!enabled}>
      Buy USDT
    </button>
  )
}

​
Example with Crypto.com

Crypto.com is currently in limited beta. Please contact support if you’re interested in early access.
import { useOnramp } from '@dynamic-labs/sdk-react-core'
import { OnrampProviders } from '@dynamic-labs/sdk-api-core'

const FundMyWalletButton = () => {
  const { enabled, open } = useOnramp()

  const onClick = () => {
    open({
      onrampProvider: OnrampProviders.CryptoDotCom,
      token: 'ETH',
      address: '0x1234567890123456789012345678901234567890',
    }).then(() => window.alert('Success!'))
  }

  return (
    <button onClick={onClick} disabled={!enabled}>
      Buy ETH with Crypto.com
    </button>
  )
}

​
Accessing Provider Information

You can access available onramp providers and their configuration for headless implementations: 
import { useOnramp } from '@dynamic-labs/sdk-react-core'
import { OnrampProviders } from '@dynamic-labs/sdk-api-core'

const ProviderList = () => {
  const { enabled, providers, open } = useOnramp()

  return (
    <div>
      {enabled && (
        <div>
          <h3>Available Providers</h3>
          {providers.map((provider) => (
            <div key={provider.id}>
              <img src={provider.iconUrl} alt={provider.displayName} />
              <h4>{provider.displayName}</h4>
              <p>{provider.description}</p>
              <button onClick={() => {
                open({
                  onrampProvider: provider.id as OnrampProviders,
                  token: 'ETH',
                  address: '0x1234567890123456789012345678901234567890',
                  tokenAmount: 0.1,
                })
              }}>
                Open {provider.displayName}
              </button>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

​
Provider Object Structure

Each provider in the providers array contains:
PropertyTypeDescription
idstringUnique identifier (e.g., “coinbaseOnramp”, “cryptoDotCom”)
displayNamestringHuman-readable name for display
iconUrlstringURL to the provider’s icon/logo
urlstringBase URL with template parameters
openMode’iframe’ | ‘popup’How the provider should be opened
descriptionstringOptional description of the provider