> For the complete documentation index, see [llms.txt](https://docs.leapwallet.io/cosmos/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.leapwallet.io/cosmos/elements/components/fiat-on-ramp.md).

# 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