WebAR Comercial con Pagos y Leads - Avanzado

Arquitectura avanzada

Conectar WebAR con backend, pagos y analítica

En el avanzado el lead ya no vive solo en el navegador. La experiencia mantiene el modelo 3D GLB del helado como contenido aumentado principal, lo carga con GLTFLoader y Meshopt, y además envía datos a PHP. PHP los guarda en MySQL y la campaña puede conectarse con Stripe, WhatsApp y analítica.

Base de datos desde cero

Preparar MySQL local con XAMPP y phpMyAdmin

Si nunca has usado bases de datos, piensa en MySQL como una tabla organizada donde guardaremos los leads. El formulario WebAR captura nombre, email, WhatsApp y producto. PHP recibe esos datos y MySQL los guarda para consultarlos después.

Para practicar localmente usaremos XAMPP, porque instala Apache, PHP, MySQL y phpMyAdmin en el computador. Apache ejecuta el proyecto, PHP procesa el formulario, MySQL guarda los datos y phpMyAdmin permite administrar la base de datos desde el navegador.

Base de datos

Importar el archivo commercial-leads.sql en phpMyAdmin

Ahora crearemos la tabla donde se guardarán los leads. Puedes pegar el SQL manualmente en la pestaña SQL de phpMyAdmin o usar el archivo commercial-leads.sql que viene dentro del template avanzado.

CREATE DATABASE IF NOT EXISTS webar_comercial
  CHARACTER SET utf8mb4
  COLLATE utf8mb4_unicode_ci;

USE webar_comercial;

CREATE TABLE IF NOT EXISTS commercial_leads (
  id INT AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(190) NOT NULL,
  email VARCHAR(190) NOT NULL,
  whatsapp VARCHAR(60) NULL,
  product_id VARCHAR(120) NULL,
  source VARCHAR(80) NOT NULL DEFAULT 'webar',
  utm_source VARCHAR(120) NULL,
  created_at DATETIME NOT NULL,
  INDEX (email),
  INDEX (product_id),
  INDEX (created_at)
);

Endpoint

Crear api/save-lead.php

Este archivo recibe JSON desde JavaScript, valida campos mínimos y guarda el lead en MySQL. Debe estar en una carpeta api dentro del proyecto publicado. Para pruebas locales con XAMPP usaremos la base webar_comercial, usuario root y contraseña vacía.

<?php
declare(strict_types=1);

header('Content-Type: application/json');

$data = json_decode(file_get_contents('php://input'), true);

if (!$data || empty($data['email']) || empty($data['name'])) {
    http_response_code(422);
    echo json_encode(['ok' => false, 'error' => 'MISSING_FIELDS']);
    exit;
}

$pdo = new PDO(
    'mysql:host=localhost;dbname=webar_comercial;charset=utf8mb4',
    'root',
    '',
    [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
);

$stmt = $pdo->prepare(
    'INSERT INTO commercial_leads (name, email, whatsapp, product_id, source, utm_source, created_at)
     VALUES (?, ?, ?, ?, ?, ?, NOW())'
);

$stmt->execute([
    trim($data['name']),
    strtolower(trim($data['email'])),
    trim($data['whatsapp'] ?? ''),
    trim($data['productId'] ?? ''),
    trim($data['source'] ?? 'webar'),
    trim($data['utmSource'] ?? '')
]);

echo json_encode(['ok' => true]);

Enviar lead

Conectar el formulario con la API

Reemplaza el guardado en localStorage por una petición fetch. Esta parte debe ir dentro del evento submit del formulario, en app.js. En el template intermedio busca el bloque que empieza con leadForm.addEventListener("submit"; ese bloque es el que vamos a reemplazar por esta versión conectada al backend.

leadForm.addEventListener("submit", async (event) => {
  event.preventDefault();

  const payload = {
    productId: state.selectedProduct.id,
    name: document.querySelector("#lead-name").value.trim(),
    email: document.querySelector("#lead-email").value.trim(),
    whatsapp: document.querySelector("#lead-whatsapp").value.trim(),
    source: "webar",
    utmSource: new URLSearchParams(location.search).get("utm_source") || "direct"
  };

  const response = await fetch("api/save-lead.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload)
  });

  const result = await response.json();
  formStatus.textContent = result.ok ? "Lead guardado en el servidor." : "No se pudo guardar.";
});

Botones de compra

Conectar CTA con Stripe, PayPal o checkout externo

El botón de compra no debe aparecer como un adorno. Debe relacionarse con el producto escaneado, el lead y la campaña.

const checkoutLinks = {
  "software-ar": "https://buy.stripe.com/TU_LINK_PRODUCTO",
  "servicio-ar": "https://buy.stripe.com/TU_LINK_SERVICIO"
};

const buyButton = document.querySelector("#buy-button");

buyButton.addEventListener("click", () => {
  trackEvent("checkout_click", { productId: state.selectedProduct.id });
  window.location.href = checkoutLinks[state.selectedProduct.id];
});

En producción puedes usar Stripe Checkout desde backend, Payment Links o tu sistema de pagos actual. Lo importante es medir el clic y saber desde qué producto se originó.

Entrega avanzada

Checklist del proyecto comercial

• Target propio compilado como campana.mind.
• Landing WebAR con CTA claro.
• Modelo 3D GLB cargado desde assets/Modelo3D-Helado.glb con escala 1 1 1.
• Runtime local con Three.js r160, GLTFLoader y meshopt_decoder.module.js.
• Formulario con consentimiento.
• Lead guardado en MySQL.
• Botón de WhatsApp con mensaje personalizado.
• Botón de compra o checkout externo.
• Eventos: target_found, target_lost, lead_submit, whatsapp_click, checkout_click.
• Publicación con HTTPS y QR final.

Template final

Descarga el proyecto completo

Este ZIP contiene el proyecto final del nivel, con estructura de carpetas, código completo, modelo 3D GLB incluido y notas para publicarlo.