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

# Introduction

> Welcome to the HopNow API - A comprehensive money transfer platform with foreign exchange support

export const FeatureItem = ({imgSrc, title, list}) => {
  return <div className="feature-container">
      <div className="flex gap-2">
        <img className="m-0" src={`/image/${imgSrc}.svg`} />
        <h3 className="m-0 feature-title">{title}</h3>
      </div>
      <ul className="m-0 mt-2.5 space-y-2">
        {list?.map(item => <li className="feature-item m-0">{item}</li>)}
      </ul>
    </div>;
};

export const GradientHoverCard = ({children, direction = "vertical", title, iconName, href}) => <a className="gradient-hover-card-wrapper" href={href}>
    <div className="gradient-hover-card-inner">
      <div className="gradient-hover-card-inner__vertical-container">
        <img className="gradient-hover-card-inner_icon" src={`/image/${iconName}.svg`} />
        <p className="gradient-hover-card-title">{title}</p>
        <p className="gradient-hover-card-content">{children}</p>
      </div>
    </div>
  </a>;

<div className="introduction-main-bg" />

<div className="introduction-main mx-auto px-6">
  <h1 className="pt-16 introduction-main__title">Introduction</h1>
  <p className="font-normal introduction-main__description">Welcome to the HopNow API : A comprehensive money movement  platform with foreign exchange support</p>
  <h2 className="uppercase introduction-main__subtitle">What you can do</h2>

  <div className="introduction-quick-start mt-8">
    <CardGroup cols={2}>
      <GradientHoverCard iconName="execute-fx" title="Execute an FX trade" href="/fx/api-reference/fx/create-fx-quote">
        Lock in exchange rates and convert between currencies
      </GradientHoverCard>

      <GradientHoverCard iconName="create-virtual-account" title="Create a virtual account" href="/fx/api-reference/virtual-accounts/create-virtual-account">
        Issue local banking details to receive funds in multiple currencies
      </GradientHoverCard>

      <GradientHoverCard iconName="create-wallet" title="Create a wallet" href="/fx/api-reference/wallets/create-wallet">
        Generate crypto wallets and addresses for stablecoins
      </GradientHoverCard>

      <GradientHoverCard iconName="issue-payout" title="Issue a payout" href="/fx/api-reference/payouts/create-payout">
        Send money to beneficiaries worldwide with realtime tracking
      </GradientHoverCard>
    </CardGroup>
  </div>

  <h2 className="uppercase introduction-main__subtitle mt-6">key features</h2>

  <div className="introduction-features mt-8">
    <CardGroup cols={3}>
      <FeatureItem
        title="Security"
        imgSrc="security"
        list={[
'HMAC Auth',
'API Keys',
'Compliance'
]}
      />

      <FeatureItem
        title="Global"
        imgSrc="global"
        list={[
'100+ Currencies',
'Virtual Accounts',
'Crypto'
]}
      />

      <FeatureItem
        title="Developer"
        imgSrc="developer"
        list={[
'RESTful API',
'Webhooks',
'Docs'
]}
      />
    </CardGroup>
  </div>

  <h2 className="uppercase introduction-main__subtitle base-url-title">base urls</h2>

  <div className="mt-3 base-url-tab">
    <Tabs>
      <Tab title="Sandbox">
        <ul className="introduction-main__env-container space-y-3">
          <li className="introduction-main__url">`https://api.sbx.hopnow.io`</li>
          <li>Rate limits and fake funds for safe experimentation</li>
          <li>Matches production behavior, including HMAC auth and webhook flows</li>
        </ul>
      </Tab>

      <Tab title="Production">
        <ul className="introduction-main__env-container space-y-3">
          <li className="introduction-main__url">`https://api.hopnow.io`</li>
          <li>Hardened infrastructure with multi-region failover</li>
          <li>Separate API keys and webhooks from sandbox</li>
        </ul>
      </Tab>
    </Tabs>
  </div>

  <div className="api-versioning-section space-y-6">
    <h2 className="uppercase introduction-main__subtitle mt-0">api versioning</h2>
    <p>The current API version is `v1`. All endpoints are prefixed with `/v1/`</p>

    ```
    GET https://api.hopnow.io/v1/customers/{customer_id}/accounts
    ```
  </div>

  <div className="getting-start-section">
    <h2 className="uppercase introduction-main__subtitle mt-0">getting started</h2>

    <a className="mt-6 block flex items-center gap-3" href="/fx/webhooks/overview">
      <span className="font-bold text-xl">Quick Start Guide</span>

      <Icon color="#1A1A2E" size={14} icon="arrow-right" />
    </a>
  </div>

  <div className="introduction-divider" />

  <div className="support-card flex items-center gap-4">
    <img src="https://mintcdn.com/hopinnovationsinc/6nUQ1_LYopXKNJTR/image/support.svg?fit=max&auto=format&n=6nUQ1_LYopXKNJTR&q=85&s=9bf575e9cea6d765522b8798c185c18f" width={48} height={48} data-path="image/support.svg" />

    <div className="flex-1">
      <h3 className="support-card-title font-semibold">
        Need help with integration?
      </h3>

      <p className="text-sm">Our team is here to support you 24/7/365</p>
    </div>

    <a className="support-btn flex items-center gap-1" href="mailto:support@hopnow.io">
      <span className="font-semibold">Contact Support</span>

      <Icon color="white" size={14} icon="arrow-right" />
    </a>
  </div>
</div>