> ## 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.

# Accept Payments

> Learn how to accept payments with Notch Pay through various methods

<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">
  <p className="text-lg text-gray-700 dark:text-gray-300">Multiple ways to accept payments from your customers across Africa</p>
</div>

<div className="flex flex-col md:flex-row gap-6 mb-8">
  <div className="flex-1">
    <p className="mb-4">
      Notch Pay offers multiple ways to accept payments from your customers. Whether you're running an e-commerce store, a SaaS platform, or any other type of business, we have solutions to fit your needs.
    </p>

    <p className="mb-4">
      Our platform is designed to make accepting payments in Africa simple, secure, and reliable, with support for local payment methods that your customers already use and trust.
    </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">Key Benefits</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> - Mobile Money and digital wallets</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>Flexible integration options</strong> - From no-code to API-based solutions</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>Real-time notifications</strong> - Stay updated on payment status</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 reporting</strong> - Track and analyze all transactions</span>
      </li>
    </ul>
  </div>
</div>

## Payment Methods Overview

<div className="mb-6">
  <p className="mb-4">Notch Pay supports a wide range of payment methods popular across Africa, making it easy for your customers to pay using their preferred method.</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 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-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="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
        </svg>
      </div>

      <h3 className="font-semibold">Mobile Money</h3>
    </div>

    <p className="mb-3">Accept payments via popular mobile money services that millions of Africans use daily.</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">MTN Mobile Money</span>
      <span className="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded mr-2 mb-2">Orange Money</span>
      <span className="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded mr-2 mb-2">Airtel Money</span>
      <span className="inline-block px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded mr-2 mb-2">More</span>
    </div>

    <a href="/accept-payments/mobile-money" className="text-yellow-600 hover:text-yellow-700 dark:text-yellow-400 dark:hover:text-yellow-300 font-medium flex items-center">
      Learn More

      <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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2z" />
        </svg>
      </div>

      <h3 className="font-semibold">Digital Wallets</h3>
    </div>

    <p className="mb-3">Accept payments from popular digital wallets used across Africa.</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">Assoh</span>
      <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded mr-2 mb-2">Kudi</span>
      <span className="inline-block px-2 py-1 text-xs font-medium bg-purple-100 text-purple-800 rounded mr-2 mb-2">More</span>
    </div>

    <a href="/accept-payments/other-methods" className="text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300 font-medium flex items-center">
      Learn More

      <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>

## Integration Options

Choose the integration method that best suits your business needs:

<CardGroup cols={2}>
  <Card title="Collect" href="/accept-payments/collect">
    Use our hosted payment page for a quick and secure integration with minimal coding required.

    <ul className="list-disc pl-5 mb-4">
      <li>Pre-built, responsive payment form</li>
      <li>Supports all payment methods</li>
      <li>Customizable to match your brand</li>
      <li>Handles payment security for you</li>
    </ul>
  </Card>

  <Card title="Payment Links" href="/accept-payments/payment-links">
    Create shareable payment links without any coding required.

    <ul className="list-disc pl-5 mb-4">
      <li>No development needed</li>
      <li>Share via email, SMS, or social media</li>
      <li>Track payment status in your dashboard</li>
      <li>Customize with your branding</li>
    </ul>
  </Card>

  <Card title="Invoices" href="/accept-payments/invoices">
    Create and manage professional invoices for your customers.

    <ul className="list-disc pl-5 mb-4">
      <li>Professional invoice templates</li>
      <li>Automated payment reminders</li>
      <li>Multiple payment methods</li>
      <li>Detailed payment tracking</li>
    </ul>
  </Card>

  <Card title="Direct Charge" href="/accept-payments/charge">
    Integrate Notch Pay directly into your application using our RESTful API for maximum flexibility.

    <ul className="list-disc pl-5 mb-4">
      <li>Complete control over the payment flow</li>
      <li>Seamless integration with your existing systems</li>
      <li>Support for all payment methods</li>
      <li>Webhook notifications for payment events</li>
    </ul>
  </Card>
</CardGroup>

## Getting Started

<div className="p-6 border rounded-lg bg-gradient-to-r from-green-50 to-teal-50 dark:from-green-900/30 dark:to-teal-900/30 mb-8">
  <h3 className="text-xl font-semibold mb-4">Start Accepting Payments in 6 Simple Steps</h3>

  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm">
      <div className="flex items-center mb-3">
        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <span className="text-xl font-bold text-green-600 dark:text-green-400">1</span>
        </div>

        <h4 className="text-lg font-semibold">Create Account</h4>
      </div>

      <p className="text-gray-600 dark:text-gray-400 mb-3">Sign up for a free Notch Pay account to get started.</p>

      <a href="https://business.notchpay.co/register" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
        Create Account

        <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="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm">
      <div className="flex items-center mb-3">
        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <span className="text-xl font-bold text-green-600 dark:text-green-400">2</span>
        </div>

        <h4 className="text-lg font-semibold">Complete Profile</h4>
      </div>

      <p className="text-gray-600 dark:text-gray-400 mb-3">Provide your business details and complete verification.</p>

      <a href="/dashboard/settings" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
        Learn More

        <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="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm">
      <div className="flex items-center mb-3">
        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <span className="text-xl font-bold text-green-600 dark:text-green-400">3</span>
        </div>

        <h4 className="text-lg font-semibold">Choose Integration</h4>
      </div>

      <p className="text-gray-600 dark:text-gray-400 mb-3">Select the integration method that best suits your needs.</p>

      <a href="#integration-options" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
        View 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 className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm">
      <div className="flex items-center mb-3">
        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <span className="text-xl font-bold text-green-600 dark:text-green-400">4</span>
        </div>

        <h4 className="text-lg font-semibold">Integrate</h4>
      </div>

      <p className="text-gray-600 dark:text-gray-400 mb-3">Follow our step-by-step guide to implement your chosen method.</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 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="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm">
      <div className="flex items-center mb-3">
        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <span className="text-xl font-bold text-green-600 dark:text-green-400">5</span>
        </div>

        <h4 className="text-lg font-semibold">Test</h4>
      </div>

      <p className="text-gray-600 dark:text-gray-400 mb-3">Test your integration in our sandbox environment.</p>

      <a href="/get-started/testing" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
        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 className="bg-white dark:bg-gray-800 rounded-lg p-5 shadow-sm">
      <div className="flex items-center mb-3">
        <div className="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3">
          <span className="text-xl font-bold text-green-600 dark:text-green-400">6</span>
        </div>

        <h4 className="text-lg font-semibold">Go Live</h4>
      </div>

      <p className="text-gray-600 dark:text-gray-400 mb-3">Switch to production and start accepting real payments.</p>

      <a href="/dashboard/settings" className="text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-medium flex items-center">
        Go Live 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>

## Payment Flow

<div className="mb-6">
  <p className="mb-4">Understanding the payment flow is essential for a successful integration. Here's how payments typically work with Notch Pay:</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">Initialize Payment</h4>
        <p className="text-gray-600 dark:text-gray-400">Create a payment with customer and transaction details using our API or SDKs. You'll specify the amount, currency, and other relevant information.</p>

        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded mr-2">API Call</span>
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Server-side</span>
        </div>
      </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">Customer Checkout</h4>
        <p className="text-gray-600 dark:text-gray-400">Redirect the customer to the Notch Pay checkout page or present payment options within your application using our embedded checkout.</p>

        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded mr-2">Redirect</span>
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Client-side</span>
        </div>
      </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">Payment Processing</h4>
        <p className="text-gray-600 dark:text-gray-400">The customer selects their preferred payment method and completes the payment. Notch Pay handles all the security and compliance requirements.</p>

        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded mr-2">User Action</span>
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Notch Pay Hosted</span>
        </div>
      </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">Verification</h4>
        <p className="text-gray-600 dark:text-gray-400">Notch Pay verifies the payment with the payment provider and processes the transaction securely.</p>

        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded mr-2">Automatic</span>
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Notch Pay System</span>
        </div>
      </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">Confirmation</h4>
        <p className="text-gray-600 dark:text-gray-400">Notch Pay confirms the payment status and notifies your application through webhooks and/or redirects the customer back to your application.</p>

        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded mr-2">Webhook</span>
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Redirect</span>
        </div>
      </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">6</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">Fulfillment</h4>
        <p className="text-gray-600 dark:text-gray-400">Your application fulfills the order based on the payment status. You can update your database, send confirmation emails, or trigger other business processes.</p>

        <div className="mt-3 text-sm text-gray-500 dark:text-gray-400">
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded mr-2">Your Application</span>
          <span className="inline-block px-2 py-1 bg-gray-100 dark:bg-gray-700 rounded">Business Logic</span>
        </div>
      </div>
    </div>
  </div>
</div>

## Security Best Practices

<div className="mb-6">
  <p className="mb-4">When accepting payments, security is paramount. Follow these best practices to ensure your integration is secure and compliant:</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-4">
      <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-red-600 dark:text-red-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">Secure Communications</h3>
    </div>

    <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>Always use HTTPS for all payment-related pages</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>Implement TLS 1.2 or higher</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>Use secure cookies with the 'secure' flag</span>
      </li>
    </ul>
  </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-4">
      <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
        </svg>
      </div>

      <h3 className="font-semibold">API Security</h3>
    </div>

    <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>Keep your API keys secure and never expose them in client-side code</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>Use different API keys for test and production environments</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>Rotate API keys periodically</span>
      </li>
    </ul>
  </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-4">
      <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
        </svg>
      </div>

      <h3 className="font-semibold">Data Validation</h3>
    </div>

    <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>Validate and sanitize all user inputs</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>Implement proper error handling for failed payments</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>Use parameterized queries to prevent SQL injection</span>
      </li>
    </ul>
  </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-4">
      <div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
      </div>

      <h3 className="font-semibold">Webhook Security</h3>
    </div>

    <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>Verify webhook signatures to ensure notifications are authentic</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>Implement idempotency to handle duplicate webhook events</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>Respond quickly to webhook events with a 2xx status code</span>
      </li>
    </ul>
  </div>
</div>

<div className="p-6 border rounded-lg bg-gradient-to-r from-red-50 to-orange-50 dark:from-red-900/30 dark:to-orange-900/30 mb-8">
  <div className="flex items-start">
    <div className="mr-4 text-red-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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
    </div>

    <div>
      <h3 className="font-semibold text-lg mb-2">Security Maintenance</h3>
      <p className="mb-4">Maintaining security is an ongoing process. Make sure to:</p>

      <ul className="list-disc pl-5 mb-4 space-y-1">
        <li>Regularly update your integration with the latest security patches</li>
        <li>Monitor your integration for suspicious activities</li>
        <li>Stay informed about security best practices and updates from Notch Pay</li>
        <li>Conduct regular security audits of your integration</li>
      </ul>

      <a href="/security/best-practices" className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
        Learn More About Security
      </a>
    </div>
  </div>
</div>

## Advanced Features

Notch Pay provides several advanced features to help you manage your payments effectively:

<CardGroup cols={2}>
  <Card title="Metadata" href="/accept-payments/collect">
    Attach custom data to payments for tracking and reconciliation purposes.
  </Card>

  <Card title="Refunds" href="/accept-payments/refunds">
    Process full or partial refunds for completed payments with ease.
  </Card>

  <Card title="Disputes" href="/accept-payments/disputes">
    Handle payment disputes and chargebacks effectively with our tools.
  </Card>
</CardGroup>