> ## 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.
# Customizing the Onramp Experience
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.
## Introduction
If you're reading this, you've probably already followed the instructions in [Default Onramps](/react/money-and-funding/default-onramps) and have enabled at least one onramp.
Here we'll learn how to customize the experience further and bring your own.
Before continuing, please make sure you're using the latest version of the Dynamic SDK packages.
## OnrampOptions
Each onramp is represented by an `OnrampOption` object in the SDK, which has the following properties:
| Property | Type | Required | Default | Description |
| ----------------- | ------------------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `displayName` | string | Yes | - | The name of the onramp provider to be displayed in UI.
Example: "Coinbase" |
| `iconUrl` | string | Yes | - | The icon URL of the onramp provider to be displayed in UI.
Example: "[https://www.coinbase.com/assets/coinbase-logo-2020-09-09-1024x1024.png](https://www.coinbase.com/assets/coinbase-logo-2020-09-09-1024x1024.png)" |
| `id` | string | Yes | - | The id of the onramp provider, ideally based off its name.
Example: "coinbase" |
| `url` | string | No | - | The URL of the onramp provider. For iframe mode, this is displayed directly in the UI. For popup mode, this is opened in a new window when the provider is selected.
Example: "[https://widget.coinbase.com/iframe/onramp?apiKey=YOUR\_API\_KEY\&walletAddress=YOUR\_WALLET\_ADDRESS](https://widget.coinbase.com/iframe/onramp?apiKey=YOUR_API_KEY\&walletAddress=YOUR_WALLET_ADDRESS)" |
| `openMode` | 'iframe' \| 'popup' | No | 'iframe' | The display mode for the onramp provider.
'iframe' - The provider will be displayed in an iframe within the UI
'popup' - The provider will be opened in a new window when selected |
| `onClick` | function | Yes | - | The onClick handler for when the onramp provider is selected.
Signature: `({ wallet }: { wallet: Wallet }) => void` |
| `description` | string | No | - | The description of the onramp provider to be displayed in UI.
Example: "Buy crypto with a credit card" |
| `isPaymentMethod` | boolean | No | false | Whether the option is for a specific payment method within the onramp provider. If true, the SDK will display the option as a payment method in the UI. |
It's important to note that the `onClick` handler is not customizable, but rather it takes the current URL defined in the `url` field and opens it in a new window.
These onrampOptions are accessible via the `onrampOptions` prop in the `overrides` prop of the `DynamicContextProvider` component which provides the current options and allows you to return a new array of options.
```tsx React theme={"system"}
defaultOnrampOptions
}
}}>
```
## Customization Examples
### Example 1: Customizing the existing Coinbase Onramp URL
Let's say you want to customize the current Coinbase onramp URL to include a custom parameter. You can do this by simply returning the same array of onramp options but with the `url` field updated.
```tsx React theme={"system"}
const onrampOptions = (defaultOnrampOptions) => {
return defaultOnrampOptions.map((option) => {
if (option.id === "coinbaseOnramp") {
option.url = `${option.url}&customParam=123`;
}
return option;
});
};
```
### Example 2: Adding a payment method option
Taking Coinbase as an example, you'll see that there are [multiple payment methods available for the onramp](https://docs.cdp.coinbase.com/onramp/docs/api-onramp-initializing#onramp-url-parameters). You might want to give these options to the user in the widget.
In this case, you'll want to return a new array of onramp options with the `displayName` field set to the payment method name as well as the URL adapted to include the payment method parameter.
```tsx React theme={"system"}
const onrampOptions = (defaultOnrampOptions) => {
return defaultOnrampOptions.map((option) => {
if (option.id === "coinbaseOnramp") {
return {
...option,
displayName: "Credit Card",
id: "coinbaseOnrampCreditCard",
url: `${option.url}&defaultPaymentMethod=CARD`,
};
}
return option;
});
};
```
The result should look like this:
### Example 3: Bring Your Own Onramp
Instead of changing the existing onramp options, you can also add your own option, which can be as simple as this:
```tsx React theme={"system"}
const onrampOptions = (defaultOnrampOptions) => {
return [
...defaultOnrampOptions,
{
id: 'myNewOnramp',
url: 'https://dynamic.xyz',
displayName: 'My New Onramp',
iconUrl: 'https://my-company.com/icon.png',
openMode: 'popup',
},
];
};
```
The result should look like this:
## Coinbase Onramp Supported Countries and Payment Methods
Below is a comprehensive list of all countries and payment methods supported by Coinbase onramp. This information can help you understand the global reach and payment options available when setting up Coinbase onramp for your application.
You can also fetch the latest version of this list from the [Coinbase Onramp API](https://docs.cdp.coinbase.com/api-reference/rest-api/onramp-offramp/get-buy-config).
| Country | Country Code | Payment Methods |
| --------------------- | ------------ | ------------------------------------------------------------------- |
| Andorra | AD | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| United Arab Emirates | AE | CRYPTO\_ACCOUNT |
| Albania | AL | CRYPTO\_ACCOUNT |
| Armenia | AM | CRYPTO\_ACCOUNT |
| Angola | AO | CRYPTO\_ACCOUNT |
| Argentina | AR | CRYPTO\_ACCOUNT |
| Austria | AT | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Australia | AU | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Barbados | BB | CRYPTO\_ACCOUNT |
| Bangladesh | BD | CRYPTO\_ACCOUNT |
| Belgium | BE | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Burkina Faso | BF | CRYPTO\_ACCOUNT |
| Bulgaria | BG | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Bahrain | BH | CRYPTO\_ACCOUNT |
| Benin | BJ | CRYPTO\_ACCOUNT |
| Bolivia | BO | CRYPTO\_ACCOUNT |
| Brazil | BR | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Belarus | BY | CRYPTO\_ACCOUNT |
| Canada | CA | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Republic of the Congo | CG | CRYPTO\_ACCOUNT |
| Switzerland | CH | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Ivory Coast | CI | CRYPTO\_ACCOUNT |
| Chile | CL | CRYPTO\_ACCOUNT |
| Cameroon | CM | CRYPTO\_ACCOUNT |
| Colombia | CO | CRYPTO\_ACCOUNT |
| Costa Rica | CR | CRYPTO\_ACCOUNT |
| Cyprus | CY | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Czech Republic | CZ | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Germany | DE | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Denmark | DK | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Dominican Republic | DO | CRYPTO\_ACCOUNT |
| Algeria | DZ | CRYPTO\_ACCOUNT |
| Ecuador | EC | CRYPTO\_ACCOUNT |
| Estonia | EE | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Egypt | EG | CRYPTO\_ACCOUNT |
| Spain | ES | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Ethiopia | ET | CRYPTO\_ACCOUNT |
| Finland | FI | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| France | FR | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Gabon | GA | CRYPTO\_ACCOUNT |
| United Kingdom | GB | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Georgia | GE | CRYPTO\_ACCOUNT |
| Guernsey | GG | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Ghana | GH | CRYPTO\_ACCOUNT |
| Gibraltar | GI | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Greece | GR | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Guatemala | GT | CRYPTO\_ACCOUNT |
| Hong Kong | HK | CRYPTO\_ACCOUNT |
| Honduras | HN | CRYPTO\_ACCOUNT |
| Croatia | HR | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Haiti | HT | CRYPTO\_ACCOUNT |
| Hungary | HU | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Indonesia | ID | CRYPTO\_ACCOUNT |
| Ireland | IE | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Israel | IL | CRYPTO\_ACCOUNT |
| Isle of Man | IM | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| India | IN | CRYPTO\_ACCOUNT |
| Iceland | IS | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Italy | IT | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Jersey | JE | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Jamaica | JM | CRYPTO\_ACCOUNT |
| Japan | JP | CRYPTO\_ACCOUNT |
| Kenya | KE | CRYPTO\_ACCOUNT |
| Kyrgyzstan | KG | CRYPTO\_ACCOUNT |
| Cambodia | KH | CRYPTO\_ACCOUNT |
| South Korea | KR | CRYPTO\_ACCOUNT |
| Kuwait | KW | CRYPTO\_ACCOUNT |
| Cayman Islands | KY | CRYPTO\_ACCOUNT |
| Kazakhstan | KZ | CRYPTO\_ACCOUNT |
| Lebanon | LB | CRYPTO\_ACCOUNT |
| Saint Lucia | LC | CRYPTO\_ACCOUNT |
| Liechtenstein | LI | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Sri Lanka | LK | CRYPTO\_ACCOUNT |
| Lithuania | LT | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Luxembourg | LU | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Latvia | LV | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Morocco | MA | CRYPTO\_ACCOUNT |
| Monaco | MC | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Moldova | MD | CRYPTO\_ACCOUNT |
| North Macedonia | MK | CRYPTO\_ACCOUNT |
| Myanmar | MM | CRYPTO\_ACCOUNT |
| Mongolia | MN | CRYPTO\_ACCOUNT |
| Malta | MT | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Maldives | MV | CRYPTO\_ACCOUNT |
| Mexico | MX | CRYPTO\_ACCOUNT |
| Malaysia | MY | CRYPTO\_ACCOUNT |
| Mozambique | MZ | CRYPTO\_ACCOUNT |
| Niger | NE | CRYPTO\_ACCOUNT |
| Nigeria | NG | CRYPTO\_ACCOUNT |
| Nicaragua | NI | CRYPTO\_ACCOUNT |
| Netherlands | NL | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Norway | NO | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Nepal | NP | CRYPTO\_ACCOUNT |
| New Zealand | NZ | CARD, CRYPTO\_ACCOUNT |
| Panama | PA | CRYPTO\_ACCOUNT |
| Peru | PE | CRYPTO\_ACCOUNT |
| Philippines | PH | CRYPTO\_ACCOUNT |
| Pakistan | PK | CRYPTO\_ACCOUNT |
| Poland | PL | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Portugal | PT | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Paraguay | PY | CRYPTO\_ACCOUNT |
| Romania | RO | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Serbia | RS | CRYPTO\_ACCOUNT |
| Saudi Arabia | SA | CRYPTO\_ACCOUNT |
| Sudan | SD | CRYPTO\_ACCOUNT |
| Sweden | SE | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Singapore | SG | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Slovenia | SI | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Slovakia | SK | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| San Marino | SM | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET |
| Senegal | SN | CRYPTO\_ACCOUNT |
| El Salvador | SV | CRYPTO\_ACCOUNT |
| Togo | TG | CRYPTO\_ACCOUNT |
| Thailand | TH | CRYPTO\_ACCOUNT |
| Tunisia | TN | CRYPTO\_ACCOUNT |
| Turkey | TR | CRYPTO\_ACCOUNT |
| Trinidad and Tobago | TT | CRYPTO\_ACCOUNT |
| Taiwan | TW | CRYPTO\_ACCOUNT |
| Ukraine | UA | CRYPTO\_ACCOUNT |
| United States | US | CARD, CRYPTO\_ACCOUNT, FIAT\_WALLET, ACH\_BANK\_ACCOUNT, APPLE\_PAY |
| Vietnam | VN | CRYPTO\_ACCOUNT |
| South Africa | ZA | CRYPTO\_ACCOUNT |
### Payment Method Types
* **CARD**: Credit/debit card payments
* **CRYPTO\_ACCOUNT**: Payments from existing crypto accounts
* **FIAT\_WALLET**: Payments from fiat wallet balances
* **ACH\_BANK\_ACCOUNT**: Automated Clearing House bank transfers (US only)
* **APPLE\_PAY**: Apple Pay mobile payments (US only)
The United States has the most comprehensive payment method support, including all available payment types. Most European countries support CARD, CRYPTO\_ACCOUNT, and FIAT\_WALLET, while many other regions are limited to CRYPTO\_ACCOUNT only.
## Coinbase Onramp Supported Currencies
Each country has a list of supported assets/currencies that can be purchased. You can check this by calling the Coinbase Onramp API with the `countries` parameter (see the API reference [here](https://docs.cdp.coinbase.com/api-reference/rest-api/onramp-offramp/get-buy-options)).
## 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
* **[Crypto.com](/react/money-and-funding/fund-from-exchange/crypto-dot-com)** - Detailed Crypto.com onramp integration guide
* **[MoonPay](/react/money-and-funding/moonpay)** - Detailed MoonPay onramp integration guide