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

# Getting Started with Notch Pay

> Learn how to get started with Notch Pay and integrate payment solutions into your business or application

<div className="bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900/30 dark:to-teal-900/30 p-6 rounded-lg mb-8 border border-green-100 dark:border-green-900/50">
  <h1 className="text-3xl font-bold text-green-800 dark:text-green-400 mb-2">Getting Started with Notch Pay</h1>
  <p className="text-lg text-gray-700 dark:text-gray-300">Everything you need to integrate Notch Pay into your business or application</p>
</div>

## What is Notch Pay?

<div className="flex flex-col md:flex-row gap-6 mb-8">
  <div className="flex-1">
    <p className="mb-4">
      Notch Pay is a comprehensive payment platform designed for Africa, enabling businesses to accept payments through various channels including Mobile Money, bank cards, and other local payment methods. Our platform also allows you to send money to beneficiaries across multiple countries.
    </p>

    <p className="mb-4">
      With Notch Pay, you can streamline your payment processes, reduce transaction costs, and provide a seamless payment experience for your customers across Africa.
    </p>
  </div>

  <div className="flex-1 border rounded-lg p-5 bg-white dark:bg-gray-800">
    <h3 className="text-lg font-semibold mb-3">Platform Highlights</h3>

    <ul className="space-y-2">
      <li className="flex items-start">
        <svg className="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
        </svg>

        <span><strong>Multiple payment methods</strong> across Africa</span>
      </li>

      <li className="flex items-start">
        <svg className="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
        </svg>

        <span><strong>Secure and reliable</strong> infrastructure</span>
      </li>

      <li className="flex items-start">
        <svg className="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
        </svg>

        <span><strong>Developer-friendly</strong> APIs and SDKs</span>
      </li>

      <li className="flex items-start">
        <svg className="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
        </svg>

        <span><strong>Comprehensive dashboard</strong> for business management</span>
      </li>
    </ul>
  </div>
</div>

## Create Your Account

<div className="mb-6">
  <p className="mb-4">Before you can start using Notch Pay, you need to create and set up your account:</p>
</div>

<div className="relative mb-12">
  <div className="absolute left-8 top-0 bottom-0 w-1 bg-green-200 dark:bg-green-800" />

  <div className="space-y-8">
    <div className="relative flex items-start">
      <div className="flex-shrink-0 h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center z-10 mr-4">
        <span className="text-2xl font-bold text-green-600 dark:text-green-400">1</span>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm flex-grow">
        <h4 className="text-lg font-semibold mb-2">Register</h4>
        <p className="text-gray-600 dark:text-gray-400">Visit <a href="https://business.notchpay.co/register" className="text-green-600 hover:underline">Notch Pay Business</a> and create your account with your email address.</p>
      </div>
    </div>

    <div className="relative flex items-start">
      <div className="flex-shrink-0 h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center z-10 mr-4">
        <span className="text-2xl font-bold text-green-600 dark:text-green-400">2</span>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm flex-grow">
        <h4 className="text-lg font-semibold mb-2">Business Information</h4>
        <p className="text-gray-600 dark:text-gray-400">Fill in your business details including name, address, and business type.</p>
      </div>
    </div>

    <div className="relative flex items-start">
      <div className="flex-shrink-0 h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center z-10 mr-4">
        <span className="text-2xl font-bold text-green-600 dark:text-green-400">3</span>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm flex-grow">
        <h4 className="text-lg font-semibold mb-2">Email Verification</h4>
        <p className="text-gray-600 dark:text-gray-400">Verify your email address by clicking the link sent to your inbox.</p>
      </div>
    </div>

    <div className="relative flex items-start">
      <div className="flex-shrink-0 h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center z-10 mr-4">
        <span className="text-2xl font-bold text-green-600 dark:text-green-400">4</span>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm flex-grow">
        <h4 className="text-lg font-semibold mb-2">KYC Requirements</h4>
        <p className="text-gray-600 dark:text-gray-400">Complete your profile and submit the required KYC documents for verification.</p>
      </div>
    </div>

    <div className="relative flex items-start">
      <div className="flex-shrink-0 h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center z-10 mr-4">
        <span className="text-2xl font-bold text-green-600 dark:text-green-400">5</span>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm flex-grow">
        <h4 className="text-lg font-semibold mb-2">Account Approval</h4>
        <p className="text-gray-600 dark:text-gray-400">Once your account is approved, you'll have access to your dashboard where you can manage all your payment activities.</p>
      </div>
    </div>
  </div>
</div>

<div className="p-6 border rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/30 dark:to-indigo-900/30 mb-8">
  <div className="flex items-start">
    <div className="mr-4 text-blue-600">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>

    <div>
      <h3 className="font-semibold text-lg mb-2">Pro Tip</h3>
      <p className="mb-4">Make sure to have your business registration documents ready before starting the registration process. This will speed up your account verification.</p>

      <a href="/dashboard/settings" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium flex items-center">
        Learn more about account verification

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</div>

## Integration Options

<div className="mb-6">
  <p className="mb-4">Notch Pay offers multiple ways to integrate our payment solutions, from no-code options to developer APIs:</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
  <div className="border rounded-lg overflow-hidden bg-white dark:bg-gray-800 hover:shadow-lg transition-shadow">
    <div className="h-2 bg-gradient-to-r from-green-400 to-teal-500" />

    <div className="p-6">
      <div className="flex items-center mb-4">
        <div className="w-12 h-12 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
          </svg>
        </div>

        <h3 className="text-xl font-semibold">API Integration</h3>
      </div>

      <p className="mb-4 text-gray-600 dark:text-gray-400">Integrate Notch Pay directly into your application using our RESTful API for maximum flexibility and control.</p>

      <div className="mb-4">
        <span className="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded mr-2 mb-2">For Developers</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded mr-2 mb-2">Maximum Flexibility</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded mr-2 mb-2">Custom UI</span>
      </div>

      <a href="/api-reference" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
        View API Documentation

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>

  <div className="border rounded-lg overflow-hidden bg-white dark:bg-gray-800 hover:shadow-lg transition-shadow">
    <div className="h-2 bg-gradient-to-r from-purple-400 to-indigo-500" />

    <div className="p-6">
      <div className="flex items-center mb-4">
        <div className="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
          </svg>
        </div>

        <h3 className="text-xl font-semibold">Payment Links</h3>
      </div>

      <p className="mb-4 text-gray-600 dark:text-gray-400">Create shareable payment links without any coding required. Perfect for social media, email campaigns, or one-time payments.</p>

      <div className="mb-4">
        <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded mr-2 mb-2">No Code</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded mr-2 mb-2">Shareable</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded mr-2 mb-2">Quick Setup</span>
      </div>

      <a href="/accept-payments/payment-links" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
        Learn about Payment Links

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>

  <div className="border rounded-lg overflow-hidden bg-white dark:bg-gray-800 hover:shadow-lg transition-shadow">
    <div className="h-2 bg-gradient-to-r from-blue-400 to-cyan-500" />

    <div className="p-6">
      <div className="flex items-center mb-4">
        <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
          </svg>
        </div>

        <h3 className="text-xl font-semibold">SDKs & Libraries</h3>
      </div>

      <p className="mb-4 text-gray-600 dark:text-gray-400">Use our official libraries for various programming languages to simplify integration and reduce development time.</p>

      <div className="mb-4">
        <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded mr-2 mb-2">JavaScript</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded mr-2 mb-2">PHP</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded mr-2 mb-2">Python</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded mr-2 mb-2">More</span>
      </div>

      <a href="/sdks/index" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
        Explore SDKs

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>

  <div className="border rounded-lg overflow-hidden bg-white dark:bg-gray-800 hover:shadow-lg transition-shadow">
    <div className="h-2 bg-gradient-to-r from-yellow-400 to-orange-500" />

    <div className="p-6">
      <div className="flex items-center mb-4">
        <div className="w-12 h-12 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
          </svg>
        </div>

        <h3 className="text-xl font-semibold">Collect</h3>
      </div>

      <p className="mb-4 text-gray-600 dark:text-gray-400">Use our hosted payment page for a quick and secure integration with minimal coding required.</p>

      <div className="mb-4">
        <span className="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded mr-2 mb-2">Hosted Checkout</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded mr-2 mb-2">Customizable</span>
        <span className="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded mr-2 mb-2">Secure</span>
      </div>

      <a href="/accept-payments/collect" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500">
        Learn about Collect

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</div>

## Next Steps

<div className="mb-6">
  <p className="mb-4">Ready to dive deeper? Check out these essential resources to get started with Notch Pay:</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
  <div className="border rounded-lg p-5 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-3">
      <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      </div>

      <h3 className="font-semibold">Quickstart Guide</h3>
    </div>

    <p className="mb-3 text-gray-600 dark:text-gray-400">Get up and running with Notch Pay in minutes with our step-by-step quickstart guide.</p>

    <a href="/get-started/quickstart" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
      View Quickstart Guide

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>

  <div className="border rounded-lg p-5 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-3">
      <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
        </svg>
      </div>

      <h3 className="font-semibold">Authentication</h3>
    </div>

    <p className="mb-3 text-gray-600 dark:text-gray-400">Learn how to authenticate with the Notch Pay API and secure your integration.</p>

    <a href="/get-started/authentication" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium flex items-center">
      View Authentication Guide

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>

  <div className="border rounded-lg p-5 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-3">
      <div className="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
      </div>

      <h3 className="font-semibold">Dashboard Overview</h3>
    </div>

    <p className="mb-3 text-gray-600 dark:text-gray-400">Learn how to navigate and use the Notch Pay dashboard to manage your payments and business.</p>

    <a href="/dashboard/overview" className="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 font-medium flex items-center">
      View Dashboard Guide

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>

  <div className="border rounded-lg p-5 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-3">
      <div className="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
        </svg>
      </div>

      <h3 className="font-semibold">Accept Payments</h3>
    </div>

    <p className="mb-3 text-gray-600 dark:text-gray-400">Explore different ways to accept payments with Notch Pay, from hosted checkout to direct API integration.</p>

    <a href="/accept-payments" className="text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300 font-medium flex items-center">
      View Payment Options

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>
</div>

## Testing Your Integration

<div className="mb-6">
  <p className="mb-4">Before going live, you can test your integration using our sandbox environment to ensure everything works correctly:</p>
</div>

<div className="bg-white dark:bg-gray-800 border rounded-lg overflow-hidden mb-8">
  <div className="p-6">
    <div className="flex items-center mb-4">
      <div className="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
        </svg>
      </div>

      <h3 className="text-xl font-semibold">Sandbox Testing Process</h3>
    </div>

    <div className="space-y-4">
      <div className="flex items-start">
        <div className="flex-shrink-0 h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
          <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">1</span>
        </div>

        <div>
          <h4 className="text-lg font-semibold mb-1">Switch to Test Mode</h4>
          <p className="text-gray-600 dark:text-gray-400">In your dashboard, switch to Test Mode to access the sandbox environment.</p>
        </div>
      </div>

      <div className="flex items-start">
        <div className="flex-shrink-0 h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
          <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">2</span>
        </div>

        <div>
          <h4 className="text-lg font-semibold mb-1">Use Test Credentials</h4>
          <p className="text-gray-600 dark:text-gray-400">Use our <a href="/get-started/testing" className="text-indigo-600 hover:underline">test credentials and accounts</a> to simulate different payment scenarios.</p>
        </div>
      </div>

      <div className="flex items-start">
        <div className="flex-shrink-0 h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
          <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">3</span>
        </div>

        <div>
          <h4 className="text-lg font-semibold mb-1">Simulate Transactions</h4>
          <p className="text-gray-600 dark:text-gray-400">Test payments, transfers, and other features to ensure your integration works correctly.</p>
        </div>
      </div>

      <div className="flex items-start">
        <div className="flex-shrink-0 h-8 w-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3">
          <span className="text-lg font-bold text-indigo-600 dark:text-indigo-400">4</span>
        </div>

        <div>
          <h4 className="text-lg font-semibold mb-1">Go Live</h4>
          <p className="text-gray-600 dark:text-gray-400">Once you're satisfied with your integration, switch to Live Mode to start accepting real payments.</p>
        </div>
      </div>
    </div>

    <div className="mt-6">
      <a href="/get-started/testing" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        View Testing Guide

        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </a>
    </div>
  </div>
</div>

## Need Help?

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6 mb-8">
  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-4">
      <div className="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>

      <h3 className="text-lg font-semibold">FAQ</h3>
    </div>

    <p className="mb-4 text-gray-600 dark:text-gray-400">Find answers to commonly asked questions about Notch Pay services and features.</p>

    <a href="/faq" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
      Browse FAQ

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>

  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-4">
      <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>

      <h3 className="text-lg font-semibold">Support</h3>
    </div>

    <p className="mb-4 text-gray-600 dark:text-gray-400">Get personalized assistance from our dedicated support team for any issues or questions.</p>

    <a href="mailto:hello@notchpay.co" className="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium flex items-center">
      Contact Support

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>

  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow bg-white dark:bg-gray-800">
    <div className="flex items-center mb-4">
      <div className="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-purple-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </div>

      <h3 className="text-lg font-semibold">Community</h3>
    </div>

    <p className="mb-4 text-gray-600 dark:text-gray-400">Connect with other developers and businesses using Notch Pay to share insights and solutions.</p>

    <a href="https://community.notchpay.co" className="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 font-medium flex items-center">
      Join Community

      <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
      </svg>
    </a>
  </div>
</div>