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

# Ramps

export const FeatureCardGrid = ({cols = 3, children}) => <div className={`not-prose feature-cards-grid feature-cards-cols-${cols}`}>
    {children}
  </div>;

export const FeatureCard = ({icon, title, children, href, linkHref, linkText, color, tag, tagPosition, layout, variant, iconSize}) => {
  const isHorizontal = layout === 'horizontal';
  const isFlat = variant === 'flat';
  const isLargeIcon = iconSize === 'lg';
  const isInlineTag = tagPosition === 'inline';
  const card = <div className={`feature-card ${href ? 'feature-card-link' : ''} ${!icon ? 'feature-card-no-icon' : ''} ${isHorizontal ? 'feature-card-horizontal' : ''} ${isFlat ? 'feature-card-flat' : ''} ${isLargeIcon ? 'feature-card-icon-lg' : ''}`}>
      {icon && <div className="feature-card-icon-wrapper">
          {color ? <div className="feature-card-icon" style={{
    WebkitMaskImage: `url(${icon})`,
    maskImage: `url(${icon})`,
    backgroundColor: color,
    width: '24px',
    height: '24px',
    WebkitMaskSize: 'contain',
    maskSize: 'contain',
    WebkitMaskRepeat: 'no-repeat',
    maskRepeat: 'no-repeat'
  }} /> : <img src={icon} alt="" className="feature-card-icon" />}
        </div>}
      <div className="feature-card-content">
        {isInlineTag ? <div className="feature-card-title-row">
            <span className="feature-card-title">{title}</span>
            {tag && <span className="feature-card-tag">{tag}</span>}
          </div> : <div className="feature-card-title">{title}</div>}
        <div className="feature-card-desc">{children}</div>
        {tag && !isInlineTag && <div className="feature-card-tag-row"><span className="feature-card-tag">{tag}</span></div>}
        {linkText && <div className="feature-card-link-row">
            {linkHref ? <a href={linkHref} className="feature-card-text-link" style={{
    color: color
  }}>
                {linkText}
              </a> : <span className="feature-card-text-link feature-card-coming-soon" style={{
    color: color,
    opacity: 0.6
  }}>
                {linkText}
              </span>}
          </div>}
      </div>
    </div>;
  return href ? <a href={href} className="feature-card-anchor">{card}</a> : card;
};

export const rampsProductName = "Grid";

export const topLevelProductName = "Grid";

<img src="https://mintcdn.com/ramps/hc9AVHNgWd4BcukA/images/heroes/hero-ramps.jpg?fit=max&auto=format&n=hc9AVHNgWd4BcukA&q=85&s=225c03f1cb351ba922209c6892e622ec" alt="Ramps hero" className="page-hero" width="1856" height="800" data-path="images/heroes/hero-ramps.jpg" />

With Grid, you can seamlessly convert between fiat currencies and cryptocurrencies through a single, simple API. The {topLevelProductName} automatically handles currency conversion, compliance, and instant settlement via the Lightning Network.

<FeatureCardGrid cols={3}>
  <FeatureCard icon="/images/icons/lightning.svg" title="Instant Conversion">
    Convert fiat to crypto (on-ramp) or crypto to fiat (off-ramp) in seconds using real-time exchange rates.
  </FeatureCard>

  <FeatureCard icon="/images/icons/shield.svg" title="Simplified Infrastructure">
    Grid handles the conversion and settlement process, reducing complexity in your crypto integration.
  </FeatureCard>

  <FeatureCard icon="/images/icons/globe.svg" title="Global Settlement">
    Leverages the Lightning Network for instant Bitcoin transfers and local banking rails for fiat settlement worldwide.
  </FeatureCard>
</FeatureCardGrid>

***

## How Ramps Work

<Steps>
  <Step title="Quote Creation">
    Get real-time exchange rates and payment instructions for your desired
    conversion (fiat → crypto or crypto → fiat).
  </Step>

  <Step title="Funding & Conversion">
    Fund the quote using the provided payment instructions. Grid executes the
    conversion at the quoted rate.
  </Step>

  <Step title="Settlement">
    Receive your converted funds via Lightning Network (for crypto) or local
    banking rails (for fiat) within seconds.
  </Step>
</Steps>

***

## {rampsProductName} Features

Users interact with {rampsProductName} through two main interfaces:

<Tabs>
  <Tab title="API">
    Programmatic access to create quotes, fund conversions, execute transfers,
    and reconcile all activity with real-time webhooks.
  </Tab>

  <Tab title="Dashboard">
    Your development and operations team can use the dashboard to monitor
    conversions, manage API keys and environments, and troubleshoot with
    detailed logs.
  </Tab>
</Tabs>

### On-Ramp: Fiat to Crypto

Convert fiat currency to cryptocurrency and deliver it to self-custody wallets.

* **Create quotes** to lock exchange rates for fiat-to-crypto conversions
* **Payment instructions** guide users on how to fund their conversion
* **Instant delivery** to Spark wallets or other supported crypto destinations
* **Webhook notifications** confirm successful conversion and delivery

### Off-Ramp: Crypto to Fiat

Convert cryptocurrency to fiat currency and deliver it to bank accounts.

* **Pre-funded accounts** hold crypto balances for conversion
* **Real-time rates** for crypto-to-fiat exchange
* **Bank account delivery** via local payment rails
* **Compliance** handled automatically through Grid's infrastructure

### Funding Options

{rampsProductName} supports multiple funding models for on-ramps and off-ramps:

* **Just-in-time (JIT)**: Create a quote and fund it in real-time using payment instructions (ideal for on-ramps)
* **Pre-funded accounts**: Maintain balances in crypto or fiat and convert from those balances (ideal for off-ramps)

<Tip>
  You can mix funding models based on your use case. On-ramps typically use JIT
  funding, while off-ramps use pre-funded accounts.
</Tip>

### Environments

<Note>
  {rampsProductName} supports two environments: **Sandbox** and **Production**.

  The Sandbox mirrors production behavior, allowing you to test the full end-to-end flow—from creating quotes and simulating funding to executing conversions and receiving webhooks—without moving real funds.

  The Production environment uses live credentials and base URLs for real transactions once you're ready to launch.
</Note>

***

<FeatureCardGrid cols={1}>
  <FeatureCard icon="/images/icons/light-bulb.svg" title="Get Started" href="/ramps/quickstart">
    Ready to integrate {rampsProductName}? Check out our quickstart guide.
  </FeatureCard>
</FeatureCardGrid>