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

# MoonPay Developer Docs

> MoonPay lets you add fiat-to-crypto to your product without rebuilding payments, KYC, and compliance. Pick how much of the checkout you want to own.

<style>
  {`
    @keyframes mp-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
    @keyframes mp-line-grow { 0%, 100% { width: 32%; opacity: 0.7 } 50% { width: 68%; opacity: 1 } }
    @keyframes mp-shimmer { 0%, 100% { opacity: 0.6 } 50% { opacity: 1 } }
    .mp-cursor { animation: mp-blink 1.1s steps(1) infinite }
    .mp-typing { animation: mp-line-grow 4.2s cubic-bezier(0.16, 1, 0.3, 1) infinite }
    .mp-shimmer { animation: mp-shimmer 3.6s ease-in-out infinite }
    .group:hover .mp-cursor { animation-duration: 0.55s }
    @media (prefers-reduced-motion: reduce) {
      .mp-cursor, .mp-typing, .mp-shimmer { animation: none }
    }
    `}
</style>

<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-5 mt-2">
  <a href="/widget" className="group block rounded-2xl border border-zinc-200 bg-transparent p-6 no-underline transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-xl hover:shadow-zinc-900/5 dark:border-white/10 dark:hover:border-white/25 dark:hover:shadow-[#903DD9]/5">
    <div className="mb-5 flex h-[14rem] flex-col overflow-hidden rounded-lg border border-zinc-200/70 bg-white transition-transform duration-300 ease-out group-hover:scale-[1.015] dark:border-white/10 dark:bg-zinc-950">
      <div className="flex shrink-0 items-center gap-1.5 border-b border-zinc-200/70 bg-zinc-50 px-3 py-2 dark:border-white/5 dark:bg-zinc-900">
        <span className="inline-block h-2.5 w-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />

        <span className="inline-block h-2.5 w-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />

        <span className="inline-block h-2.5 w-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />

        <span className="ml-2 truncate text-[0.7rem] text-zinc-500 dark:text-zinc-400">
          buy.moonpay.com
        </span>
      </div>

      <div className="flex flex-1 flex-col gap-2.5 p-4">
        <div className="flex shrink-0 gap-1.5">
          <div className="h-5 w-12 rounded-md bg-[#903DD9]/25 dark:bg-[#A473EE]/30" />

          <div className="h-5 w-12 rounded-md bg-zinc-200 dark:bg-white/10" />
        </div>

        <div className="flex h-10 shrink-0 items-center justify-between rounded-md border border-zinc-200/70 px-3 dark:border-white/10">
          <span className="font-mono text-xs text-zinc-700 dark:text-zinc-200">100.00</span>

          <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[0.65rem] font-medium text-zinc-700 dark:bg-white/10 dark:text-zinc-200">
            USD
          </span>
        </div>

        <div className="flex h-10 shrink-0 items-center justify-between rounded-md border border-zinc-200/70 px-3 dark:border-white/10">
          <span className="font-mono text-xs text-zinc-500 dark:text-zinc-400">0.0234</span>

          <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[0.65rem] font-medium text-zinc-700 dark:bg-white/10 dark:text-zinc-200">
            ETH
          </span>
        </div>

        <div className="h-8 shrink-0 rounded-md bg-[#903DD9]/90 mp-shimmer transition-[filter,transform] duration-300 ease-out group-hover:brightness-110 group-hover:saturate-150" />
      </div>
    </div>

    <div className="m-0 text-2xl font-bold text-zinc-900 dark:text-white">
      Hosted
    </div>

    <div className="mt-1 text-sm font-medium text-[#7A2EBA] dark:text-[#BBA1FF]">
      Simpler to integrate.
    </div>

    <p className="mt-3 mb-5 text-zinc-600 dark:text-zinc-400">
      A hosted on-ramp and off-ramp you embed in your app. MoonPay runs the KYC, payments, and UI.
    </p>

    <dl className="grid gap-2 text-sm">
      <div className="flex justify-between border-t border-zinc-200/60 pt-2 dark:border-white/5">
        <dt className="text-zinc-500 dark:text-zinc-500">Time to ship</dt>
        <dd className="m-0 text-zinc-900 dark:text-zinc-200">Hours</dd>
      </div>

      <div className="flex justify-between border-t border-zinc-200/60 pt-2 dark:border-white/5">
        <dt className="text-zinc-500 dark:text-zinc-500">UI</dt>
        <dd className="m-0 text-zinc-900 dark:text-zinc-200">MoonPay-hosted, themed</dd>
      </div>

      <div className="flex justify-between border-t border-zinc-200/60 pt-2 dark:border-white/5">
        <dt className="text-zinc-500 dark:text-zinc-500">Best for</dt>
        <dd className="m-0 text-zinc-900 dark:text-zinc-200">Wallets, apps, sites</dd>
      </div>
    </dl>
  </a>

  <a href="/platform" className="group block rounded-2xl border border-zinc-200 bg-transparent p-6 no-underline transition-all duration-300 ease-out hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-xl hover:shadow-zinc-900/5 dark:border-white/10 dark:hover:border-white/25 dark:hover:shadow-[#903DD9]/5">
    <div className="mb-5 flex h-[14rem] flex-col overflow-hidden rounded-lg border border-zinc-200/70 bg-white transition-transform duration-300 ease-out group-hover:scale-[1.015] dark:border-white/10 dark:bg-zinc-950">
      <div className="flex shrink-0 items-center gap-1.5 border-b border-zinc-200/70 bg-zinc-50 px-3 py-2 dark:border-white/5 dark:bg-zinc-900">
        <span className="inline-block h-2.5 w-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />

        <span className="inline-block h-2.5 w-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />

        <span className="inline-block h-2.5 w-2.5 rounded-full bg-zinc-300 dark:bg-zinc-700" />

        <span className="ml-2 rounded-sm bg-zinc-200/80 px-2 py-0.5 text-[0.7rem] text-zinc-700 dark:bg-white/10 dark:text-zinc-200">
          checkout.tsx
        </span>
      </div>

      <div className="flex flex-1 p-4 font-mono text-xs">
        <div className="mr-4 flex shrink-0 select-none flex-col gap-2 text-zinc-400 dark:text-zinc-600">
          <span>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
          <span>6</span>
          <span>7</span>
        </div>

        <div className="flex w-full flex-col gap-2">
          <div className="flex items-center gap-1.5">
            <div className="h-3 w-10 rounded-sm bg-[#903DD9]/40" />

            <div className="h-3 w-20 rounded-sm bg-zinc-300 dark:bg-zinc-700" />

            <div className="h-3 w-8 rounded-sm bg-[#903DD9]/40" />

            <div className="h-3 w-16 rounded-sm bg-emerald-500/40" />
          </div>

          <div className="flex items-center gap-1.5">
            <div className="h-3 w-10 rounded-sm bg-[#903DD9]/40" />

            <div className="h-3 w-14 rounded-sm bg-zinc-300 dark:bg-zinc-700" />

            <div className="h-3 w-8 rounded-sm bg-[#903DD9]/40" />

            <div className="h-3 w-20 rounded-sm bg-emerald-500/40" />
          </div>

          <div className="h-3" />

          <div className="flex items-center gap-1.5">
            <div className="h-3 w-8 rounded-sm bg-[#903DD9]/40" />

            <div className="h-3 w-16 rounded-sm bg-zinc-300 dark:bg-zinc-700" />

            <div className="h-3 w-2 rounded-sm bg-zinc-400 dark:bg-zinc-500" />

            <div className="h-3 w-24 rounded-sm bg-orange-400/40" />
          </div>

          <div className="ml-4 flex items-center gap-1.5">
            <div className="h-3 w-12 rounded-sm bg-zinc-300 dark:bg-zinc-700" />

            <div className="h-3 rounded-sm bg-emerald-500/40 mp-typing" />
          </div>

          <div className="ml-4 flex items-center gap-1.5">
            <div className="h-3 w-14 rounded-sm bg-zinc-300 dark:bg-zinc-700" />

            <div className="h-3 w-3 rounded-sm bg-zinc-400 dark:bg-zinc-500" />

            <div className="h-3 w-20 rounded-sm bg-orange-400/40" />

            <span className="inline-block h-3.5 w-[2px] bg-[#903DD9] mp-cursor dark:bg-[#BBA1FF]" />
          </div>

          <div className="flex items-center gap-1.5">
            <div className="h-3 w-3 rounded-sm bg-zinc-300 dark:bg-zinc-700" />
          </div>
        </div>
      </div>
    </div>

    <div className="m-0 text-2xl font-bold text-zinc-900 dark:text-white">
      Developer Platform
    </div>

    <div className="mt-1 text-sm font-medium text-[#7A2EBA] dark:text-[#BBA1FF]">
      More flexible to build.
    </div>

    <p className="mt-3 mb-5 text-zinc-600 dark:text-zinc-400">
      Build your own on-ramp and off-ramp on MoonPay's APIs and SDKs. Your UI, your flow, our rails.
    </p>

    <dl className="grid gap-2 text-sm">
      <div className="flex justify-between border-t border-zinc-200/60 pt-2 dark:border-white/5">
        <dt className="text-zinc-500 dark:text-zinc-500">Time to ship</dt>
        <dd className="m-0 text-zinc-900 dark:text-zinc-200">Weeks</dd>
      </div>

      <div className="flex justify-between border-t border-zinc-200/60 pt-2 dark:border-white/5">
        <dt className="text-zinc-500 dark:text-zinc-500">UI</dt>
        <dd className="m-0 text-zinc-900 dark:text-zinc-200">Yours, end to end</dd>
      </div>

      <div className="flex justify-between border-t border-zinc-200/60 pt-2 dark:border-white/5">
        <dt className="text-zinc-500 dark:text-zinc-500">Best for</dt>
        <dd className="m-0 text-zinc-900 dark:text-zinc-200">Exchanges, fintechs</dd>
      </div>
    </dl>
  </a>
</div>

<Note>
  Both paths need API credentials. [Get keys in the partner
  dashboard](https://dashboard.moonpay.com/).
</Note>

<div className="not-prose mt-16">
  <div className="mb-6 flex items-baseline justify-between border-b border-zinc-200 pb-3 dark:border-white/10">
    <div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
      What you can build
    </div>

    <div className="font-mono text-[0.7rem] uppercase tracking-[0.12em] text-zinc-400 dark:text-zinc-600">
      04 paths
    </div>
  </div>

  <div>
    <div className="group flex items-start gap-5 border-b border-zinc-200 py-6 sm:gap-8 dark:border-white/10">
      <span aria-hidden className="shrink-0 pt-1 font-mono text-4xl font-extralight leading-none tabular-nums text-[#903DD9]/25 transition-colors duration-300 ease-out group-hover:text-[#903DD9]/70 sm:text-5xl dark:text-[#BBA1FF]/20 dark:group-hover:text-[#BBA1FF]/70">
        01
      </span>

      <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
        <span className="flex flex-col">
          <span className="text-lg font-semibold text-zinc-900 dark:text-white">
            Buy crypto with fiat
          </span>

          <span className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            On-ramp with cards, Apple Pay, and local payment methods.
          </span>
        </span>

        <span className="flex shrink-0 items-center gap-2 sm:pt-2">
          <a href="/widget/on-ramp/overview" className="text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-[#7A2EBA] no-underline transition-colors hover:text-[#903DD9] dark:text-[#BBA1FF] dark:hover:text-[#CAB5FF]">
            Hosted →
          </a>

          <span aria-hidden className="text-zinc-300 dark:text-zinc-700">
            ·
          </span>

          <a href="/platform/overview/introduction" className="text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-[#7A2EBA] no-underline transition-colors hover:text-[#903DD9] dark:text-[#BBA1FF] dark:hover:text-[#CAB5FF]">
            Platform →
          </a>
        </span>
      </div>
    </div>

    <div className="group flex items-start gap-5 border-b border-zinc-200 py-6 sm:gap-8 dark:border-white/10">
      <span aria-hidden className="shrink-0 pt-1 font-mono text-4xl font-extralight leading-none tabular-nums text-[#903DD9]/25 transition-colors duration-300 ease-out group-hover:text-[#903DD9]/70 sm:text-5xl dark:text-[#BBA1FF]/20 dark:group-hover:text-[#BBA1FF]/70">
        02
      </span>

      <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
        <span className="flex flex-col">
          <span className="text-lg font-semibold text-zinc-900 dark:text-white">
            Sell crypto for fiat
          </span>

          <span className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            Off-ramp back to bank accounts and local payout methods.
          </span>
        </span>

        <span className="flex shrink-0 items-center gap-2 sm:pt-2">
          <a href="/widget/off-ramp/overview" className="text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-[#7A2EBA] no-underline transition-colors hover:text-[#903DD9] dark:text-[#BBA1FF] dark:hover:text-[#CAB5FF]">
            Hosted →
          </a>
        </span>
      </div>
    </div>

    <div className="group flex items-start gap-5 border-b border-zinc-200 py-6 sm:gap-8 dark:border-white/10">
      <span aria-hidden className="shrink-0 pt-1 font-mono text-4xl font-extralight leading-none tabular-nums text-[#903DD9]/25 transition-colors duration-300 ease-out group-hover:text-[#903DD9]/70 sm:text-5xl dark:text-[#BBA1FF]/20 dark:group-hover:text-[#BBA1FF]/70">
        03
      </span>

      <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
        <span className="flex flex-col">
          <span className="text-lg font-semibold text-zinc-900 dark:text-white">
            Connect existing MoonPay users
          </span>

          <span className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            Skip re-onboarding. Plug into the existing MoonPay account base.
          </span>
        </span>

        <span className="flex shrink-0 items-center gap-2 sm:pt-2">
          <a href="/platform/guides/connect-a-customer" className="text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-[#7A2EBA] no-underline transition-colors hover:text-[#903DD9] dark:text-[#BBA1FF] dark:hover:text-[#CAB5FF]">
            Platform →
          </a>
        </span>
      </div>
    </div>

    <div className="group flex items-start gap-5 border-b border-zinc-200 py-6 sm:gap-8 dark:border-white/10">
      <span aria-hidden className="shrink-0 pt-1 font-mono text-4xl font-extralight leading-none tabular-nums text-[#903DD9]/25 transition-colors duration-300 ease-out group-hover:text-[#903DD9]/70 sm:text-5xl dark:text-[#BBA1FF]/20 dark:group-hover:text-[#BBA1FF]/70">
        04
      </span>

      <div className="flex flex-1 flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-6">
        <span className="flex flex-col">
          <span className="text-lg font-semibold text-zinc-900 dark:text-white">
            Embed payment and onboarding frames
          </span>

          <span className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
            Co-branded UI components on top of headless APIs.
          </span>
        </span>

        <span className="flex shrink-0 items-center gap-2 sm:pt-2">
          <a href="/platform/frames/overview" className="text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-[#7A2EBA] no-underline transition-colors hover:text-[#903DD9] dark:text-[#BBA1FF] dark:hover:text-[#CAB5FF]">
            Platform →
          </a>
        </span>
      </div>
    </div>
  </div>
</div>

<div className="not-prose mt-16 border-t border-zinc-200 pt-8 dark:border-white/10">
  <div className="mb-5 text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">
    Trusted by
  </div>

  <div className="flex flex-wrap items-baseline gap-x-5 gap-y-3 text-xl font-medium text-zinc-800 dark:text-zinc-200">
    <span>Metamask</span>
    <span aria-hidden className="text-zinc-300 dark:text-zinc-700">·</span>
    <span>Trust Wallet</span>
    <span aria-hidden className="text-zinc-300 dark:text-zinc-700">·</span>
    <span>Ledger</span>
    <span aria-hidden className="text-zinc-300 dark:text-zinc-700">·</span>
    <span>OpenSea</span>
    <span aria-hidden className="text-zinc-300 dark:text-zinc-700">·</span>
    <span>Phantom</span>
    <span aria-hidden className="text-zinc-300 dark:text-zinc-700">·</span>
    <span className="text-zinc-400 dark:text-zinc-500">and 500+ more</span>
  </div>

  <div className="mt-10 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
    <span>Stuck?</span>

    <a href="https://support.moonpay.com/" target="_blank" rel="noreferrer noopener" className="text-zinc-700 no-underline transition-colors hover:text-[#903DD9] dark:text-zinc-200 dark:hover:text-[#BBA1FF]">
      Support
    </a>

    <span aria-hidden className="text-zinc-300 dark:text-zinc-700">·</span>

    <a href="https://status.moonpay.com/" target="_blank" rel="noreferrer noopener" className="text-zinc-700 no-underline transition-colors hover:text-[#903DD9] dark:text-zinc-200 dark:hover:text-[#BBA1FF]">
      Status
    </a>
  </div>
</div>