<!DOCTYPE html>
<html lang="{{ config('app.locale') }}" itemscope itemtype="http://schema.org/WebPage">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>{{ $pageTitle ?? 'Dashboard' }} - {{ config('app.name') }}</title>
    
    <meta name="description" content="KodaPay - Secure and Fast Online Payment Solutions.">
    <meta name="keywords" content="KodaPay, online payments, secure transactions, API payments">
    <meta name="author" content="KodaPay Team">
    <meta property="og:title" content="KodaPay - Fast & Secure Online Payments">
    <meta property="og:description" content="Experience seamless payment processing with KodaPay.">
    <meta property="og:image" content="{{ asset('assets/images/logo_icon/logo.png') }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta name="robots" content="index, follow">
  
    <link rel="stylesheet" href="{{ asset('assets/global/css/bootstrap.min.css') }}">
    <!-- fontawesome 5  -->
    <link rel="stylesheet" href="{{ asset('assets/global/css/all.min.css') }}">
    <!-- lineawesome font -->
    <link rel="stylesheet" href="{{ asset('assets/global/css/line-awesome.min.css') }}">

        <link rel="stylesheet" href="{{ asset('assets/templates/basic/frontend/css/api_documentation.css') }}">

    <!-- Main css -->
    <link rel="stylesheet" href="{{ asset('assets/templates/basic/frontend/css/main.css?v2') }}">
    <link rel="stylesheet" href="{{ asset('assets/templates/basic/css/custom.css?v2') }}">

        <style>
       .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
            color: hsl(var(--white));
        }
    </style>

 <body class="expansion-alids-init">
  
    <div class="body-overlay"></div>
  
        <!-- documentation section start -->
    <div class="pt-50 pb-50 documentation-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-2">
    <button class="sidebar-menu-open-btn mb-5 text-dark">
        <i class="las la-bars"></i> Menu
    </button>
    <div class="documentation-menu-wrapper">
        <button class="sidebar-close-btn"><i class="las la-times"></i></button>
        <nav class="sidebar-menu">
            <ul class="menu">
                <li class="has_child">
                    <a href="#introduction">Get started</a>
                    <ul class="drp-menu">
                        <li><a href="#introduction">Introduction</a></li>
                        <li><a href="#currency">Supported Currencies</a></li>
                        <li><a href="#api-key">Get API Key</a></li>
                        <li><a href="#initiate">Initiate Payment</a></li>
                        <li><a href="#QPayment">Query Payment</a></li>
                        <li><a href="#payout">Payout</a></li>
                         <li><a href="#QPayout">Query Payout</a></li>
                         <li><a href="#api-balance">Get Balance</a></li>
                         <li><a href="#api-transactions">Get Transactions</a></li>
                        <li><a href="#ipn">IPN</a></li>
                        <li><a href="#koda-errors">Common Error</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

                <div class="col-lg-10">
                    <div class="doc-body">
                        <section class="doc-section" id="introduction">
                            <div class="doc-content">
                                <section id="introduction">
                                    <h3>Introduction</h3>
                                    <p class="mt-2">This section describes the <strong class="text--base">KodaPay</strong>
                                        payment gateway API.                                    </p>
                                    <hr>
                                    <p class="text-justify">
                                        <strong class="text--base">KodaPay</strong> The KodaPay API is simple to integrate into your company's software. Our API takes cURL requests, has well-formatted URLs, and produces JSON responses.                                    </p>
                                    <p class="text-justify">
                                        The API can be used in test mode without affecting your real data. The request is authenticated using the API key, which also establishes whether the payment is legitimate or not. For test mode just use the sandbox URL and In case of live mode use the live URL from section <a href="#initiate" class="anchor-color">Initiate Payment</a> .
                                    </p>
                                </section>
                            </div><!-- doc-content end -->
                        </div><!-- doc-section end -->
                        <div class="doc-section" id="currency">
                            <div class="doc-content">
                                <section id="">
                                    <h3>Supported Currencies</h3>
                                    <p class="mt-2">The supported currencies by <strong class="text--base">KodaPay</strong> are given below.</p>
                                    <hr>
                                </section>
                                <section id="setting-two">
                                    <div class="table-responsive">
                                        <table class="table table-bordered">
                                            <thead>
                                                <tr>
                                                    <th>Currency</th>
                                                    <th>Currency Symbol</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        <tr>
                                                        <td data-label="Currency">BDT</td>
                                                        <td data-label="Currency Symbol">৳</td>
                                                    </tr>
                                                                                                    <tr>
                                                        <td data-label="Currency">INR</td>
                                                        <td data-label="Currency Symbol">₹</td>
                                                    </tr>
                                                                                                    
                                                                                            </tbody>
                                        </table>
                                    </div><!-- table-responsive end -->
                                </section>
                            </div><!-- doc-content end -->
                        </div><!-- doc-section end -->
                        <div class="doc-section" id="api-key">
                            <div class="doc-content">
                                <section id="">
                                    <h3>Get The Api Key</h3>
                                    <p class="mt-2">How to obtain the api key is explained in this part.</p>
                                    <hr>
                                    <p class="text-justify">To access your <strong class="text--base">KodaPay</strong> merchant account, please log in. In case you don't have an account, you can <a target="_blank" class="anchor-color" href="./merchant">Click Here</a>.</p>
                                    <p>Now go to the <span class="text--base fw-bold">Account &gt; Settings &gt; API Key</span>
                                        from the merchant panel.</p>
                                    <p class="text-justify">The api keys can be found there which is <strong>Public key and Secret key.</strong>
                                        Use these keys to initiate the API request. Every time you can generate new API key by clicking                                        <span class="text--base">Generate Api Key</span>
                                        button. Remember do not share these keys with anyone.                                    </p>
                                </section>
                            </div><!-- doc-content end -->
                        </div><!-- doc-section end -->
                        <div class="doc-section" id="initiate">
                            <div class="doc-content">
                                <section id="">
                                    <h3>Initiate Payment</h3>
                                    <p class="mt-2">This section explains the procedure for initiating a payment.</p>
                                    <hr>
                                    <p>
                                        To start the payment process, use the provided sample code and carefully follow the required parameters. 
                                        The API endpoints below should be used to make a request.
                                    </p>
                                        <p><strong>Request Method:</strong> <span class="text--base">POST</span></p>
      
                                    <br>
                                    <p>
                                        <strong>Live Endpoint BD:</strong>
                                        <span class="text--base">https://{base_URL}/v2/payment/initiate</span>
                                    </p>
                                    <p class="d-flex align-items-center flex-wrap gap-2">
                                        <strong>Test Endpoint BD:</strong>
                                        <span class="text--base responsive-text">https://{base_URL}/v2/payment/test/initiate</span>
                                    </p>
                                    <p>
                                        <strong>Live Endpoint IN:</strong>
                                        <span class="text--base">https://{base_URL}/v2/payment/in/initiate</span>
                                    </p>

                                        <p class="d-flex align-items-center flex-wrap gap-2">
                                        <strong>Test Endpoint IN:</strong>
                                        <span class="text--base responsive-text">https://{base_URL}/v2/payment/test_in/initiate</span>
                                    </p>
       
                                </section>
                            </div>

                                <section id="setting-two">
    <p>Send a request to the endpoint with the following parameters and headers:</p>

    <!-- Header Authentication -->
    <div class="table-responsive">
        <h5>Headers</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Header Name</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>publicKey</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Public key provided by the system.
                    </td>
                </tr>
                <tr>
                    <td>secretKey</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Secret key used for authentication.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- Request Parameters -->
    <div class="table-responsive">
        <h5>Request Parameters</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Parameter Name</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>identifier</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Unique identifier for tracking payments.
                    </td>
                </tr>
                <tr>
                    <td>item</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                       Details of your payment or transaction
                    </td>
                </tr>
                <tr>
                    <td>currency</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Currency code (e.g., BDT, INR). Must be in uppercase.
                    </td>
                </tr>
                <tr>
                    <td>amount</td>
                    <td>decimal</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Payment amount.
                    </td>
                </tr>
                <tr>
                    <td>gateway_method</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Specifies the payment gateway method (e.g. bkash, nagad, upay, imps, upi, card, bank, wallet).
                    </td>
                </tr>
                <tr>
                    <td>ipn_url</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Instant Payment Notification (IPN) callback URL.
                    </td>
                </tr>
                <tr>
                    <td>success_url</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        URL to redirect users after a successful payment.
                    </td>
                </tr>
                <tr>
                    <td>cancel_url</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        URL to redirect users if the payment is canceled.
                    </td>
                </tr>

                <!-- Customer Section -->
                <tr>
                    <td colspan="3" class="text-center fw-bold">Customer Information</td>
                </tr>
                <tr>
                    <td>customer[]</td>
                    <td>array</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Customer details as an array.
                    </td>
                </tr>
                <tr>
                    <td>customer.first_name</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Customer's first name.</td>
                </tr>
                <tr>
                    <td>customer.last_name</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Customer's last name.</td>
                </tr>
                <tr>
                    <td>customer.email</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Valid customer email.</td>
                </tr>
                <tr>
                    <td>customer.mobile</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Valid customer mobile number.</td>
                </tr>

                <!-- Shipping Information -->
                <tr>
                    <td colspan="3" class="text-center fw-bold">Shipping Information</td>
                </tr>
                <tr>
                    <td>shipping_info[]</td>
                    <td>array</td>
                    <td>
                        <span class="badge badge--info font-size--12px">Optional</span>
                        Shipping details as an array.
                    </td>
                </tr>
                <tr>
                    <td>shipping_info.address_one</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Primary shipping address.</td>
                </tr>
                <tr>
                    <td>shipping_info.address_two</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Secondary shipping address.</td>
                </tr>
                <tr>
                    <td>shipping_info.city</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Shipping city.</td>
                </tr>
                <tr>
                    <td>shipping_info.country</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Shipping country.</td>
                </tr>

                <!-- Billing Information -->
                <tr>
                    <td colspan="3" class="text-center fw-bold">Billing Information</td>
                </tr>
                <tr>
                    <td>billing_info[]</td>
                    <td>array</td>
                    <td>
                        <span class="badge badge--info font-size--12px">Optional</span>
                        Billing details as an array.
                    </td>
                </tr>
                <tr>
                    <td>billing_info.address_one</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Primary billing address.</td>
                </tr>
                <tr>
                    <td>billing_info.address_two</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Secondary billing address.</td>
                </tr>
                <tr>
                    <td>billing_info.city</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Billing city.</td>
                </tr>
                <tr>
                    <td>billing_info.country</td>
                    <td>string</td>
                    <td><span class="badge badge--info font-size--12px">Optional</span> Billing country.</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
 <br>
 <section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>
// API URL
$url = 'https://api.example.com/payment'; // Replace with actual API URL

// Headers
$headers = [
    'Content-Type: application/json',
    'publicKey: YOUR_PUBLIC_KEY', // Replace with your public key
    'secretKey: YOUR_SECRET_KEY'  // Replace with your secret key
];

// Request parameters
$data = [
    'identifier' => 'uniqueIdentifier123', // Replace with your identifier
    'item' => 'Purchase T-shirt',
    'currency' => 'BDT', // Example: BDT, INR
    'amount' => 1000.00,
    'gateway_method' => 'bkash', // Example: bkash, nagad, upay, imps, upi, card, bank, wallet
    'ipn_url' => 'https://yourwebsite.com/ipn', // Your Instant Payment Notification URL
    'success_url' => 'https://yourwebsite.com/success', // URL to redirect after success
    'cancel_url' => 'https://yourwebsite.com/cancel', // URL to redirect after cancel

    // Customer information
    'customer' => [
        'first_name' => 'John',
        'last_name' => 'Doe',
        'email' => 'john.doe@example.com',
        'mobile' => '01234567890'
    ],

    // Optional shipping information
    'shipping_info' => [
        'address_one' => '123 Main St',
        'address_two' => 'Apt 4B',
        'city' => 'Dhaka',
        'country' => 'Bangladesh'
    ],

    // Optional billing information
    'billing_info' => [
        'address_one' => '123 Main St',
        'address_two' => 'Apt 4B',
        'city' => 'Dhaka',
        'country' => 'Bangladesh'
    ]
];

// Initialize cURL session
$ch = curl_init();

// Set cURL options
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

// Execute cURL request and get the response
$response = curl_exec($ch);

// Check for errors
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
} else {
    echo 'Response: ' . $response;
}

// Close cURL session
curl_close($ch);

</code>
  </pre>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example response from the API
{
    "statusCode": "SUCCESS_200",
    "status": "success",
    "statusMessage": "Payment initiated.",
    "redirect_url": "https://yourwebsite.com/redirect-url"
}
</code>
  </pre>
</div>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example error response from the API
{
    "statusCode": "ERR_004",
    "status": "error",
    "statusMessage": "Error messages."
}
</code>
  </pre>
</div>

</section>
 </div><!-- doc-content end -->
  
  <br>
  <div class="doc-section" id="QPayment">
        <section id="">
  <h3>Verify Payment Status</h3>
<br>
   <p><strong>Request Method:</strong> <span class="text--base">GET</span></p>
<p>
<strong>Live Endpoint BD:</strong>
<span class="text--base">https://{base_URL}/v2/payment/status</span>
</p>
<p class="d-flex align-items-center flex-wrap gap-2">
<strong>Test Endpoint BD:</strong>
<span class="text--base responsive-text">https://{base_URL}/v2/payment/test/status</span>
</p>
<p>
<strong>Live Endpoint IN:</strong>
<span class="text--base">https://{base_URL}/v2/payment/in/status</span>
</p>
<p class="d-flex align-items-center flex-wrap gap-2">
<strong>Test Endpoint IN:</strong>
<span class="text--base responsive-text">https://{base_URL}/v2/payment/test_in/status</span>
</p>
<!-- Request Parameters -->
    <div class="table-responsive">
        <h5>Request Parameters</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Parameter Name</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>identifier</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Unique identifier for tracking payouts.
                    </td>
                </tr>
               
            </tbody>
        </table>
    </div>
     <br>
<p>These statuses represent different stages of a payment verification process.</p>
    <ul>
        <li><strong>Initiated:</strong> The payment verification request has been started but not yet processed.</li>
        <li><strong>Canceled:</strong> The payment verification request has been canceled before completion.</li>
        <li><strong>Completed:</strong> The payment verification process has successfully confirmed the payment.</li>
    </ul>
 <br>
  <br>
 <section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>
// API URL
$url = 'https://api.example.com/v2/payment/status'; // Replace with actual API URL

// Headers
$headers = [
    'Content-Type: application/json',
    'publicKey: YOUR_PUBLIC_KEY', // Replace with your public key
    'secretKey: YOUR_SECRET_KEY'  // Replace with your secret key
];

// Request parameters
$data = [
    'identifier' => 'uniqueIdentifier123' // Replace with your identifier
];

</code>
  </pre>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>

        
// Example response from the API
{
    "statusCode": "SUCCESS_200",
    "statusMessage": "Successful",
    "verificationStatus": "Complete",
    "transactionStatus": "Initiated", // Initiated , canceled, completed
    "kodaInvoice": "KO123456789",
    "identifier": "uniqueIdentifier123",
    "gateway_method": 'CARD', // Example: bkash, nagad, upay, imps, upi, card, bank, wallet
    "amount": "1000.00",
    "currency": "BDT", // Example: BDT, INR
    "payerType": "Customer",
    "paymentCreateTime": 01/01/2020,
    "payerType": "Customer",
    "payerAccount": "0000000000000",
    "txid": "TXN123456789",
}

</code>
  </pre>
</div>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example error response from the API
{
    "statusCode": "ERR_004",
    "status": "error",
    "statusMessage": "Error messages."
}
</code>
  </pre>
</div>

</section>            
    </div> 
  <br>
<div class="doc-section" id="payout">
        <section id="">
  <h3>Payout</h3>
<br>
   <p><strong>Request Method:</strong> <span class="text--base">POST</span></p>
<p>
<strong>Live Endpoint BD:</strong>
<span class="text--base">https://{base_URL}/v2/payout/create</span>
</p>
<p class="d-flex align-items-center flex-wrap gap-2">
<strong>Test Endpoint BD:</strong>
<span class="text--base responsive-text">https://{base_URL}/v2/payout/test/create</span>
</p>
<p>
<strong>Live Endpoint IN:</strong>
<span class="text--base">https://{base_URL}/v2/payout/create</span>
</p>
<p class="d-flex align-items-center flex-wrap gap-2">
<strong>Test Endpoint IN:</strong>
<span class="text--base responsive-text">https://{base_URL}/v2/payout/test_in/create</span>
</p>
<!-- Request Parameters -->
    <div class="table-responsive">
        <h5>Request Parameters</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Parameter Name</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>identifier</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Unique identifier for tracking payouts.
                    </td>
                </tr>
                   <tr>
                    <td>beneficiary_name</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                           The name of the beneficiary (Use India only)
                    </td>
                </tr>
                <tr>
                    <td>currency</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Currency code (e.g., BDT, INR). Must be in uppercase.
                    </td>
                </tr>
                <tr>
                    <td>wallet</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Payout wallet.
                    </td>
                </tr>
                                <tr>
                    <td>ifsc</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        IFSC (Use India only IMPS Transfer)
                    </td>
                </tr>
                <tr>
                    <td>amount</td>
                    <td>decimal</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Payout amount.
                    </td>
                </tr>
                <tr>
                    <td>gateway_method</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Specifies the payment gateway method (e.g., bkash, nagad, imps, upi).
                    </td>
                </tr>
                <tr>
                    <td>ipn_url</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Payout Notification (IPN) callback URL.
                    </td>
                </tr>
                <tr>
                    <td>option</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                       Use one of the following values (Test Environment Only): completed,rejected
                    </td>
                </tr>

                <!-- Customer Section -->
                <tr>
                    <td colspan="3" class="text-center fw-bold">Customer Information</td>
                </tr>
                <tr>
                    <td>customer[]</td>
                    <td>array</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Customer details as an array.
                    </td>
                </tr>
                <tr>
                    <td>customer.first_name</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Customer's first name.</td>
                </tr>
                <tr>
                    <td>customer.last_name</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Customer's last name.</td>
                </tr>
                <tr>
                    <td>customer.email</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Valid customer email.</td>
                </tr>
                <tr>
                    <td>customer.mobile</td>
                    <td>string</td>
                    <td><span class="badge badge--danger font-size--12px">Required</span> Valid customer mobile number.</td>
                </tr>
            </tbody>
        </table>
    </div>
</section>
 <br>
 <section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>
// API URL
$url = 'https://api.example.com/payout'; // Replace with actual API URL

// Headers
$headers = [
    'Content-Type: application/json',
    'publicKey: YOUR_PUBLIC_KEY', // Replace with your public key
    'secretKey: YOUR_SECRET_KEY'  // Replace with your secret key
];

// Request parameters
$data = [
    'identifier' => 'uniqueIdentifier123', // Replace with your identifier
    "beneficiary_name" : "Beneficiary name", // Use India IMPS transfer only 
    'currency' => 'BDT', // BDT, INR
    'wallet' => '01234567890',
     "ifsc": "RATN0000240", // Use India IMPS transfer only 
    'amount' => 1000.00,
    'gateway_method' => 'CARD', // Example: bkash, nagad, imps, upi, card, bank, wallet
    'ipn_url' => 'https://yourwebsite.com/ipn', // Your Instant Payment Notification URL

    // Customer information
    'customer' => [
        'first_name' => 'John',
        'last_name' => 'Doe',
        'email' => 'john.doe@example.com',
        'mobile' => '01234567890'
    ]
];

// Initialize cURL session
$ch = curl_init();

// Set cURL options
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));

// Execute cURL request and get the response
$response = curl_exec($ch);

// Check for errors
if (curl_errno($ch)) {
    echo 'Error:' . curl_error($ch);
} else {
    echo 'Response: ' . $response;
}

// Close cURL session
curl_close($ch);

</code>
  </pre>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>

        
// Example response from the API
{
    "statusCode": "SUCCESS_200",
    "status": "success",
    "statusMessage": "Payout created.",
    "gateway_method": "BANK",
    "wallet": "01234567890",
    "amount": "1000.00",
    "currency": "BDT",
    "identifier": "TXN123456789",
    "kodaInvoice": "INV-20250208-001"
}

</code>
  </pre>
</div>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example error response from the API
{
    "statusCode": "ERR_004",
    "status": "error",
    "statusMessage": "Error messages."
}
</code>
  </pre>
</div>

</section>            
    </div> 
 <br>
  <div class="doc-section" id="QPayout">
        <section id="">
  <h3>Verify Payout Status</h3>
<br>
   <p><strong>Request Method:</strong> <span class="text--base">GET</span></p>
<p>
<strong>Live Endpoint BD:</strong>
<span class="text--base">https://{base_URL}/v2/payout/status</span>
</p>
<p class="d-flex align-items-center flex-wrap gap-2">
<strong>Test Endpoint BD:</strong>
<span class="text--base responsive-text">https://{base_URL}/v2/payout/test/status</span>
</p>
<p>
<strong>Live Endpoint IN:</strong>
<span class="text--base">https://{base_URL}/v2/payout/in/status</span>
</p>
<p class="d-flex align-items-center flex-wrap gap-2">
<strong>Test Endpoint IN:</strong>
<span class="text--base responsive-text">https://{base_URL}/v2/payout/test_in/status</span>
</p>

<!-- Request Parameters -->
    <div class="table-responsive">
        <h5>Request Parameters</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Parameter Name</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>identifier</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        Unique identifier for tracking payouts.
                    </td>
                </tr>
               
            </tbody>
        </table>
    </div>
     <br>
    <p>These statuses indicate different stages in verifying a payout request.</p>
    <ul>
        <li><strong>Pending:</strong> The payout request is under review and awaiting approval.</li>
        <li><strong>Canceled:</strong> The payout request has been canceled and will not be processed.</li>
        <li><strong>Completed:</strong> The payout request has been successfully processed and funds have been transferred.</li>
    </ul>
 <br>
  <br>
 <section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>
// API URL
$url = 'https://api.example.com/v2/payout/status'; // Replace with actual API URL

// Headers
$headers = [
    'Content-Type: application/json',
    'publicKey: YOUR_PUBLIC_KEY', // Replace with your public key
    'secretKey: YOUR_SECRET_KEY'  // Replace with your secret key
];

// Request parameters
$data = [
    'identifier' => 'uniqueIdentifier123' // Replace with your identifier
];

</code>
  </pre>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>

        
// Example response from the API
{
    "statusCode": "SUCCESS_200",
    "statusMessage": "Successful",
    "verificationStatus": "Complete",
    "transactionStatus": "pending", // pending , canceled, completed
    "kodaInvoice": "KO123456789",
    "identifier": "uniqueIdentifier123",
    "gateway_method": 'CARD', // Example: CARD, BANK, WALLET
    "wallet": "0000000000",
    "amount": "1000.00",
    "currency": "BDT",
    "payoutCreateTime": 01/01/2020,
    "txid": "TXN123456789",
    "errorMessage": "Error messages.",
}

</code>
  </pre>
</div>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example error response from the API
{
    "statusCode": "ERR_004",
    "status": "error",
    "statusMessage": "Error messages."
}
</code>
  </pre>
</div>

</section>            
    </div> 
<br>
  <div class="doc-section" id="api-balance">
        <section id="">
  <h3>Balance Check</h3>
<br>
   <p><strong>Request Method:</strong> <span class="text--base">GET</span></p>
<p>
<strong>Live Endpoint BD:</strong>
<span class="text--base">https://{base_URL}/v2/user/bd/balance</span>
</p>
<p>
<strong>Live Endpoint IN:</strong>
<span class="text--base">https://{base_URL}/v2/user/in/balance</span>
</p>
<!-- Request Parameters -->
    

 <br>
  <br>
 <section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>
// API URL
$url = 'https://api.example.com/v2/user/bd/balance'; // Replace with actual API URL

// Headers
$headers = [
    'Content-Type: application/json',
    'publicKey: YOUR_PUBLIC_KEY', // Replace with your public key
    'secretKey: YOUR_SECRET_KEY'  // Replace with your secret key
];

</code>
  </pre>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>

        
// Example response from the API
{
    "statusCode": "SUCCESS_200",
    "balance": "1000.00",
}

</code>
  </pre>
</div>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example error response from the API
{
    "statusCode": "ERR_004",
    "status": "error",
    "statusMessage": "Error messages."
}
</code>
  </pre>
</div>

</section>  
<br>
  <div class="doc-section" id="api-transactions">
        <section id="">
  <h3>Transactions</h3>
<br>
   <p><strong>Request Method:</strong> <span class="text--base">GET</span></p>
<p>
<strong>Live Endpoint BD:</strong>
<span class="text--base">https://{base_URL}/v2/transactions/list</span>
</p>

<!-- Request Parameters -->
    <div class="table-responsive">
        <h5>Request Parameters</h5>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Parameter Name</th>
                    <th>Type</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data_type</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Required</span>
                        	Type of transaction. Allowed values: payment, payout
                    </td>
                </tr>
                               <tr>
                    <td>status</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Optional</span>
                	Status of the transactions. Allowed values: pending, completed, rejected. If omitted, all statuses are included.
                    </td>
                </tr>
                                <tr>
                    <td>start_date</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Optional</span>
                      Start date for filtering transactions (format: dd-mm-yyyy). If omitted, no lower date bound is applied.
                    </td>
                </tr>
                                <tr>
                    <td>end_date</td>
                    <td>string</td>
                    <td>
                        <span class="badge badge--danger font-size--12px">Optional</span>
                      End date for filtering transactions (format: dd-mm-yyyy). If omitted, no upper date bound is applied.
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
     <br>
    <p>Info</p>
    <ul>
        <li>Data_type is mandatory and must be payment or payout.</li>
        <li>If status is not provided, transactions of all statuses are returned.</li>
        <li>If both start_date and end_date are provided, only transactions within that inclusive date range are returned.</li>
        <li>If date parameters are missing, transactions from all dates are returned.</li>
    </ul>
 <br>
  <br>
 <section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>
// API URL
$url = 'https://api.example.com/v2/transactions/list?data_type=payment&status
=pending&start_date=30-05-2025&end_date=30-05-2025'; // Replace with actual API URL

// Headers
$headers = [
    'Content-Type: application/json',
    'publicKey: YOUR_PUBLIC_KEY', // Replace with your public key
    'secretKey: YOUR_SECRET_KEY'  // Replace with your secret key
];


</code>
  </pre>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>

        
// Example response from the API
{
  "statusCode": "SUCCESS_200",
  "status": "success",
  "statusMessage": "Data retrieved successfully.",
  "data": [
    {
      "type": "payment", // payment, payout
      "payment_method": "nagad",
      "identifier": "MvY0hMotsWiptwqLY",
      "wallet": "",
      "txid": "",
      "amount": "3,000.00",
      "charge": "0.00",
      "after_charge": "0.00",
      "status": "Pending"
      "created": "2025-05-30T10:46:42.000000Z",
      "updated": "2025-05-30T10:50:42.000000Z",
    }
    // ... more transaction objects
  ]
}

</code>
  </pre>
</div>

<div class="response-output">
  <h4>Response:</h4>
  <pre>
<code>
// Example error response from the API
{
    "statusCode": "ERR_004",
    "status": "error",
    "statusMessage": "Error messages."
}
</code>
  </pre>
</div>

</section> 
    </div> 
    
                        <div class="doc-section" id="ipn">
    <div class="doc-content">
        <section id="">
            <h3>Validate The Payment and IPN</h3>
            <p class="mt-2">This section describes the process to get your instant payment notification.</p>
            <hr>
            <p>
                To initiate the payment, follow the example code and be careful with the parameters. You will need to make a request to the following API endpoint.
            </p>
            <p>
                <strong>End Point:</strong> <span class="text--base">Your business application IPN URL.</span>
            </p>
            <p><strong>Request Method:</strong> <span class="text--base">POST</span></p>
        </section>

        <section id="setting-two">
            <p>You will get the following parameters:</p>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Param Name</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td data-label="Param Name">status</td>
                            <td data-label="Description">Payment success status.</td>
                        </tr>
                        <tr>
                            <td data-label="Param Name">identifier</td>
                            <td data-label="Description">Identifier is used to identify the payment on your end.</td>
                        </tr>
                        <tr>
                            <td data-label="Param Name">signature</td>
                            <td data-label="Description">A hash signature to verify the payment on your end.</td>
                        </tr>
                        <tr>
                            <td data-label="Param Name">data</td>
                            <td data-label="Description">Contains basic information with status, kodaInvoice, identifier, gateway_method, wallet, amount, transaction ID, etc.</td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- table-responsive end -->
             <br>
    <p>These statuses indicate the final result of a transaction callback from an external service or API.</p>
    <ul>
        <li><strong>Completed:</strong> The transaction has been successfully processed and finalized.</li>
        <li><strong>Rejected:</strong> The transaction was not approved due to validation failure or other issues.</li>
    </ul> 
        </section>
        
    </div><!-- doc-content end -->
</div><!-- doc-section end -->

<section class="table table-bordered">
  <h3>Example PHP Code</h3>
  <pre>
<code>

    //Receive the response parameter
    $code = $_POST['statusCode'];
    $status = $_POST['status'];
    $kodaInvoice = $_POST['kodaInvoice'];
    $paymentType = $_POST['ipnType']; // 
    $currency = $_POST['currency'];
    $signature = $_POST['signature'];
    $data = $_POST['data'];
    
    $customKey = json_encode([
            'status' => $data['status'],
            'kodaInvoice' => $data['kodaInvoice'],
            'identifier' => $data['identifier'],
            'gateway_method' => $data['gateway_method'],
            'amount' => $data['amount'],
        ]);
        
    $secret = 'YOUR_SECRET_KEY';
    $mySignature = hash_hmac('sha256', $customKey, $secret);

    if($status == "completed" && $signature == $mySignature &&  $identifier ==  $data['identifier']){
//your operation logic
    }

</code>
  </pre>


</section>
            <div class="doc-section" id="koda-errors">
  <div class="doc-content">
    <section>
      <h4>Koda API Status Codes & Messages</h4>
      <p class="mt-2">Below are the detailed status codes and messages returned by the Koda API related requests.</p>

<!-- Payment Create API -->
<h5>API Verify Codes & Messages</h5>
<div class="table-responsive">
  <table class="table table-bordered small">
    <thead>
      <tr>
        <th>Status Code</th>
        <th>Status Message</th>
      </tr>
    </thead>
    <tbody>
      <!-- Errors -->
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Missing : Public key is required.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Missing : Secret key  is required.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Service unavailable: System is under maintenance. Please try again later.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Unauthorized: Invalid API credentials. Please check your public and secret keys.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Access denied: Your IP address 0.0.0.0 is not authorized for this account.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Access denied: Account is inactive or does not exist.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Unexpected error: &lt;error message&gt;</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Payment Create API -->
<h5>Payment Create API Status Codes & Messages</h5>
<div class="table-responsive">
  <table class="table table-bordered small">
    <thead>
      <tr>
        <th>Status Code</th>
        <th>Status Message</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-success">
        <td><strong>SUCCESS_200</strong></td>
        <td>Payment initiated.</td>
      </tr>

      <!-- Errors -->
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Identifier ID is required.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Item ID is required.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Please enter the payment amount.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>The amount must be a valid numeric value.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Select a valid payment gateway method.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Currency selection is required.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>API verification failed.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Requested currency is not allowed.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>This identifier is already in use. Please choose a different one.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Request initiate failed. Please try again shortly.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>The amount you entered is below the minimum limit of X BDT.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>The amount you entered exceeds the maximum limit of X BDT.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Failed to process the request due to a bKash server error. Please try again later.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>An unexpected error occurred while communicating with bKash. Please try again later.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Nagad(Null) an issue initiate your request. Please retry after some time.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Unknown error occurred.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Nagad error.</td>
      </tr>
      <tr class="table-danger">
        <td>ERR_004</td>
        <td>Unexpected error: &lt;error message&gt;</td>
      </tr>
    </tbody>
  </table>
</div>

      <!-- Payout Create API -->
      <h5 class="mt-4">Payout Create API Status Codes & Messages</h5>
      <div class="table-responsive">
        <table class="table table-bordered small">
          <thead>
            <tr>
              <th>Status Code</th>
              <th>Status Message</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-success">
              <td><strong>SUCCESS_200</strong></td>
              <td>Payout created.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>The identifier ID is required.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Please provide wallet number.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>The wallet must be a valid number.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Wallet number is invalid.</td>
            </tr>
            
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Please specify the amount.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>The amount must be a valid number.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Please specify the payment gateway.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Invalid payment gateway.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>The currency is required.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>API verification failed.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Requested currency is not allowed.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>This identifier is already in use. Please choose a different one.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Insufficient balance.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Failed to create payout request. Please try again later.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Unexpected error: &lt;error message&gt;</td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Payout Status API -->
      <h5 class="mt-4">Payout Status API Status Codes & Messages</h5>
      <div class="table-responsive">
        <table class="table table-bordered small">
          <thead>
            <tr>
              <th>Status Code</th>
              <th>Status Message</th>
            </tr>
          </thead>
          <tbody>
            <tr class="table-success">
              <td><strong>SUCCESS_200</strong></td>
              <td>Successful</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Please provide the identifier.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>API verification failed.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Transaction not found for the provided identifier.</td>
            </tr>
            <tr class="table-danger">
              <td>ERR_004</td>
              <td>Unexpected error: &lt;error message&gt;</td>
            </tr>
          </tbody>
        </table>
      </div>
    </section>
  </div>
</div>



                    </div>
                </div>
            </div>
        </div>
    </div>
      
    <!-- jQuery library -->
    <script src="{{ asset('assets/global/js/jquery-3.7.1.min.js') }}"></script>
    <!-- Bootstrap js -->
    <script src="{{ asset('assets/global/js/bootstrap.bundle.min.js') }}"></script>

        <script src="{{ asset('assets/templates/basic/frontend/js/clipboard.min.js') }}"></script>
    <script src="{{ asset('assets/templates/basic/frontend/js/menu-spy.min.js') }}"></script>
    <script src="{{ asset('assets/templates/basic/frontend/js/jquery.easing.min.js') }}"></script>

    <!-- Popper js -->
    <script src="{{ asset('assets/templates/basic/js/popper.min.js') }}"></script>
    <!-- main js -->
    <script src="{{ asset('assets/templates/basic/frontend/js/main.js') }}"></script>

    
    <link href="{{ asset('assets/global/css/iziToast.min.css') }}" rel="stylesheet">
<link href="{{ asset('assets/global/css/iziToast_custom.css') }}" rel="stylesheet">
<script src="{{ asset('assets/global/js/iziToast.min.js') }}"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const sections = document.querySelectorAll(".doc-section");
    const menuLinks = document.querySelectorAll(".sidebar-menu .menu li a");

    function updateActiveLink() {
        let scrollPosition = window.scrollY + 100; // Adjust offset

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute("id");

            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                menuLinks.forEach(link => {
                    link.classList.remove("active");
                    if (link.getAttribute("href") === `#${sectionId}`) {
                        link.classList.add("active");
                    }
                });
            }
        });
    }

    window.addEventListener("scroll", updateActiveLink);
    updateActiveLink(); // Call once on page load
});
</script>

<style>
  .table pre {
    background-color: #2d2d2d; /* Dark background */
    color: #f8f8f2; /* Light text color */
    padding: 20px;
    border-radius: 10px;
    font-size: 16px;
    font-family: Consolas, monospace; /* Monospace font for code */
    overflow-x: auto;
  }

  h3 {
    text-align: center;
    color: #61afef; /* Title color */
    font-size: 24px;
  }

  .response-output, .error-output {
    margin-top: 20px;
    background-color: #23272a;
    padding: 10px;
    border-radius: 8px;
  }

  .response-output h4, .error-output h4 {
    color: #98c379;
    font-size: 20px;
  }

  .response-output pre, .error-output pre {
    background-color: #282c34;
    color: #abb2bf;
  }

  /* Syntax highlighting for different parts */
  .table pre code {
    display: block;
    color: #f8f8f2; /* Default text color */
  }

  /* Highlighting comments */
  .table pre code .comment {
    color: #6a9955; /* Greenish color for comments */
  }

  /* Highlighting strings */
  .table pre code .string {
    color: #d69d85; /* Light brown color for strings */
  }

  /* Highlighting variables */
  .table pre code .variable {
    color: #61afef; /* Blue for variables */
  }

  /* Highlighting functions */
  .table pre code .function {
    color: #e5c07b; /* Yellow for functions */
  }
  
  @media (max-width: 768px) {
    .documentation-menu-wrapper {
        position: fixed;
        left: -100%;
        top: 0;
        width: 250px;
        height: 100%;
        background: #fff;
        transition: left 0.3s ease-in-out;
    }

    .documentation-menu-wrapper.active {
        left: 0;
    }
}

.sidebar-menu-open-btn {
    cursor: pointer;
}

.sidebar-close-btn {
    cursor: pointer;
}

</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const menuWrapper = document.querySelector(".documentation-menu-wrapper");
    const openBtn = document.querySelector(".sidebar-menu-open-btn");
    const closeBtn = document.querySelector(".sidebar-close-btn");

    openBtn.addEventListener("click", function () {
        menuWrapper.classList.add("active");
    });

    closeBtn.addEventListener("click", function () {
        menuWrapper.classList.remove("active");
    });
});
</script>

</body></html>