> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-60c89f9a-mintlify-audit-missing-sections-1778528421.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Razorpay Documentation

> Build with Razorpay — accept payments, send payouts, manage subscriptions, and run your business on India's leading payments and banking platform.

<div role="banner" className="w-full bg-white dark:bg-[#02042B] border-b border-[#e5eaf0] dark:border-white/10">
  <div className="mx-auto max-w-7xl flex items-center justify-between px-4 sm:px-6 lg:px-8 h-16">
    <a href="/" className="flex items-center gap-3 no-underline">
      <img src="https://mintcdn.com/razorpay-60c89f9a-mintlify-audit-missing-sections-1778528421/BGanYtiDSXlIREoy/logo/razorpay-light.svg?fit=max&auto=format&n=BGanYtiDSXlIREoy&q=85&s=3cad8761f314fdae3f3e694d685eff49" alt="Razorpay" className="block dark:hidden h-7 w-auto" noZoom width="140" height="30" data-path="logo/razorpay-light.svg" />

      <img src="https://mintcdn.com/razorpay-60c89f9a-mintlify-audit-missing-sections-1778528421/BGanYtiDSXlIREoy/logo/razorpay-dark.svg?fit=max&auto=format&n=BGanYtiDSXlIREoy&q=85&s=9b2fcec5abd0168e131d3c09c7106f7a" alt="Razorpay" className="hidden dark:block h-7 w-auto" noZoom width="140" height="30" data-path="logo/razorpay-dark.svg" />

      <span className="hidden sm:inline-block text-sm font-medium text-[#475569] dark:text-[#94a3b8] border-l border-[#e5eaf0] dark:border-white/10 pl-3 ml-1">
        Docs
      </span>
    </a>

    <div className="hidden md:flex items-center gap-7 text-sm font-medium text-[#475569] dark:text-[#cbd5e1]">
      <a href="/quickstart" className="hover:text-[#3395FF] no-underline">Quickstart</a>
      <a href="/payments" className="hover:text-[#3395FF] no-underline">Payments</a>
      <a href="/api-reference/introduction" className="hover:text-[#3395FF] no-underline">API Reference</a>
      <a href="/developer-tools" className="hover:text-[#3395FF] no-underline">Developer Tools</a>
    </div>

    <div className="flex items-center gap-2 sm:gap-3">
      <a href="https://razorpay.com/support/" className="hidden sm:inline-flex items-center text-sm font-medium text-[#475569] dark:text-[#cbd5e1] hover:text-[#3395FF] no-underline">
        Support
      </a>

      <a href="https://dashboard.razorpay.com/signin" className="hidden sm:inline-flex items-center text-sm font-medium text-[#0c244c] dark:text-white hover:text-[#3395FF] dark:hover:text-[#3395FF] no-underline">
        Log in
      </a>

      <a href="https://dashboard.razorpay.com/signup" className="inline-flex items-center justify-center rounded-full bg-[#3395FF] px-4 py-2 text-sm font-semibold text-white hover:bg-[#1d7ce6] transition-colors no-underline">
        Sign up
      </a>
    </div>
  </div>
</div>

<section className="relative overflow-hidden bg-gradient-to-br from-[#02042B] via-[#081B4B] to-[#0C2451] text-white">
  <div className="absolute inset-0 opacity-30 pointer-events-none">
    <svg className="absolute -top-32 -right-24 w-[640px] h-[640px] text-[#3395FF]" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true">
      <path d="M100 0a100 100 0 1 0 0 200 100 100 0 0 0 0-200zm0 32a68 68 0 1 1 0 136 68 68 0 0 1 0-136z" />
    </svg>

    <svg className="absolute -bottom-40 -left-32 w-[520px] h-[520px] text-[#3395FF]/60" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true">
      <path d="M100 20a80 80 0 1 0 0 160 80 80 0 0 0 0-160zm0 24a56 56 0 1 1 0 112 56 56 0 0 1 0-112z" />
    </svg>
  </div>

  <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
    <div className="grid lg:grid-cols-2 gap-12 items-center">
      <div>
        <span className="inline-flex items-center gap-2 rounded-full bg-white/10 backdrop-blur px-3 py-1 text-xs font-semibold text-[#93c5fd] uppercase tracking-wider">
          <span className="w-1.5 h-1.5 rounded-full bg-[#3395FF]" />

          Razorpay Documentation
        </span>

        <h1 className="mt-6 text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight tracking-tight text-white">
          Build payments<br className="hidden sm:block" /> the Razorpay way
        </h1>

        <p className="mt-6 text-lg lg:text-xl text-[#cbd5e1] max-w-xl leading-relaxed">
          Accept, process, and disburse payments with one platform. Integrate the Payment Gateway, generate Payment Links, automate subscriptions, and scale to millions of transactions.
        </p>

        <div className="mt-9 flex flex-wrap gap-3">
          <a href="/quickstart" className="inline-flex items-center gap-2 rounded-full bg-[#3395FF] px-6 py-3 text-base font-semibold text-white hover:bg-[#1d7ce6] transition-colors no-underline shadow-lg shadow-[#3395FF]/20">
            Get started

            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>

          <a href="/api-reference/introduction" className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/5 backdrop-blur px-6 py-3 text-base font-semibold text-white hover:bg-white/10 transition-colors no-underline">
            Explore the API
          </a>
        </div>

        <div className="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3 text-sm text-[#94a3b8]">
          <div className="flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#3395FF]" style={{flexShrink: 0}}>
              <path d="M9 12l2 2 4-4m7 2a10 10 0 1 1-20 0 10 10 0 0 1 20 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            8 million+ businesses
          </div>

          <div className="flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#3395FF]" style={{flexShrink: 0}}>
              <path d="M9 12l2 2 4-4m7 2a10 10 0 1 1-20 0 10 10 0 0 1 20 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            100+ payment modes
          </div>

          <div className="flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#3395FF]" style={{flexShrink: 0}}>
              <path d="M9 12l2 2 4-4m7 2a10 10 0 1 1-20 0 10 10 0 0 1 20 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            PCI DSS compliant
          </div>
        </div>
      </div>

      <div className="relative">
        <div className="absolute -inset-4 rounded-2xl bg-gradient-to-r from-[#3395FF]/30 to-[#1d4ed8]/30 blur-2xl pointer-events-none" />

        <div className="relative rounded-2xl border border-white/10 bg-[#0a0e2e]/80 backdrop-blur shadow-2xl overflow-hidden">
          <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
            <span className="w-3 h-3 rounded-full bg-[#ff5f57]" />

            <span className="w-3 h-3 rounded-full bg-[#febc2e]" />

            <span className="w-3 h-3 rounded-full bg-[#28c840]" />

            <span className="ml-3 text-xs text-[#64748b] font-mono">create-order.js</span>
          </div>

          <pre className="p-5 text-sm leading-relaxed font-mono overflow-x-auto m-0 bg-transparent border-0">
            <code className="bg-transparent p-0 text-[#e2e8f0] whitespace-pre">
              <span><span className="text-[#ff7b9b]">const</span> <span className="text-[#7dd3fc]">Razorpay</span> = <span className="text-[#fde047]">require</span>(<span className="text-[#a7f3d0]">'razorpay'</span>);</span>{"\n\n"}
              <span><span className="text-[#ff7b9b]">const</span> client = <span className="text-[#ff7b9b]">new</span> <span className="text-[#7dd3fc]">Razorpay</span>({`{`}</span>{"\n"}
              <span>  <span className="text-[#93c5fd]">key\_id</span>: <span className="text-[#a7f3d0]">{`'rzp_test_••••••••'`}</span>,</span>{"\n"}
              <span>  <span className="text-[#93c5fd]">key\_secret</span>: process.<span className="text-[#fde047]">env</span>.<span className="text-[#93c5fd]">RZP\_SECRET</span>,</span>{"\n"}

              <span>
                {`});`}
              </span>

              {"\n\n"}

              <span><span className="text-[#ff7b9b]">const</span> order = <span className="text-[#ff7b9b]">await</span> client.<span className="text-[#fde047]">orders</span>.<span className="text-[#fde047]">create</span>({`{`}</span>{"\n"}
              <span>  <span className="text-[#93c5fd]">amount</span>: <span className="text-[#fdba74]">50000</span>,        <span className="text-[#64748b] italic">{`// ₹500.00 in paise`}</span></span>{"\n"}
              <span>  <span className="text-[#93c5fd]">currency</span>: <span className="text-[#a7f3d0]">{`'INR'`}</span>,</span>{"\n"}
              <span>  <span className="text-[#93c5fd]">receipt</span>: <span className="text-[#a7f3d0]">{`'rcpt_001'`}</span>,</span>{"\n"}

              <span>
                {`});`}
              </span>

              {"\n\n"}

              <span>console.<span className="text-[#fde047]">log</span>(order.<span className="text-[#93c5fd]">id</span>);</span>{"\n"}

              <span className="text-[#64748b] italic">
                {`// → order_IluGWxBm9U8zJ8`}
              </span>
            </code>
          </pre>
        </div>
      </div>
    </div>
  </div>
</section>

<div className="bg-white dark:bg-[#02042B] border-b border-[#e5eaf0] dark:border-white/10">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
    <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
      <div>
        <p className="text-xs font-semibold uppercase tracking-wider text-[#3395FF]">Start integrating</p>

        <h2 className="mt-2 text-xl sm:text-2xl font-bold text-[#0c244c] dark:text-white">
          Pick the integration that fits your stack
        </h2>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 lg:gap-4 lg:flex-1 lg:max-w-3xl">
        <a href="/payment-gateway/web-integration" className="group flex items-center gap-3 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 px-4 py-3 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7zm0 4h18M8 19v-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>

          <div>
            <div className="text-sm font-semibold text-[#0c244c] dark:text-white">Web</div>
            <div className="text-xs text-[#64748b] dark:text-[#94a3b8]">Standard Checkout</div>
          </div>
        </a>

        <a href="/payment-gateway/ios-integration" className="group flex items-center gap-3 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 px-4 py-3 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M16.5 2c0 1.5-.6 2.7-1.5 3.5-.9.9-2.3 1.6-3.5 1.5 0-1.4.7-2.7 1.5-3.5.9-.8 2.3-1.5 3.5-1.5zm3.7 17.5c-.7 1-1.4 2-2.6 2.5-1.1.5-1.5.5-2.7.1-1.3-.5-2-.5-3.3 0-1.7.7-2.6.5-3.5 0-3-2.3-3.4-7.6-1.4-10.6.9-1.4 2.6-2.4 4.3-2.4 1.7 0 2.6.9 3.7.9 1.1 0 1.8-.9 4-.9 1.5 0 3 .8 4 2.2-3.5 2-3 6.7 1.5 8.2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>

          <div>
            <div className="text-sm font-semibold text-[#0c244c] dark:text-white">iOS</div>
            <div className="text-xs text-[#64748b] dark:text-[#94a3b8]">Native SDK</div>
          </div>
        </a>

        <a href="/payment-gateway/android-integration" className="group flex items-center gap-3 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 px-4 py-3 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M7 17V7h10v10H7zm-2-2h14m-7 4v2m0-18v2M3 8h2m14 0h2M3 16h2m14 0h2" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>

          <div>
            <div className="text-sm font-semibold text-[#0c244c] dark:text-white">Android</div>
            <div className="text-xs text-[#64748b] dark:text-[#94a3b8]">Native SDK</div>
          </div>
        </a>

        <a href="/api-reference/introduction" className="group flex items-center gap-3 rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/5 px-4 py-3 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
              <path d="M8 9l-4 3 4 3m8-6l4 3-4 3M14 4l-4 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>

          <div className="flex-1">
            <div className="flex items-center gap-1.5 text-sm font-semibold text-[#0c244c] dark:text-white">
              API Playground
              <span className="rounded-full bg-[#3395FF]/15 px-1.5 py-0.5 text-[10px] font-bold uppercase text-[#3395FF]">Beta</span>
            </div>

            <div className="text-xs text-[#64748b] dark:text-[#94a3b8]">Try APIs live</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

<div className="bg-[#f8fafc] dark:bg-[#02042B]">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
    <div className="max-w-2xl">
      <h2 className="text-3xl sm:text-4xl font-bold text-[#0c244c] dark:text-white">Quick start</h2>

      <p className="mt-3 text-base text-[#475569] dark:text-[#cbd5e1]">
        Get from sign-up to your first payment in four steps. No KYC required to start building in Test Mode.
      </p>
    </div>

    <div className="mt-10">
      <Steps>
        <Step title="Create an account">
          [Sign up at the Razorpay Dashboard](https://dashboard.razorpay.com/signup) to start building immediately. Test Mode is available right away — no KYC needed.
        </Step>

        <Step title="Generate API keys">
          In the Dashboard, go to **Account & Settings → API Keys** and click **Generate Key**. Copy your `Key ID` and `Key Secret`.
        </Step>

        <Step title="Create your first order">
          Use the server-side SDK to create an order, then pass the `order_id` to your frontend.

          ```javascript theme={null}
          const Razorpay = require('razorpay');
          const client = new Razorpay({
            key_id: 'rzp_test_YOUR_KEY_ID',
            key_secret: 'YOUR_KEY_SECRET',
          });

          const order = await client.orders.create({
            amount: 50000,
            currency: 'INR',
            receipt: 'receipt_001',
          });
          ```
        </Step>

        <Step title="Go live">
          Complete KYC from the Dashboard, swap in your `rzp_live_` keys, and start accepting real payments.
        </Step>
      </Steps>
    </div>
  </div>
</div>

<div className="bg-white dark:bg-[#02042B]">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
    <div className="flex items-end justify-between flex-wrap gap-4">
      <div className="max-w-2xl">
        <p className="text-xs font-semibold uppercase tracking-wider text-[#3395FF]">Products</p>
        <h2 className="mt-2 text-3xl sm:text-4xl font-bold text-[#0c244c] dark:text-white">The Razorpay payments suite</h2>

        <p className="mt-3 text-base text-[#475569] dark:text-[#cbd5e1]">
          Everything you need to accept, process, and disburse payments — built for developers.
        </p>
      </div>

      <a href="/payments" className="inline-flex items-center gap-1.5 text-sm font-semibold text-[#3395FF] hover:text-[#1d7ce6] no-underline">
        Explore all products

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>

    <div className="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5">
      <a href="/payment-gateway/overview" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8zm0 3h18M7 15h2m3 0h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-bold text-[#0c244c] dark:text-white">Payment Gateway</h3>

        <p className="mt-2 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Accept payments on web and mobile with a single integration and 100+ payment methods.
        </p>

        <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-[#3395FF] group-hover:gap-2 transition-all">
          Integrate now

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>

      <a href="/payment-products/payment-links" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.5 1.5m-1 8a5 5 0 0 1-7.5-.5l-3 3a5 5 0 0 0 7 7l1.5-1.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-bold text-[#0c244c] dark:text-white">Payment Links</h3>

        <p className="mt-2 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Generate and share payment links via SMS, email, or WhatsApp — no website or code needed.
        </p>

        <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-[#3395FF] group-hover:gap-2 transition-all">
          Send a link

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>

      <a href="/payment-products/subscriptions" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M3 12a9 9 0 0 1 15-6.7L21 8m0-4v4h-4M21 12a9 9 0 0 1-15 6.7L3 16m0 4v-4h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-bold text-[#0c244c] dark:text-white">Subscriptions</h3>

        <p className="mt-2 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Set up recurring billing with plan-based pricing, free trials, and automated invoicing.
        </p>

        <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-[#3395FF] group-hover:gap-2 transition-all">
          Automate billing

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>

      <a href="/x" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M12 2v20M2 12h20m-7-7l-3 3-3-3m6 14l-3-3-3 3" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-bold text-[#0c244c] dark:text-white">RazorpayX</h3>

        <p className="mt-2 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Send bulk payouts, vendor payments, and instant transfers with automated reconciliation.
        </p>

        <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-[#3395FF] group-hover:gap-2 transition-all">
          Send payouts

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>

      <a href="/pos" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5zm2 4h10M7 12h6m-6 4h4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-bold text-[#0c244c] dark:text-white">Razorpay POS</h3>

        <p className="mt-2 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Accept in-person payments at physical locations with card terminals and QR codes.
        </p>

        <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-[#3395FF] group-hover:gap-2 transition-all">
          Set up POS

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>

      <a href="/payroll" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M17 20h5v-2a4 4 0 0 0-3-3.9M9 20H4v-2a4 4 0 0 1 3-3.9m6 5.9v-2a4 4 0 0 0-4-4H7m6 6a4 4 0 0 0 4-4v-2H9m4-7a4 4 0 1 1-8 0 4 4 0 0 1 8 0zm6 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-5 text-lg font-bold text-[#0c244c] dark:text-white">Razorpay Payroll</h3>

        <p className="mt-2 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Automate employee salary payments, tax filings, and compliance from one dashboard.
        </p>

        <span className="mt-4 inline-flex items-center gap-1 text-sm font-semibold text-[#3395FF] group-hover:gap-2 transition-all">
          Run payroll

          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      </a>
    </div>
  </div>
</div>

<div className="bg-[#f8fafc] dark:bg-[#02042B]">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
    <div className="max-w-2xl">
      <p className="text-xs font-semibold uppercase tracking-wider text-[#3395FF]">Developer Tools</p>
      <h2 className="mt-2 text-3xl sm:text-4xl font-bold text-[#0c244c] dark:text-white">Everything for builders</h2>

      <p className="mt-3 text-base text-[#475569] dark:text-[#cbd5e1]">
        REST APIs, official SDKs, webhooks, and reference content — designed to get you to production fast.
      </p>
    </div>

    <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <a href="/api-reference/introduction" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M16 18l6-6-6-6M8 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-bold text-[#0c244c] dark:text-white">API Reference</h3>

        <p className="mt-1.5 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          REST APIs for orders, payments, refunds, and more — with live samples.
        </p>
      </a>

      <a href="/webhooks" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-bold text-[#0c244c] dark:text-white">Webhooks</h3>

        <p className="mt-1.5 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Real-time event notifications for payments, refunds, settlements, and disputes.
        </p>
      </a>

      <a href="/developer-tools" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16zM3.27 6.96L12 12.01l8.73-5.05M12 22.08V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-bold text-[#0c244c] dark:text-white">Server SDKs</h3>

        <p className="mt-1.5 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Official libraries for Node.js, Python, PHP, Ruby, Go, Java, and .NET.
        </p>
      </a>

      <a href="/errors" className="group block rounded-2xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] p-6 hover:border-[#3395FF] hover:shadow-lg transition-all no-underline">
        <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#3395FF]/10 text-[#3395FF]">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </div>

        <h3 className="mt-4 text-base font-bold text-[#0c244c] dark:text-white">Error Codes</h3>

        <p className="mt-1.5 text-sm text-[#475569] dark:text-[#cbd5e1] leading-relaxed">
          Common error codes, response shapes, and recommended ways to resolve them.
        </p>
      </a>
    </div>
  </div>
</div>

<div className="bg-white dark:bg-[#02042B]">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
    <div className="flex items-end justify-between flex-wrap gap-4">
      <div className="max-w-2xl">
        <p className="text-xs font-semibold uppercase tracking-wider text-[#3395FF]">API Reference</p>
        <h2 className="mt-2 text-3xl sm:text-4xl font-bold text-[#0c244c] dark:text-white">Popular endpoints</h2>

        <p className="mt-3 text-base text-[#475569] dark:text-[#cbd5e1]">
          Jump straight to the resources developers integrate first.
        </p>
      </div>

      <a href="/api-reference/introduction" className="inline-flex items-center gap-1.5 text-sm font-semibold text-[#3395FF] hover:text-[#1d7ce6] no-underline">
        See full API reference

        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>

    <div className="mt-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
      <a href="/api-reference/orders" className="group flex items-center justify-between rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] px-5 py-4 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
        <div>
          <div className="font-mono text-xs text-[#64748b] dark:text-[#94a3b8]">POST /v1/orders</div>
          <div className="mt-1 text-sm font-semibold text-[#0c244c] dark:text-white">Create an order</div>
        </div>

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#94a3b8] group-hover:text-[#3395FF] transition-colors" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <a href="/api-reference/payments" className="group flex items-center justify-between rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] px-5 py-4 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
        <div>
          <div className="font-mono text-xs text-[#64748b] dark:text-[#94a3b8]">GET /v1/payments</div>
          <div className="mt-1 text-sm font-semibold text-[#0c244c] dark:text-white">Fetch payments</div>
        </div>

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#94a3b8] group-hover:text-[#3395FF] transition-colors" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <a href="/api-reference/refunds" className="group flex items-center justify-between rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] px-5 py-4 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
        <div>
          <div className="font-mono text-xs text-[#64748b] dark:text-[#94a3b8]">POST /v1/payments/:id/refund</div>
          <div className="mt-1 text-sm font-semibold text-[#0c244c] dark:text-white">Issue a refund</div>
        </div>

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#94a3b8] group-hover:text-[#3395FF] transition-colors" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <a href="/api-reference/payment-links" className="group flex items-center justify-between rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] px-5 py-4 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
        <div>
          <div className="font-mono text-xs text-[#64748b] dark:text-[#94a3b8]">POST /v1/payment\_links</div>
          <div className="mt-1 text-sm font-semibold text-[#0c244c] dark:text-white">Create a payment link</div>
        </div>

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#94a3b8] group-hover:text-[#3395FF] transition-colors" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <a href="/api-reference/subscriptions" className="group flex items-center justify-between rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] px-5 py-4 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
        <div>
          <div className="font-mono text-xs text-[#64748b] dark:text-[#94a3b8]">POST /v1/subscriptions</div>
          <div className="mt-1 text-sm font-semibold text-[#0c244c] dark:text-white">Create a subscription</div>
        </div>

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#94a3b8] group-hover:text-[#3395FF] transition-colors" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>

      <a href="/api-reference/settlements" className="group flex items-center justify-between rounded-xl border border-[#e5eaf0] dark:border-white/10 bg-white dark:bg-white/[0.03] px-5 py-4 hover:border-[#3395FF] hover:shadow-md transition-all no-underline">
        <div>
          <div className="font-mono text-xs text-[#64748b] dark:text-[#94a3b8]">GET /v1/settlements</div>
          <div className="mt-1 text-sm font-semibold text-[#0c244c] dark:text-white">Fetch settlements</div>
        </div>

        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" className="text-[#94a3b8] group-hover:text-[#3395FF] transition-colors" style={{flexShrink: 0}}>
          <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </div>
  </div>
</div>

<div className="bg-gradient-to-br from-[#02042B] via-[#0a1740] to-[#0c244c] text-white">
  <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 lg:py-20 overflow-hidden">
    <svg className="absolute -right-20 -top-20 w-[420px] h-[420px] text-[#3395FF]/20 pointer-events-none" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true">
      <path d="M100 0a100 100 0 1 0 0 200 100 100 0 0 0 0-200zm0 32a68 68 0 1 1 0 136 68 68 0 0 1 0-136z" />
    </svg>

    <div className="relative grid lg:grid-cols-2 gap-8 items-center">
      <div>
        <h2 className="text-3xl sm:text-4xl font-bold tracking-tight">Ready to accept your first payment?</h2>

        <p className="mt-4 text-lg text-[#cbd5e1] max-w-xl">
          Sign up for a Razorpay account and start integrating in Test Mode in minutes — no KYC required.
        </p>
      </div>

      <div className="flex flex-wrap gap-3 lg:justify-end">
        <a href="/quickstart" className="inline-flex items-center gap-2 rounded-full bg-[#3395FF] px-6 py-3 text-base font-semibold text-white hover:bg-[#1d7ce6] transition-colors no-underline shadow-lg shadow-[#3395FF]/30">
          Start the quickstart

          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}>
            <path d="M5 12h14m-6-7l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </a>

        <a href="https://dashboard.razorpay.com/signup" className="inline-flex items-center gap-2 rounded-full border border-white/25 bg-white/5 backdrop-blur px-6 py-3 text-base font-semibold text-white hover:bg-white/10 transition-colors no-underline">
          Create a free account
        </a>
      </div>
    </div>
  </div>
</div>

<div role="contentinfo" className="bg-[#02042B] text-[#94a3b8]">
  <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
      <div className="col-span-2 md:col-span-1">
        <img src="https://mintcdn.com/razorpay-60c89f9a-mintlify-audit-missing-sections-1778528421/BGanYtiDSXlIREoy/logo/razorpay-dark.svg?fit=max&auto=format&n=BGanYtiDSXlIREoy&q=85&s=9b2fcec5abd0168e131d3c09c7106f7a" alt="Razorpay" className="h-7 w-auto" noZoom width="140" height="30" data-path="logo/razorpay-dark.svg" />

        <p className="mt-4 text-sm leading-relaxed">
          India's leading payments and banking platform for businesses.
        </p>
      </div>

      <div>
        <h3 className="text-xs font-semibold uppercase tracking-wider text-white">Accept payments</h3>

        <ul className="mt-4 space-y-3 text-sm">
          <li><a href="/payment-gateway/overview" className="hover:text-white no-underline">Payment Gateway</a></li>
          <li><a href="/payment-products/payment-links" className="hover:text-white no-underline">Payment Links</a></li>
          <li><a href="/payment-products/subscriptions" className="hover:text-white no-underline">Subscriptions</a></li>
          <li><a href="/pos" className="hover:text-white no-underline">Razorpay POS</a></li>
        </ul>
      </div>

      <div>
        <h3 className="text-xs font-semibold uppercase tracking-wider text-white">Developers</h3>

        <ul className="mt-4 space-y-3 text-sm">
          <li><a href="/quickstart" className="hover:text-white no-underline">Quickstart</a></li>
          <li><a href="/api-reference/introduction" className="hover:text-white no-underline">API Reference</a></li>
          <li><a href="/webhooks" className="hover:text-white no-underline">Webhooks</a></li>
          <li><a href="/errors" className="hover:text-white no-underline">Error Codes</a></li>
        </ul>
      </div>

      <div>
        <h3 className="text-xs font-semibold uppercase tracking-wider text-white">Company</h3>

        <ul className="mt-4 space-y-3 text-sm">
          <li><a href="https://razorpay.com" className="hover:text-white no-underline">About</a></li>
          <li><a href="https://razorpay.com/support/" className="hover:text-white no-underline">Support</a></li>
          <li><a href="https://razorpay.com/terms/" className="hover:text-white no-underline">Terms</a></li>
          <li><a href="https://razorpay.com/privacy/" className="hover:text-white no-underline">Privacy</a></li>
        </ul>
      </div>
    </div>

    <div className="mt-12 pt-8 border-t border-white/10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 text-xs">
      <p>© Razorpay {new Date().getFullYear()} · All rights reserved.</p>
      <p className="text-[#3395FF] font-semibold">PCI DSS Compliant</p>
    </div>
  </div>
</div>
