# Fiat On-ramp

<div align="left"><figure><img src="/files/TIocH0BpIsfaScyBnRO5" alt="" width="375"><figcaption></figcaption></figure></div>

### Common customisations via props

1. [Restrict allowed source currencies](#allowedcurrencies-optional)
2. [Restrict destination chains and destination assets](#alloweddestinationchains-optional)
3. [Set a default input amount, source currency destination chain or asset](#defaultvalues-optional)
4. [Get notified when input amount or any chain or assets is chosen change](#onfiatamountchange-optional)
5. [Get notified when an on-ramp transaction is completed](#ontxncomplete-optional)

### Props

#### `className` (optional)

Add classes to customise the styling

#### `title` (optional)

Use to set the title of tab.

Default Value - `"Buy"`

#### `sourceHeader`(optional)

Use to set custom text for source section header

Default Value - `"You pay"`

#### `destinationHeader`(optional)

Use to set custom text for destination section header

Default Value - `"You get"`

#### `showPoweredByBanner` (optional)

This is a boolean which toggles the visibility for the powered by text for the tab - `Powered by Leap and Kado`

Default Value - `false`

#### `defaultValues` (optional)

This is an object that contains the default values for the tab

* `sourceAmount`: input amount&#x20;
* `currency`: currency using which you want buy tokens
* `destinationChainId`: chainId of the destination chain
* `destinationAsset`: denom of destination asset

#### `allowedCurrencies` (optional)

Pass in an array of string where each string is a code representing the currency e.g USD, EUR INR

```javascript
const allowedCurrencies = ['USD', 'EUR', 'INR']
```

#### `allowedDestinationChains` (optional)

Pass in an array of objects with a `chainId` property set to the chains you want to display on the source side. You can also restrict the `denominations` for each chain.

```javascript
const allowedDestinationChains = [
    {
        chainId: 'cosmoshub-4',  // cosmos hub mainnet
        assetDenoms: [           // optional
            'uatom',
            'ibc/9A234CF0...',
            // and so on...
        ]
    },
]
```

#### `onTxnComplete` (optional)

This a callback which is fired when transaction completes

#### `onTxnInProgress` (optional)

This a callback which is fired when transaction is initiated

#### `onFiatAmountChange` (optional)

This a callback which is fired when input amount is changed

#### `onFiatCurrencyChange` (optional)

This a callback which is fired when currency is changed

#### `onDestinationChainChange` (optional)

This a callback which is fired when destination chain is changed

#### `onCryptoCurrencyChange` (optional)

This a callback which is fired when destination asset is changed


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.leapwallet.io/cosmos/elements/components/fiat-on-ramp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.