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

# SDKs & Libraries

> Official Notch Pay libraries for various programming languages

<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">
  <h2 className="text-xl font-bold text-green-800 dark:text-green-400 mb-2">Accelerate Your Integration</h2>
  <p className="text-gray-700 dark:text-gray-300">Notch Pay provides official client libraries for various programming languages to simplify integration with our API. These libraries handle the complexities of API requests, authentication, and error handling, allowing you to focus on building your application.</p>
</div>

<div className="flex flex-col md:flex-row gap-4 mb-8">
  <div className="flex-1 p-5 border rounded-lg bg-white dark:bg-gray-800">
    <h3 className="text-lg font-semibold mb-3">Why Use Our SDKs?</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>Simplified API integration with pre-built methods</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>Automatic handling of authentication and headers</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>Comprehensive error handling and validation</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>Type definitions and code completion</span>
      </li>
    </ul>
  </div>

  <div className="flex-1 p-5 border rounded-lg bg-white dark:bg-gray-800">
    <h3 className="text-lg font-semibold mb-3">SDK Features</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>Complete API coverage for all Notch Pay services</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>Webhook signature verification utilities</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>Idiomatic code for each language</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>Comprehensive documentation and examples</span>
      </li>
    </ul>
  </div>
</div>

## Available SDKs

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow">
    <h3 className="text-lg font-semibold mb-2">JavaScript</h3>
    <p className="mb-4">Integrate Notch Pay into your web applications, Node.js backends, or React Native apps.</p>

    <ul className="list-disc pl-5 mb-4">
      <li>Promise-based API</li>
      <li>TypeScript support</li>
      <li>Browser and Node.js compatibility</li>
      <li>Comprehensive error handling</li>
    </ul>

    <a href="/sdks/javascript" className="text-teal-600 hover:underline">View JavaScript SDK →</a>
  </div>

  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow">
    <h3 className="text-lg font-semibold mb-2">PHP</h3>
    <p className="mb-4">Integrate Notch Pay into your PHP applications and frameworks like Laravel, Symfony, or WordPress.</p>

    <ul className="list-disc pl-5 mb-4">
      <li>PSR-4 compliant</li>
      <li>Composer support</li>
      <li>Laravel integration</li>
      <li>Comprehensive error handling</li>
    </ul>

    <a href="/sdks/php" className="text-teal-600 hover:underline">View PHP SDK →</a>
  </div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow">
    <h3 className="text-lg font-semibold mb-2">Python</h3>
    <p className="mb-4">Integrate Notch Pay into your Python applications and frameworks like Django or Flask.</p>

    <ul className="list-disc pl-5 mb-4">
      <li>Python 3.6+ support</li>
      <li>Async/await support</li>
      <li>Django integration</li>
      <li>Comprehensive error handling</li>
    </ul>

    <a href="/sdks/python" className="text-teal-600 hover:underline">View Python SDK →</a>
  </div>

  <div className="border rounded-lg p-6 hover:shadow-md transition-shadow">
    <h3 className="text-lg font-semibold mb-2">Mobile SDKs</h3>
    <p className="mb-4">Integrate Notch Pay into your iOS and Android applications.</p>

    <ul className="list-disc pl-5 mb-4">
      <li>Native iOS SDK (Swift)</li>
      <li>Native Android SDK (Kotlin)</li>
      <li>React Native support</li>
      <li>Flutter support</li>
    </ul>

    <a href="/sdks/mobile" className="text-teal-600 hover:underline">View Mobile SDKs →</a>
  </div>
</div>

## Installation

Each SDK has its own installation instructions. Please refer to the specific SDK documentation for detailed installation steps.

<Tabs>
  <Tab title="Javascript">
    ```bash theme={null}
    # Using npm
    npm install notchpay-js
    ```

    ```bash theme={null}
    # Using yarn
    yarn add notchpay-js
    ```
  </Tab>

  <Tab title="PHP">
    ```bash theme={null}
    composer require notchpay/notchpay-php
    ```
  </Tab>

  <Tab title="Python">
    ```bash theme={null}
    pip install notchpay
    ```
  </Tab>
</Tabs>

## Basic Usage

All SDKs follow a similar pattern for basic operations. Here's a quick example of creating a payment using different SDKs:

### JavaScript

```javascript theme={null}
const Notch Pay = require('notchpay-js');
const notchpay = new Notch Pay('YOUR_PUBLIC_KEY');

notchpay.payments.create({
  amount: 5000,
  currency: 'XAF',
  customer: {
    email: 'customer@example.com',
    name: 'John Doe'
  },
  description: 'Payment for Order #123',
  callback: 'https://example.com/callback'
})
.then(response => {
  // Redirect to payment page
  window.location.href = response.authorization_url;
})
.catch(error => {
  console.error('Error:', error);
});
```

### PHP

```php theme={null}
<?php
require_once 'vendor/autoload.php';

$notchpay = new \Notch Pay\Notch Pay('YOUR_PUBLIC_KEY');

try {
    $payment = $notchpay->payments->create([
        'amount' => 5000,
        'currency' => 'XAF',
        'customer' => [
            'email' => 'customer@example.com',
            'name' => 'John Doe'
        ],
        'description' => 'Payment for Order #123',
        'callback' => 'https://example.com/callback'
    ]);

    // Redirect to payment page
    header('Location: ' . $payment->authorization_url);
    exit;
} catch (\Notch Pay\Exception\ApiException $e) {
    echo 'Error: ' . $e->getMessage();
}
```

### Python

```python theme={null}
import notchpay

notchpay.api_key = 'YOUR_PUBLIC_KEY'

try:
    payment = notchpay.Payment.create(
        amount=5000,
        currency='XAF',
        customer={
            'email': 'customer@example.com',
            'name': 'John Doe'
        },
        description='Payment for Order #123',
        callback='https://example.com/callback'
    )

    # Redirect to payment page
    print(payment.authorization_url)
except notchpay.error.Notch PayError as e:
    print(f"Error: {e}")
```

## Error Handling

All SDKs provide comprehensive error handling to help you debug issues and provide appropriate feedback to your users. Each SDK throws specific exceptions or returns error objects that contain detailed information about what went wrong.

## Webhooks

Our SDKs also provide utilities for handling webhooks, making it easy to verify and process webhook notifications from Notch Pay.

## Community Libraries

In addition to our official SDKs, there are community-maintained libraries for other programming languages and frameworks. While these are not officially supported by Notch Pay, they can be useful for integrating with our API.

## Need Help?

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
      </div>

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

    <p className="mb-4">Each SDK has detailed documentation with guides, examples, and API references to help you get started quickly.</p>

    <div className="space-y-2">
      <a href="/sdks/javascript" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">JavaScript SDK Documentation</a>
      <a href="/sdks/php" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">PHP SDK Documentation</a>
      <a href="/sdks/python" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">Python SDK Documentation</a>
      <a href="/sdks/mobile" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">Mobile SDKs Documentation</a>
    </div>
  </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-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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
        </svg>
      </div>

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

    <p className="mb-4">All our SDKs are open source. Visit our GitHub repositories to view the source code, report issues, or contribute.</p>

    <div className="space-y-2">
      <a href="https://github.com/notchafrica/notchpay-js" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">JavaScript SDK Repository</a>
      <a href="https://github.com/notchafrica/notchpay-php" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">PHP SDK Repository</a>
      <a href="https://github.com/notchafrica/notchpay-python" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">Python SDK Repository</a>
      <a href="https://github.com/notchafrica" className="block text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300">All Repositories</a>
    </div>
  </div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-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="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">Technical Support</h3>
    </div>

    <p className="mb-4">Our technical support team is available to help you with any SDK integration issues or questions.</p>

    <a href="mailto:hello@notchpay.co" 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">
      Contact Support
    </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-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="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">Developer Community</h3>
    </div>

    <p className="mb-4">Join our developer community to connect with other developers, share knowledge, and get help with your integration.</p>

    <a href="https://community.notchpay.co" 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">
      Join Community
    </a>
  </div>
</div>

## Next Steps

<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">Choose Your SDK & Start Building</h3>

  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
    <a href="/sdks/javascript" className="block p-4 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
      <div className="flex items-center mb-3">
        <div className="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-yellow-600" viewBox="0 0 24 24" fill="currentColor">
            <path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z" />
          </svg>
        </div>

        <span className="font-medium">JavaScript</span>
      </div>

      <p className="text-sm text-gray-600 dark:text-gray-400">For web applications, Node.js backends, and React Native apps</p>
    </a>

    <a href="/sdks/php" className="block p-4 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
      <div className="flex items-center mb-3">
        <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-indigo-600" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 18.08c-6.63 0-12-2.72-12-6.08s5.37-6.08 12-6.08S24 8.64 24 12s-5.37 6.08-12 6.08zm-7.51-3.83c.83.83 3.05 1.87 7.51 1.87s6.68-1.04 7.51-1.87c.83-.82.83-2.18 0-3.01-.83-.83-3.05-1.87-7.51-1.87s-6.68 1.04-7.51 1.87c-.83.83-.83 2.18 0 3.01z" />
          </svg>
        </div>

        <span className="font-medium">PHP</span>
      </div>

      <p className="text-sm text-gray-600 dark:text-gray-400">For PHP applications and frameworks like Laravel, Symfony, or WordPress</p>
    </a>

    <a href="/sdks/python" className="block p-4 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
      <div className="flex items-center mb-3">
        <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
            <path d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z" />
          </svg>
        </div>

        <span className="font-medium">Python</span>
      </div>

      <p className="text-sm text-gray-600 dark:text-gray-400">For Python applications and frameworks like Django or Flask</p>
    </a>

    <a href="/sdks/mobile" className="block p-4 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow border border-gray-200 dark:border-gray-700">
      <div className="flex items-center mb-3">
        <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-green-600" 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>

        <span className="font-medium">Mobile</span>
      </div>

      <p className="text-sm text-gray-600 dark:text-gray-400">For iOS and Android applications, including React Native and Flutter</p>
    </a>
  </div>

  <div className="mt-6 flex justify-center">
    <a href="/get-started/quickstart" 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">
      Follow our 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>