<!DOCTYPE html>

<html class="light" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>{{ config('app.name', 'Nusa OTP') }}</title>

    <link rel="icon" type="image/png" href="{{ asset('public/assets/icon-nusaotp.ico') }}">
    <link rel="apple-touch-icon" href="{{ asset('public/assets/icon-nusaotp.ico') }}">

    <meta property="og:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta property="og:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta property="og:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nusaotp.com">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta name="twitter:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta name="twitter:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
     <meta name="keywords" content="Nusa OTP, nomor virtual murah, Nusa OTP nokos, Nokos, beli nomor virtual, OTP murah, Nokos Indonesia, OTP Wa, nomor virtual, nomor WhatsApp, nomor Telegram, nomor Gmail, nomor registrasi, layanan verifikasi akun, platform nomor virtual, nomor online, nomor SMS verifikasi, nokos wa, nokos indonesia, nomor kosong, nomor virtual murah, otp murah, nokos wa murah, nokos wa, nomor kosong murah, nomor murah, beli nomor kosong, jasa nomor kosong murah, jasa nomor kosong, jasa otp murah, beli nomor kosong wa, nomor kosong">
    
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;family=JetBrains+Mono:wght@400;500&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
          darkMode: "class",
          theme: {
            extend: {
              "colors": {
                      "surface-bright": "#f8f9ff",
                      "error": "#ba1a1a",
                      "on-primary": "#ffffff",
                      "surface-container-lowest": "#ffffff",
                      "primary-fixed-dim": "#b8c4ff",
                      "inverse-primary": "#b8c4ff",
                      "on-tertiary-fixed": "#002113",
                      "on-secondary-fixed": "#001f26",
                      "on-primary-fixed": "#001453",
                      "outline-variant": "#c4c5d5",
                      "on-background": "#0b1c30",
                      "secondary": "#00687a",
                      "tertiary-fixed-dim": "#4edea3",
                      "on-tertiary": "#ffffff",
                      "on-error": "#ffffff",
                      "error-container": "#ffdad6",
                      "secondary-container": "#57dffe",
                      "inverse-on-surface": "#eaf1ff",
                      "tertiary-fixed": "#6ffbbe",
                      "on-tertiary-fixed-variant": "#005236",
                      "background": "#f8f9ff",
                      "surface-container-highest": "#d3e4fe",
                      "secondary-fixed-dim": "#4cd7f6",
                      "surface": "#f8f9ff",
                      "on-secondary-fixed-variant": "#004e5c",
                      "on-error-container": "#93000a",
                      "on-primary-container": "#a8b8ff",
                      "surface-tint": "#3755c3",
                      "on-surface": "#0b1c30",
                      "on-secondary-container": "#006172",
                      "surface-variant": "#d3e4fe",
                      "tertiary": "#003d27",
                      "surface-container-high": "#dce9ff",
                      "on-secondary": "#ffffff",
                      "tertiary-container": "#00563a",
                      "secondary-fixed": "#acedff",
                      "primary-container": "#1e40af",
                      "on-primary-fixed-variant": "#173bab",
                      "primary-fixed": "#dde1ff",
                      "surface-container": "#e5eeff",
                      "inverse-surface": "#213145",
                      "primary": "#00288e",
                      "on-tertiary-container": "#3fd298",
                      "on-surface-variant": "#444653",
                      "outline": "#757684",
                      "surface-dim": "#cbdbf5",
                      "surface-container-low": "#eff4ff"
              },
              "borderRadius": {
                      "DEFAULT": "0.25rem",
                      "lg": "0.5rem",
                      "xl": "0.75rem",
                      "2xl": "1rem",
                      "full": "9999px"
              },
              "spacing": {
                      "section-gap": "2rem",
                      "gutter": "1rem",
                      "stack-sm": "0.5rem",
                      "stack-lg": "1.5rem",
                      "container-margin": "1rem",
                      "stack-md": "1rem"
              },
              "fontFamily": {
                      "headline-md": ["Inter"],
                      "headline-lg": ["Inter"],
                      "body-lg": ["Inter"],
                      "number-display": ["Inter"],
                      "label-md": ["Inter"],
                      "headline-lg-mobile": ["Inter"],
                      "body-md": ["Inter"],
                      "mono": ["JetBrains Mono"]
              },
              "fontSize": {
                      "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                      "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                      "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
                      "number-display": ["24px", {"lineHeight": "32px", "letterSpacing": "0.1em", "fontWeight": "700"}],
                      "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
                      "headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
                      "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}]
              }
            },
          },
        }
    </script>
<style>
        body { font-family: 'Inter', sans-serif; background-color: #f8f9ff; }
        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
        .code-container { font-family: 'JetBrains Mono', monospace; background-color: #0b1c30; color: #d3e4fe; position: relative; }
        .code-container pre { padding: 1rem; overflow-x: auto; font-size: 0.8125rem; line-height: 1.5; }
        .endpoint-badge { font-family: 'Inter', sans-serif; font-weight: 700; border-radius: 4px; padding: 2px 8px; font-size: 0.7rem; }
        .get-badge { background-color: #10b981; color: white; }
        .post-badge { background-color: #3b82f6; color: white; }
        .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 4px; padding: 4px; color: #ffffff; cursor: pointer; transition: background 0.2s; z-index: 10; }
        .copy-btn:hover { background: rgba(255,255,255,0.2); }
        .card-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03); }
        .sidebar-item-active { background-color: #00288e; color: white; }
        html { scroll-behavior: smooth; }
        ::-webkit-scrollbar { width: 4px; height: 4px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #d3e4fe; border-radius: 10px; }
        .tabs{
    display:flex;
    gap:.5rem;
    flex-wrap:wrap;
}

.tab{
    padding:.55rem 1rem;
    border-radius:9999px;
    background:#ffffff;
    color:#444653;
    border:1px solid #d3e4fe;
    font-size:.8rem;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.tab:hover{
    background:#eff4ff;
}

.tab.active{
    background:#dce9ff !important;
    color:#00288e !important;
    border-color:#9fc5ff !important;
}
.no-scrollbar::-webkit-scrollbar{
    display:none;
}

.no-scrollbar{
    -ms-overflow-style:none;
    scrollbar-width:none;
}
.tab-content{
    display:none;
    animation:fade .2s ease;
}

.tab-content.active{
    display:block;
}
.tab.active{
    background: rgb(var(--color-primary));
    color: rgb(var(--color-on-primary));
    border-color: rgb(var(--color-primary));
}
@keyframes fade{
    from{
        opacity:0;
        transform:translateY(4px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
    </style>
</head>
<body class="text-on-surface bg-surface min-h-screen pb-24 md:pb-0">
<!-- TopAppBar Shell -->
@include('apk.partials.header')
<main class="flex-1 px-container-margin py-stack-md space-y-section-gap mb-24">
<!-- Section Header -->
<div class="mb-12">
<h1 class="font-headline-lg-mobile md:font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-2">Dokumentasi API</h1>
<p class="text-body-md text-on-surface-variant">Integrasikan layanan verifikasi OTP virtual ke dalam aplikasi Anda dengan mudah dan cepat.</p>
</div>
<div class="space-y-16">
<!-- Authentication -->
<section class="scroll-mt-24" id="authentication">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
<span class="material-symbols-outlined text-primary">lock</span>
</div>
<h2 class="font-headline-md text-headline-md text-on-surface">Authentication</h2>
</div>
<div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">
<p class="text-body-md text-on-surface-variant mb-6">
                        Semua request API membutuhkan <code class="bg-surface-container-high px-1.5 py-0.5 rounded text-primary font-mono text-xs font-bold">Bearer API KEY</code>. Anda dapat mengelola API Key Anda melalui dashboard NusaOTP di tab Pengaturan API.
                    </p>
<div class="code-container rounded-xl overflow-hidden">
<button class="copy-btn" onclick="copyCode(this)"><span class="material-symbols-outlined text-base">content_copy</span></button>
<pre><code>Authorization: Bearer YOUR_API_KEY</code></pre>
</div>
</div>
</section>
<!-- Base URL -->
<section class="scroll-mt-24" id="base-url">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
<span class="material-symbols-outlined text-primary">link</span>
</div>
<h2 class="font-headline-md text-headline-md text-on-surface">Base URL</h2>
</div>
<div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">
<p class="text-body-md text-on-surface-variant mb-6">
                        Base endpoint utama API untuk semua request. Pastikan menggunakan protokol <code class="text-primary font-mono text-xs font-bold">HTTPS</code> untuk keamanan data.
                    </p>
<div class="code-container rounded-xl overflow-hidden">
<button class="copy-btn" onclick="copyCode(this)"><span class="material-symbols-outlined text-base">content_copy</span></button>
<pre><code>https://nusaotp.com/api</code></pre>
</div>
</div>
</section>
<!-- Response Format -->
<section class="scroll-mt-24" id="response-format">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center">
<span class="material-symbols-outlined text-primary">data_object</span>
</div>
<h2 class="font-headline-md text-headline-md text-on-surface">Response Format</h2>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">
<p class="font-bold text-[10px] text-outline uppercase tracking-widest mb-4">Success Response</p>
<div class="code-container rounded-xl overflow-hidden">
<pre><code>{
  "success": true,
  "data": { ... }
}</code></pre>
</div>
</div>
<div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">
<p class="font-bold text-[10px] text-outline uppercase tracking-widest mb-4">Error Response</p>
<div class="code-container rounded-xl overflow-hidden">
<pre><code>{
  "success": false,
  "error": {
    "code": "ERROR_CODE",
    "message": "Human-readable message"
  }
}</code></pre>
</div>
</div>
</div>
</section>
<!-- Balance -->
<section class="scroll-mt-24" id="balance">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Balance
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Melihat saldo akun API.
            </p>
        </div>

        <span class="endpoint-badge get-badge">
            GET
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <!-- Tabs -->
<div class="overflow-x-auto no-scrollbar mb-5 tabs">
    <div class="flex gap-2 w-max">

        <button class="tab active" data-tab="balance-endpoint">
            Endpoint
        </button>

        <button class="tab" data-tab="balance-curl">
            cURL
        </button>

        <button class="tab" data-tab="balance-js">
            JavaScript
        </button>

        <button class="tab" data-tab="balance-python">
            Python
        </button>

        <button class="tab" data-tab="balance-success">
            Success
        </button>

        <button class="tab" data-tab="balance-error">
            Error
        </button>

    </div>

</div>

        <!-- Endpoint -->
        <div id="balance-endpoint" class="tab-content active">

            <div class="bg-surface-container text-on-surface-variant px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border-x border-t border-surface-container-high">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden border-x border-b border-surface-container-high">
                <pre><code>/balance</code></pre>
            </div>

        </div>

        <!-- CURL -->
        <div id="balance-curl" class="tab-content">

            <div class="bg-surface-container text-on-surface-variant px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border-x border-t border-surface-container-high">
                cURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden border-x border-b border-surface-container-high">
<pre><code>curl -X GET https://nusaotp.com/api/balance \
-H "Authorization: Bearer YOUR_API_KEY"</code></pre>
            </div>

        </div>

        <!-- JavaScript -->
        <div id="balance-js" class="tab-content">

            <div class="bg-surface-container text-on-surface-variant px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border-x border-t border-surface-container-high">
                JavaScript
            </div>

            <div class="code-container rounded-b-lg overflow-hidden border-x border-b border-surface-container-high">
<pre><code>fetch("https://nusaotp.com/api/balance", {
    method: "GET",
    headers: {
        "Authorization": "Bearer YOUR_API_KEY",
        "Accept": "application/json"
    }
})
.then(res => res.json())
.then(console.log);</code></pre>
            </div>

        </div>

        <!-- Python -->
        <div id="balance-python" class="tab-content">

            <div class="bg-surface-container text-on-surface-variant px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border-x border-t border-surface-container-high">
                Python
            </div>

            <div class="code-container rounded-b-lg overflow-hidden border-x border-b border-surface-container-high">
<pre><code>import requests

url = "https://nusaotp.com/api/balance"

headers = {
    "Authorization": "Bearer YOUR_API_KEY"
}

response = requests.get(url, headers=headers)

print(response.json())</code></pre>
            </div>

        </div>

        <!-- Success -->
        <div id="balance-success" class="tab-content">

            <div class="bg-surface-container text-on-surface-variant px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border-x border-t border-surface-container-high">
                Success Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden border-x border-b border-surface-container-high">
<pre><code>{
  "success": true,
  "data": {
    "balance": 25145,
    "currency": "IDR"
  }
}</code></pre>
            </div>

        </div>

        <!-- Error -->
        <div id="balance-error" class="tab-content">

            <div class="bg-surface-container text-on-surface-variant px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border-x border-t border-surface-container-high">
                Error Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden border-x border-b border-surface-container-high">
<pre><code>{
  "success": false,
  "message": "API key required"
}

OR

{
  "success": false,
  "message": "Invalid API key"
}</code></pre>
            </div>

        </div>

    </div>

</section>
<!-- Countries -->
<!-- Countries -->
<section class="scroll-mt-24" id="countries">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Countries
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Mendapatkan daftar negara yang tersedia.
            </p>
        </div>

        <span class="endpoint-badge get-badge">
            GET
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <!-- Tabs -->
        <div class="overflow-x-auto no-scrollbar mb-5 tabs">
            <div class="flex gap-2 w-max">

                <button class="tab active" data-tab="country-endpoint">Endpoint</button>

                <button class="tab" data-tab="country-params">Params</button>

                <button class="tab" data-tab="country-curl">cURL</button>

                <button class="tab" data-tab="country-js">JavaScript</button>

                <button class="tab" data-tab="country-python">Python</button>

                <button class="tab" data-tab="country-success">Success</button>

                <button class="tab" data-tab="country-error">Error</button>

                <button class="tab" data-tab="country-field">Field</button>

            </div>
        </div>

        <!-- Endpoint -->
        <div id="country-endpoint" class="tab-content active">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>/v2/country</code></pre>
            </div>

        </div>

        <!-- Params -->
        <div id="country-params" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Parameters
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>-</code></pre>
            </div>

        </div>

        <!-- CURL -->
        <div id="country-curl" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                cURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>curl -X GET https://nusaotp.com/api/v2/country \
-H "Authorization: Bearer YOUR_API_KEY"</code></pre>
            </div>

        </div>

        <!-- JS -->
        <div id="country-js" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                JavaScript
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>fetch("https://nusaotp.com/api/v2/country", {
    method: "GET",
    headers: {
        "Authorization": "Bearer YOUR_API_KEY",
        "Accept": "application/json"
    }
})
.then(res => res.json())
.then(console.log);</code></pre>
            </div>

        </div>

        <!-- Python -->
        <div id="country-python" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Python
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>import requests

url = "https://nusaotp.com/api/v2/country"

headers = {
    "Authorization":"Bearer YOUR_API_KEY"
}

response = requests.get(url,headers=headers)

print(response.json())</code></pre>
            </div>

        </div>

        <!-- Success -->
        <div id="country-success" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Success Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": true,
  "data": [
    {
      "id": 7,
      "code": "ID",
      "name": "Indonesia",
      "dial_code": "+62"
    }
  ]
}</code></pre>
            </div>

        </div>

        <!-- Error -->
        <div id="country-error" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Error Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": false,
  "message": "Failed to fetch countries"
}

OR

{
  "message": "Unauthenticated."
}</code></pre>
            </div>

        </div>

        <!-- Field -->
        <div id="country-field" class="tab-content">

            <div class="overflow-x-auto rounded-xl border border-surface-container-high">

                <table class="w-full text-left">

                    <thead class="bg-surface-container">

                        <tr>

                            <th class="px-4 py-3">Field</th>

                            <th class="px-4 py-3">Type</th>

                            <th class="px-4 py-3">Description</th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-surface-container-high">

                        <tr>

                            <td class="px-4 py-3 font-mono">id</td>

                            <td class="px-4 py-3">Number</td>

                            <td class="px-4 py-3">Country ID (used in other endpoints)</td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">code</td>

                            <td class="px-4 py-3">String</td>

                            <td class="px-4 py-3">ISO Country Code</td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">name</td>

                            <td class="px-4 py-3">String</td>

                            <td class="px-4 py-3">Country Name</td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">dial_code</td>

                            <td class="px-4 py-3">String</td>

                            <td class="px-4 py-3">Phone Dialing Code</td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</section>
<!-- Services -->
<!-- Services -->
<section class="scroll-mt-24" id="services">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Services
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Mendapatkan daftar layanan OTP berdasarkan negara.
            </p>
        </div>

        <span class="endpoint-badge get-badge">
            GET
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <!-- Tabs -->
        <div class="overflow-x-auto no-scrollbar mb-5 tabs">

            <div class="flex gap-2 w-max">

                <button class="tab active" data-tab="services-endpoint">
                    Endpoint
                </button>

                <button class="tab" data-tab="services-params">
                    Params
                </button>

                <button class="tab" data-tab="services-curl">
                    cURL
                </button>

                <button class="tab" data-tab="services-js">
                    JavaScript
                </button>

                <button class="tab" data-tab="services-python">
                    Python
                </button>

                <button class="tab" data-tab="services-success">
                    Success
                </button>

                <button class="tab" data-tab="services-error">
                    Error
                </button>

                <button class="tab" data-tab="services-field">
                    Field
                </button>

            </div>

        </div>

        <!-- Endpoint -->
        <div id="services-endpoint" class="tab-content active">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>/v2/services</code></pre>
            </div>

        </div>

        <!-- Params -->
        <div id="services-params" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Parameters
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "country_id": 7
}</code></pre>
            </div>

        </div>

        <!-- CURL -->
        <div id="services-curl" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                cURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>curl -X GET "https://nusaotp.com/api/v2/services?country_id=7" \
-H "Authorization: Bearer YOUR_API_KEY"</code></pre>
            </div>

        </div>

        <!-- JavaScript -->
        <div id="services-js" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                JavaScript
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>fetch("https://nusaotp.com/api/v2/services?country_id=7", {
    method: "GET",
    headers: {
        "Authorization": "Bearer YOUR_API_KEY",
        "Accept": "application/json"
    }
})
.then(res => res.json())
.then(console.log);</code></pre>
            </div>

        </div>

        <!-- Python -->
        <div id="services-python" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Python
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>import requests

url = "https://nusaotp.com/api/v2/services"

params = {
    "country_id": 7
}

headers = {
    "Authorization": "Bearer YOUR_API_KEY"
}

response = requests.get(
    url,
    headers=headers,
    params=params
)

print(response.json())</code></pre>
            </div>

        </div>

        <!-- Success -->
        <div id="services-success" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Success Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "WhatsApp"
    },
    {
      "id": 2,
      "name": "Telegram"
    }
  ]
}</code></pre>
            </div>

        </div>

        <!-- Error -->
        <div id="services-error" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Error Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": false,
  "message": "Failed to fetch services"
}</code></pre>
            </div>

        </div>

        <!-- Field Explanation -->
        <div id="services-field" class="tab-content">

            <div class="overflow-x-auto rounded-xl border border-surface-container-high">

                <table class="w-full text-left">

                    <thead class="bg-surface-container">

                        <tr>

                            <th class="px-4 py-3">
                                Field
                            </th>

                            <th class="px-4 py-3">
                                Type
                            </th>

                            <th class="px-4 py-3">
                                Description
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-surface-container-high">

                        <tr>

                            <td class="px-4 py-3 font-mono">
                                id
                            </td>

                            <td class="px-4 py-3">
                                Number
                            </td>

                            <td class="px-4 py-3">
                                Service ID (used in /products endpoint)
                            </td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">
                                code
                            </td>

                            <td class="px-4 py-3">
                                String
                            </td>

                            <td class="px-4 py-3">
                                Internal service code
                            </td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">
                                name
                            </td>

                            <td class="px-4 py-3">
                                String
                            </td>

                            <td class="px-4 py-3">
                                Application name
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</section>
<!-- Products -->
<!-- Products -->
<section class="scroll-mt-24" id="products">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Server
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Mendapatkan daftar produk server layanan yang tersedia.
            </p>
        </div>

        <span class="endpoint-badge get-badge">
            GET
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <!-- Tabs -->
        <div class="overflow-x-auto no-scrollbar mb-5 tabs">

            <div class="flex gap-2 w-max">

                <button class="tab active" data-tab="products-endpoint">
                    Endpoint
                </button>

                <button class="tab" data-tab="products-params">
                    Params
                </button>

                <button class="tab" data-tab="products-curl">
                    cURL
                </button>

                <button class="tab" data-tab="products-js">
                    JavaScript
                </button>

                <button class="tab" data-tab="products-python">
                    Python
                </button>

                <button class="tab" data-tab="products-success">
                    Success
                </button>

                <button class="tab" data-tab="products-error">
                    Error
                </button>

                <button class="tab" data-tab="products-field">
                    Field
                </button>

            </div>

        </div>

        <!-- Endpoint -->
        <div id="products-endpoint" class="tab-content active">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>/v2/products</code></pre>
            </div>

        </div>

        <!-- Params -->
        <div id="products-params" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Parameters
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "country_id": 7,
  "service_id": 1
}</code></pre>
            </div>

        </div>

        <!-- CURL -->
        <div id="products-curl" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                cURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>curl -X GET "https://nusaotp.com/api/v2/products?country_id=7&service_id=1" \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Accept: application/json"</code></pre>
            </div>

        </div>

        <!-- JavaScript -->
        <div id="products-js" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                JavaScript
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>fetch("https://nusaotp.com/api/v2/products?country_id=7&service_id=1", {
    method: "GET",
    headers: {
        "Authorization": "Bearer YOUR_API_KEY",
        "Accept": "application/json"
    }
})
.then(res => res.json())
.then(console.log);</code></pre>
            </div>

        </div>

        <!-- Python -->
        <div id="products-python" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Python
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>import requests

url = "https://nusaotp.com/api/v2/products"

params = {
    "country_id": 7,
    "service_id": 1
}

headers = {
    "Authorization": "Bearer YOUR_API_KEY"
}

response = requests.get(
    url,
    headers=headers,
    params=params
)

print(response.json())</code></pre>
            </div>

        </div>

        <!-- Success -->
        <div id="products-success" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Success Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": true,
  "data": [
    {
      "id": 765693933,
      "name": "Server 1",
      "price": 3829
    },
    {
      "id": 760385044,
      "name": "Server 2",
      "price": 3836
    }
  ]
}</code></pre>
            </div>

        </div>

        <!-- Error -->
        <div id="products-error" class="tab-content">

            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Error Response
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": false,
  "message": "country_id & service_id wajib"
}

OR

{
  "success": false,
  "message": "Failed to fetch products"
}</code></pre>
            </div>

        </div>

        <!-- Field Explanation -->
        <div id="products-field" class="tab-content">

            <div class="overflow-x-auto rounded-xl border border-surface-container-high">

                <table class="w-full text-left">

                    <thead class="bg-surface-container">

                        <tr>

                            <th class="px-4 py-3">
                                Field
                            </th>

                            <th class="px-4 py-3">
                                Type
                            </th>

                            <th class="px-4 py-3">
                                Description
                            </th>

                        </tr>

                    </thead>

                    <tbody class="divide-y divide-surface-container-high">

                        <tr>

                            <td class="px-4 py-3 font-mono">
                                id
                            </td>

                            <td class="px-4 py-3">
                                Number
                            </td>

                            <td class="px-4 py-3">
                                Product ID (used when creating an order)
                            </td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">
                                name
                            </td>

                            <td class="px-4 py-3">
                                String
                            </td>

                            <td class="px-4 py-3">
                                Server name (e.g. Server 1, Server 2)
                            </td>

                        </tr>

                        <tr>

                            <td class="px-4 py-3 font-mono">
                                price
                            </td>

                            <td class="px-4 py-3">
                                Number
                            </td>

                            <td class="px-4 py-3">
                                Final price (deducted from balance)
                            </td>

                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</section>
<!-- Create Order -->
<section class="scroll-mt-24" id="create-order">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Create Order
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Membuat order nomor baru.
            </p>
        </div>

        <span class="endpoint-badge post-badge">
            POST
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <div class="overflow-x-auto no-scrollbar mb-5 tabs">
            <div class="flex gap-2 w-max">

                <button class="tab active" data-tab="order-endpoint">Endpoint</button>
                <button class="tab" data-tab="order-params">Params</button>
                <button class="tab" data-tab="order-curl">cURL</button>
                <button class="tab" data-tab="order-js">JavaScript</button>
                <button class="tab" data-tab="order-python">Python</button>
                <button class="tab" data-tab="order-success">Success</button>
                <button class="tab" data-tab="order-error">Error</button>
                <button class="tab" data-tab="order-fields">Field</button>
                <button class="tab" data-tab="order-status">Status</button>

            </div>
        </div>

        <!-- Endpoint -->
        <div id="order-endpoint" class="tab-content active">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>/v2/order</code></pre>
            </div>
        </div>

        <!-- Params -->
        <div id="order-params" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                PARAMETERS
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "country_id": 7,
  "service_id": 1,
  "product_id": 765693933
}</code></pre>
            </div>
        </div>

        <!-- CURL -->
        <div id="order-curl" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                CURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>curl -X POST "https://nusaotp.com/api/v2/order" \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "country_id":7,
  "service_id":1,
  "product_id":765693933
}'</code></pre>
            </div>
        </div>

        <!-- JS -->
        <div id="order-js" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                JAVASCRIPT
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>fetch("https://nusaotp.com/api/v2/order",{
    method:"POST",
    headers:{
        "Authorization":"Bearer YOUR_API_KEY",
        "Content-Type":"application/json"
    },
    body:JSON.stringify({
        country_id:7,
        service_id:1,
        product_id:765693933
    })
})
.then(r=>r.json())
.then(console.log);</code></pre>
            </div>
        </div>

        <!-- Python -->
        <div id="order-python" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                PYTHON
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>import requests

url="https://nusaotp.com/api/v2/order"

payload={
    "country_id":7,
    "service_id":1,
    "product_id":765693933
}

headers={
    "Authorization":"Bearer YOUR_API_KEY",
    "Content-Type":"application/json"
}

response=requests.post(
    url,
    json=payload,
    headers=headers
)

print(response.json())</code></pre>
            </div>
        </div>

        <!-- Success -->
        <div id="order-success" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                SUCCESS RESPONSE
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": true,
  "data": {
    "order_id": 79994,
    "number": "6283857979325",
    "status": "PENDING",
    "otp_code": null,
    "expires_at": "2026-05-03 02:55:10"
  }
}</code></pre>
            </div>
        </div>

        <!-- Error -->
        <div id="order-error" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                ERROR RESPONSE
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": false,
  "message": "Saldo tidak cukup"
}

OR

{
  "success": false,
  "message": "Service tidak ditemukan"
}

OR

{
  "success": false,
  "message": "Product tidak ditemukan"
}

OR

{
  "success": false,
  "message": "Provider error"
}</code></pre>
            </div>
        </div>

        <!-- Field Explanation -->
        <div id="order-fields" class="tab-content">

            <div class="overflow-x-auto rounded-xl border border-surface-container-high">

                <table class="w-full text-left">

                    <thead class="bg-surface-container">
                        <tr>
                            <th class="px-4 py-3">Field</th>
                            <th class="px-4 py-3">Type</th>
                            <th class="px-4 py-3">Description</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-surface-container-high">

                        <tr>
                            <td class="px-4 py-3 font-mono">order_id</td>
                            <td class="px-4 py-3">Number</td>
                            <td class="px-4 py-3">Order ID (used for canceling & tracking)</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">number</td>
                            <td class="px-4 py-3">String</td>
                            <td class="px-4 py-3">Assigned phone number</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">status</td>
                            <td class="px-4 py-3">String</td>
                            <td class="px-4 py-3">Initial status (PENDING)</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">otp_code</td>
                            <td class="px-4 py-3">String / null</td>
                            <td class="px-4 py-3">OTP code (if received)</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">expires_at</td>
                            <td class="px-4 py-3">Datetime</td>
                            <td class="px-4 py-3">Order expiration time</td>
                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

        <!-- Status -->
        <div id="order-status" class="tab-content">

            <div class="overflow-x-auto rounded-xl border border-surface-container-high">

                <table class="w-full text-left">

                    <thead class="bg-surface-container">
                        <tr>
                            <th class="px-4 py-3">Status</th>
                            <th class="px-4 py-3">Description</th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-surface-container-high">

                        <tr>
                            <td class="px-4 py-3 font-mono">PENDING</td>
                            <td class="px-4 py-3">Waiting for OTP</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">SUCCESS</td>
                            <td class="px-4 py-3">OTP received</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">FAILED</td>
                            <td class="px-4 py-3">Number expired</td>
                        </tr>

                        <tr>
                            <td class="px-4 py-3 font-mono">CANCELED</td>
                            <td class="px-4 py-3">Order canceled</td>
                        </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</section>
<!-- Cancel Order -->
<section class="scroll-mt-24" id="cancel-order">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Cancel Order
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Membatalkan orderan (3 menit setelah orderan dibuat).
            </p>
        </div>

        <span class="endpoint-badge post-badge">
            POST
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <!-- Tabs -->
        <div class="overflow-x-auto no-scrollbar mb-5 tabs">
            <div class="flex gap-2 w-max">

                <button class="tab active" data-tab="cancel-endpoint">Endpoint</button>
                <button class="tab" data-tab="cancel-params">Params</button>
                <button class="tab" data-tab="cancel-curl">cURL</button>
                <button class="tab" data-tab="cancel-js">JavaScript</button>
                <button class="tab" data-tab="cancel-python">Python</button>
                <button class="tab" data-tab="cancel-success">Success</button>
                <button class="tab" data-tab="cancel-error">Error</button>

            </div>
        </div>

        <!-- Endpoint -->
        <div id="cancel-endpoint" class="tab-content active">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>/v2/cancel</code></pre>
            </div>
        </div>

        <!-- Params -->
        <div id="cancel-params" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                PARAMETERS
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "order_id": 12345
}</code></pre>
            </div>
        </div>

        <!-- CURL -->
        <div id="cancel-curl" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                CURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>curl -X POST https://nusaotp.com/api/v2/cancel \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-H "Accept: application/json" \
-d '{
  "order_id":12345
}'</code></pre>
            </div>
        </div>

        <!-- JavaScript -->
        <div id="cancel-js" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                JAVASCRIPT
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>fetch("https://nusaotp.com/api/v2/cancel",{
    method:"POST",
    headers:{
        "Authorization":"Bearer YOUR_API_KEY",
        "Content-Type":"application/json",
        "Accept":"application/json"
    },
    body:JSON.stringify({
        order_id:12345
    })
})
.then(res=>res.json())
.then(console.log);</code></pre>
            </div>
        </div>

        <!-- Python -->
        <div id="cancel-python" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                PYTHON
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>import requests

url="https://nusaotp.com/api/v2/cancel"

headers={
    "Authorization":"Bearer YOUR_API_KEY",
    "Content-Type":"application/json"
}

payload={
    "order_id":12345
}

response=requests.post(
    url,
    json=payload,
    headers=headers
)

print(response.json())</code></pre>
            </div>
        </div>

        <!-- Success -->
        <div id="cancel-success" class="tab-content">
           <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                SUCCESS RESPONSE
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": true,
  "data": {
    "order_id": 12345,
    "status": "CANCELED",
    "refund": 10000
  }
}</code></pre>
            </div>
        </div>

        <!-- Error -->
        <div id="cancel-error" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                ERROR RESPONSE
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": false,
  "message": "Order tidak ditemukan"
}

OR

{
  "success": false,
  "message": "Order sudah dibatalkan dan saldo direfund"
}

OR

{
  "success": false,
  "message": "Order tidak bisa dibatalkan"
}

OR

{
  "success": false,
  "message": "Order hanya bisa dibatalkan setelah 3 menit"
}</code></pre>
            </div>
        </div>

    </div>

</section>
<!-- Webhook -->
<section class="scroll-mt-24" id="webhook">

    <div class="flex items-center justify-between mb-6">
        <div>
            <h3 class="font-headline-md text-headline-md text-on-surface">
                Webhook
            </h3>
            <p class="text-body-sm text-on-surface-variant mt-1">
                Mengatur webhook realtime untuk menerima update order & OTP.
            </p>
        </div>

        <span class="endpoint-badge post-badge">
            POST
        </span>
    </div>

    <div class="bg-surface-container-lowest p-6 rounded-2xl border border-surface-container-high card-shadow">

        <!-- Tabs -->
        <div class="overflow-x-auto no-scrollbar mb-5 tabs">
            <div class="flex gap-2 w-max">

                <button class="tab active" data-tab="webhook-endpoint">Endpoint</button>
                <button class="tab" data-tab="webhook-curl">cURL</button>
                <button class="tab" data-tab="webhook-js">JavaScript</button>
                <button class="tab" data-tab="webhook-python">Python</button>
                <button class="tab" data-tab="webhook-events">Events</button>
                <button class="tab" data-tab="webhook-success">Success</button>
                <button class="tab" data-tab="webhook-error">Error</button>

            </div>
        </div>

        <!-- Endpoint -->
        <div id="webhook-endpoint" class="tab-content active">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                Endpoint
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>/v2/set-webhook</code></pre>
            </div>
        </div>

        <!-- CURL -->
        <div id="webhook-curl" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                CURL
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>curl -X POST https://nusaotp.com/api/v2/set-webhook \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
  "webhook_url":"https://yourdomain.com/webhook"
}'</code></pre>
            </div>
        </div>

        <!-- JavaScript -->
        <div id="webhook-js" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                JAVASCRIPT
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>fetch("https://nusaotp.com/api/v2/set-webhook",{
    method:"POST",
    headers:{
        "Authorization":"Bearer YOUR_API_KEY",
        "Content-Type":"application/json"
    },
    body:JSON.stringify({
        webhook_url:"https://yourdomain.com/webhook"
    })
})
.then(res=>res.json())
.then(console.log);</code></pre>
            </div>
        </div>

        <!-- Python -->
        <div id="webhook-python" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                PYTHON
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>import requests

url="https://nusaotp.com/api/v2/set-webhook"

headers={
    "Authorization":"Bearer YOUR_API_KEY",
    "Content-Type":"application/json"
}

payload={
    "webhook_url":"https://yourdomain.com/webhook"
}

response=requests.post(
    url,
    json=payload,
    headers=headers
)

print(response.json())</code></pre>
            </div>
        </div>

        <!-- Events -->
        <div id="webhook-events" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                EVENTS
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>OTP RECEIVED

{
  "event":"otp.received",
  "data":{
    "order_id":12345,
    "number":"628123456789",
    "otp_code":"123456",
    "status":"SUCCESS"
  }
}

ORDER UPDATE

{
  "event":"order.update",
  "data":{
    "order_id":12345,
    "status":"PENDING"
  }
}

ORDER CANCELED

{
  "event":"order.canceled",
  "data":{
    "order_id":12345,
    "status":"CANCELED",
    "refund":10000
  }
}

ORDER FAILED

{
  "event":"order.failed",
  "data":{
    "order_id":12345,
    "status":"FAILED",
    "refund":10000,
    "reason":"expired"
  }
}</code></pre>
            </div>
        </div>

        <!-- Success -->
        <div id="webhook-success" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                SUCCESS RESPONSE
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "success": true,
  "data": {
    "webhook_url": "https://yourdomain.com/webhook"
  }
}</code></pre>
            </div>
        </div>

        <!-- Error -->
        <div id="webhook-error" class="tab-content">
            <div class="bg-surface-container px-3 py-2 rounded-t-lg text-[10px] font-bold uppercase border">
                ERROR RESPONSE
            </div>

            <div class="code-container rounded-b-lg overflow-hidden">
<pre><code>{
  "message": "Unauthenticated."
}

OR

{
  "message":"The webhook url field is required.",
  "errors":{
    "webhook_url":[
      "The webhook url field is required."
    ]
  }
}

OR

{
  "message":"The webhook url must be a valid URL.",
  "errors":{
    "webhook_url":[
      "The webhook url must be a valid URL."
    ]
  }
}</code></pre>
            </div>
        </div>

    </div>

</section>
<!-- Error Codes -->
<section class="scroll-mt-24 pb-12" id="error-codes">
<div class="flex items-center gap-3 mb-6">
<div class="w-10 h-10 rounded-xl bg-error-container/20 flex items-center justify-center">
<span class="material-symbols-outlined text-error">warning</span>
</div>
<h2 class="font-headline-md text-headline-md text-on-surface">Error Codes</h2>
</div>
<div class="bg-surface-container-lowest rounded-2xl border border-surface-container-high card-shadow overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full text-left min-w-[500px]">
<thead class="bg-surface-container text-on-surface-variant text-label-md">
<tr>
<th class="px-6 py-4">Error Code</th>
<th class="px-6 py-4">HTTP Status</th>
<th class="px-6 py-4">Description</th>
</tr>
</thead>
<tbody class="text-body-md divide-y divide-surface-container-high">
<tr><td class="px-6 py-4 font-mono font-bold text-error">AUTH_REQUIRED</td><td class="px-6 py-4">401</td><td class="px-6 py-4 text-on-surface-variant">API Key tidak ditemukan atau tidak valid.</td></tr>
<tr><td class="px-6 py-4 font-mono font-bold text-error">INSUFFICIENT_BALANCE</td><td class="px-6 py-4">402</td><td class="px-6 py-4 text-on-surface-variant">Saldo tidak mencukupi untuk melakukan pesanan.</td></tr>
<tr><td class="px-6 py-4 font-mono font-bold text-error">PRODUCT_NOT_FOUND</td><td class="px-6 py-4">404</td><td class="px-6 py-4 text-on-surface-variant">Layanan atau negara yang diminta tidak tersedia.</td></tr>
<tr><td class="px-6 py-4 font-mono font-bold text-error">CANCEL_NOT_ALLOWED</td><td class="px-6 py-4">400</td><td class="px-6 py-4 text-on-surface-variant">Pemesanan sudah berjalan lebih dari 3 menit.</td></tr>
<tr><td class="px-6 py-4 font-mono font-bold text-error">RATE_LIMIT_EXCEEDED</td><td class="px-6 py-4">429</td><td class="px-6 py-4 text-on-surface-variant">Terlalu banyak request dalam waktu singkat.</td></tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</main>
</div>
<!-- Bottom Navbar (Mobile Only) -->
@include('apk.partials.bar')
<script>
    function copyCode(btn) {
        const code = btn.nextElementSibling.innerText;
        navigator.clipboard.writeText(code).then(() => {
            const originalIcon = btn.innerHTML;
            btn.innerHTML = '<span class="material-symbols-outlined text-base text-tertiary-fixed-dim">check</span>';
            setTimeout(() => {
                btn.innerHTML = originalIcon;
            }, 2000);
        });
    }

    // Active State Logic for Sidebar
    window.addEventListener('scroll', () => {
        const sections = document.querySelectorAll('section');
        const navLinks = document.querySelectorAll('aside nav a');
        
        let current = '';
        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            if (pageYOffset >= sectionTop - 120) {
                current = section.getAttribute('id');
            }
        });

        navLinks.forEach(link => {
            link.classList.remove('sidebar-item-active');
            if (link.getAttribute('href').includes(current)) {
                link.classList.add('sidebar-item-active');
            }
        });
    });
    document.querySelectorAll(".tabs").forEach(tabs => {

    const buttons = tabs.querySelectorAll(".tab");

    const section = tabs.closest("section");

    const contents = section.querySelectorAll(".tab-content");

    buttons.forEach(button => {

        button.addEventListener("click", () => {

            buttons.forEach(btn => btn.classList.remove("active"));

            contents.forEach(content => {
                content.classList.remove("active");
            });

            button.classList.add("active");

            const target = document.getElementById(
                button.dataset.tab
            );

            if(target){
                target.classList.add("active");
            }

        });

    });

});
</script>
</body></html>