<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guía de Integración - Pago Fácil</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }
        header {
            background-color: #0056b3;
            color: white;
            padding: 10px 20px;
            text-align: center;
        }
        nav {
            background-color: #007bff;
            padding: 10px;
            display: flex;
            justify-content: space-around;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 10px;
            border-radius: 5px;
        }
        nav a:hover {
            background-color: #0056b3;
        }
        section {
            padding: 20px;
        }
        pre {
            background-color: #eaeaea;
            padding: 10px;
            overflow-x: auto;
            border-radius: 5px;
        }
        .hidden {
            display: none;
        }
        .code-example {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            margin: 20px 0;
            background: #fff;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <header>
        <h1>Guía de Integración - Pago Fácil</h1>
    </header>
    <nav>
        <a href="#" onclick="showSection('intro')">Introducción</a>
        <a href="#" onclick="showSection('auth')">Autenticación</a>
        <a href="#" onclick="showSection('generateQR')">Generar QR</a>
        <a href="#" onclick="showSection('consult')">Consultar Transacción</a>
    </nav>
    <section id="intro">
        <h2>Introducción</h2>
        <p>Esta guía detalla cómo integrar la API de Pago Fácil para generar QR, autenticar transacciones, y más.</p>
    </section>
    <section id="auth" class="hidden">
        <h2>Servicio de Autenticación</h2>
        <p>El servicio de autenticación genera un token de acceso para realizar operaciones.</p>
        <pre class="code-example">
POST /api/login
Host: serviciosmercadopago.pagofacil.com.bo
Content-Type: application/json

{
    "TokenService": "LlaveDeServicio",
    "TokenSecret": "LlaveSecreta"
}
        </pre>
        <button class="btn" onclick="alert('Simulación de autenticación enviada')">Probar Autenticación</button>
    </section>
    <section id="generateQR" class="hidden">
        <h2>Servicio de Generar QR</h2>
        <p>Envía los datos necesarios para generar un código QR único para el pago.</p>
        <pre class="code-example">
POST /api/generarqrpix
Host: serviciosmercadopago.pagofacil.com.bo
Authorization: Bearer {AccessToken}
Content-Type: application/json

{
    "tnCliente": 13,
    "tnEmpresa": 279,
    "tcCodigoClienteEmpresa": 4654797,
    ...
}
        </pre>
        <button class="btn" onclick="alert('Simulación de generación de QR enviada')">Probar Generación de QR</button>
    </section>
    <section id="consult" class="hidden">
        <h2>Consultar Estado de Transacción</h2>
        <p>Consulta el estado de una transacción específica mediante su código.</p>
        <pre class="code-example">
POST /api/servicios/consultarPagoSoli
Host: serviciosmercadopago.pagofacil.com.bo
Authorization: Bearer {AccessToken}
Content-Type: application/json

{
    "tnNroTransaccion": 9XXXX7,
    "tnNroAutorizacion": 2XXXX8
}
        </pre>
        <button class="btn" onclick="alert('Simulación de consulta enviada')">Probar Consulta</button>
    </section>
    <script>
        function showSection(sectionId) {
            document.querySelectorAll('section').forEach(section => {
                section.classList.add('hidden');
            });
            document.getElementById(sectionId).classList.remove('hidden');
        }
    </script>
</body>
</html>
