> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Default Onramp Experiences

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

> [!NOTE]
>
> This guide is currently React only.

## Summary

At Dynamic, we make it incredibly simple to add a Fiat onramp solution to your SDK integration. We are currently working with [Coinbase](https://www.coinbase.com/en-gb/developer-platform/products/onramp), [Banxa](https://banxa.com/), [Crypto.com](https://crypto.com/), and [MoonPay](https://www.moonpay.com/). Other great onramp solutions will be made available soon.

> [!NOTE]
>
> Crypto.com is currently in limited beta. Please contact support if you're interested in early access.

> [!TIP]
>
> Before continuing, please make sure you're using the latest version of the Dynamic SDK packages.

## Enabling

To enable an onramp solution:

1. Go to [the Funding tab in your Dynamic Console](https://console.dynamic.xyz/dashboard/funding).
2. Under "Fiat on-ramps", toggle on whichever onramp you'd like to enable (add confirm any additional terms and conditions).

> [!NOTE]
>
> For Banxa, if you enable it on Sandbox, then you'll be using Test Order. Reference Banxa's test information so you can easily [test in sandbox.](https://docs.banxa.com/docs/order-flow)

You're done! In the Dynamic widget after logging in, users will now see a "Deposit" button that will open up the various deposit options, including those you've enabled.

![Default Onramp Experiences](https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-default-onramps.png?fit=max\&auto=format\&n=S0I4gBjjMnJYbuz8\&q=85\&s=1b434d72b91724d08f5400379acc190a)

## Trigger Onramp Using Your UI

The [useOnramp](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/useonramp.md) hook allows you to trigger the onramp flow from your own UI.

Notes: Ensure at least one Onramp is enabled in the Dynamic Console

Use the `useOnramp` hook to trigger the onramp flow from your own UI components:

```tsx React theme={"system"}
import { useOnramp } from '@dynamic-labs/sdk-react-core'

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

  return (
    <div>
      {enabled && (
        <button className="onramp-button" onClick={open}>
          Onramp
        </button>
      )}
    </div>
  )
}
```

## Custom UI Onramp Implementation

For developers looking to implement a custom UI version of the onramp feature, you can use the `useOnramp` hook to access provider information and build custom onramp flows. See the [useOnramp hook documentation](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/useonramp.md) for detailed examples and provider object structure.

## Related

* **[useOnramp](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/useonramp.md)** — Programmatic onramp triggering from your UI
* **[usePayWithDynamic](https://docs.dynamic.xyz/docs/react/reference/hooks/funding/usepaywithdynamic.md)** — Unified payment flow with all funding options

## Next Steps

To learn how to customize the experience, check out the [Customizing the Onramp Experience](https://docs.dynamic.xyz/docs/react/money-and-funding/customizing-the-onramp-experience.md) doc.

To learn what currencies and payment methods are supported by Coinbase onramp, check out the [Coinbase Onramp Supported Currencies](https://docs.dynamic.xyz/docs/react/money-and-funding/customizing-the-onramp-experience.md#coinbase-onramp-supported-currencies) and [Coinbase Onramp Supported Countries & Payment Methods](https://docs.dynamic.xyz/docs/react/money-and-funding/customizing-the-onramp-experience.md#coinbase-onramp-supported-countries-and-payment-methods) sections.

For detailed Crypto.com onramp integration, including payment tracking and custom UI implementation, see the [Crypto.com](https://docs.dynamic.xyz/docs/react/money-and-funding/fund-from-exchange/crypto-dot-com.md) documentation.

For MoonPay integration, including the headless `MoonPayOnramp` component and custom token selection, see the [MoonPay](https://docs.dynamic.xyz/docs/react/money-and-funding/moonpay.md) documentation.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.