> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" href="/javascript/reference/react-quickstart" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

<Note>This guide is currently React only.</Note>

## 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.
</Note>

<Tip>
  Before continuing, please make sure you're using the latest version of the Dynamic SDK packages.
</Tip>

## Enabling

To enable an onramp solution:

1. Go to [the Funding tab in your Dynamic developer dashboard](https://app.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)
</Note>

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.

<Frame>
  <img src="https://mintcdn.com/dynamic-docs/S0I4gBjjMnJYbuz8/images/widget/widget-default-onramps.png?fit=max&auto=format&n=S0I4gBjjMnJYbuz8&q=85&s=1b434d72b91724d08f5400379acc190a" alt="Default Onramp Experiences" width="794" height="1136" data-path="images/widget/widget-default-onramps.png" />
</Frame>

## Trigger Onramp Using Your UI

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

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

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](/react/reference/hooks/funding/useonramp) for detailed examples and provider object structure.

## Related

* **[useOnramp](/react/reference/hooks/funding/useonramp)** - Programmatic onramp triggering from your UI
* **[usePayWithDynamic](/react/reference/hooks/funding/usepaywithdynamic)** - Unified payment flow with all funding options

## Next Steps

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

To learn what currencies and payment methods are supported by Coinbase onramp, check out the [Coinbase Onramp Supported Currencies](/react/money-and-funding/customizing-the-onramp-experience#coinbase-onramp-supported-currencies) and [Coinbase Onramp Supported Countries & Payment Methods](/react/money-and-funding/customizing-the-onramp-experience#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](/react/money-and-funding/fund-from-exchange/crypto-dot-com) documentation.

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