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

# Fiat On and Off-Ramps

> Enable crypto purchase and selling flows in your Para Modal implementation

export const Link = ({href, label}) => <a href={href} style={{
  display: "inline-block",
  position: "relative",
  color: "#000000",
  fontWeight: 600,
  cursor: "pointer",
  borderBottom: "none",
  textDecoration: "none"
}} onMouseEnter={e => {
  e.currentTarget.querySelector("#underline").style.height = "2px";
}} onMouseLeave={e => {
  e.currentTarget.querySelector("#underline").style.height = "1px";
}}>
    {label}
    <span id="underline" style={{
  position: "absolute",
  left: 0,
  bottom: 0,
  width: "100%",
  height: "1px",
  borderRadius: "2px",
  background: "linear-gradient(45deg, #FF4E00, #874AE3)",
  transition: "height 0.3s"
}}></span>

  </a>;

<Frame>
  <img width="350" src="https://mintcdn.com/getpara/ItjCWUwL47hhaKTT/images/v1/para-modal-onramps.png?fit=max&auto=format&n=ItjCWUwL47hhaKTT&q=85&s=51ed6dcbd8b089d5cd5991e300df38cd" alt="Para Modal with on-ramp and off-ramp options" data-path="images/v1/para-modal-onramps.png" />
</Frame>

Configure fiat on-ramp (buying crypto) and off-ramp (selling crypto) functionality in your Para Modal implementation
using <Link label="Stripe" href="https://docs.stripe.com/crypto" />, <Link label="MoonPay" href="https://www.moonpay.com/" />, and <Link label="Ramp" href="https://docs.ramp.network" /> providers. Enable seamless crypto transactions within your application.

## Setup On-Ramps

### Developer Portal Settings

To start configure your on-ramp and off-ramp settings in the <Link label="Para Developer Portal" href="https://developer.para.com" />. You can find the configuration settings under **Projects → API Key → Configuration**.

### On-Ramp Flows

Configure what options your users will see for on- or off-ramping of funds.

<Frame>
  <img width="500" src="https://mintcdn.com/getpara/ItjCWUwL47hhaKTT/images/v1/para-on-ramp-flows.png?fit=max&auto=format&n=ItjCWUwL47hhaKTT&q=85&s=8dcd35bc2cd4eaf500a99a7187eb18e5" alt="On-ramp flows configuration" data-path="images/v1/para-on-ramp-flows.png" />
</Frame>

### On-Ramp Configuration

#### On-Ramp Providers

Configure which providers to display in your modal. Providers are displayed in the order set, subject to asset
availability and wallet compatibility.

<Frame>
  <img width="500" src="https://mintcdn.com/getpara/ItjCWUwL47hhaKTT/images/v1/para-on-ramp.png?fit=max&auto=format&n=ItjCWUwL47hhaKTT&q=85&s=1f93e56d8f389735a7c495d1acc3d2fc" alt="On-ramp providers configuration" data-path="images/v1/para-on-ramp.png" />
</Frame>

#### On-Ramp Assets

Specify which assets to offer in your modal. Users will be limited to purchasing or selling only the configured assets
through enabled providers.

<Frame>
  <img width="500" src="https://mintcdn.com/getpara/ItjCWUwL47hhaKTT/images/v1/para-on-ramp-assets.png?fit=max&auto=format&n=ItjCWUwL47hhaKTT&q=85&s=3be6fc555e26726eebb3eb0da2163530" alt="On-ramp assets configuration" data-path="images/v1/para-on-ramp-assets.png" />
</Frame>

#### Default Values

Set the default asset and amount that will be pre-populated when users initiate crypto purchases or sales.

<Frame>
  <img width="500" src="https://mintcdn.com/getpara/ItjCWUwL47hhaKTT/images/v1/para-on-ramp-default-values.png?fit=max&auto=format&n=ItjCWUwL47hhaKTT&q=85&s=5fe6f58e5ec7a213251fa5c6d0bd4b5d" alt="On-ramp default values configuration" data-path="images/v1/para-on-ramp-default-values.png" />
</Frame>

### Modal Configuration

While in development or beta you can enable test mode for your on-ramp configuration. This will allow you to test the
on-ramp flow without making actual purchases.

<CodeGroup>
  ```tsx App.tsx theme={null}
  function App() {
  return ( <ParaModal {...otherProps} onRampTestMode={isDev} /> ); }
  ```
</CodeGroup>

## Provider Setup

Lastly Ramp and Stripe require additional setup to enable on-ramp and off-ramp functionality.

### Ramp Integration

Obtain a production Ramp API key and configure it in the Para Developer Portal. For detailed instructions, see the
[Ramp API Key Documentation](https://docs.ramp.network/api-keys).

### Stripe Integration

Add the required Stripe scripts to your application's HTML head:

```html index.html theme={null}
<head>
  <title>Your Application</title>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://crypto-js.stripe.com/crypto-onramp-outer.js"></script>
</head>
```

## Additional Resources

For more information, refer to the following resources:

* <Link label="Stripe Documentation" href="https://docs.stripe.com/crypto/" />
* <Link label="MoonPay Documentation" href="https://dev.moonpay.com/" />
* <Link label="Ramp Documentation" href="https://docs.ramp.network/" />
* <Link label="Para Developer Portal" href="https://developer.para.com" />