Documentacion Tecnica

<!-- PAYWL Paywall SDK -->
<script
  src="https://cdn.paywl.io/sdk/v1/paywl.min.js"
  data-tenant="TU_TENANT_ID"
  data-key="TU_API_KEY"
  async
></script>

npm install @paywl/sdk

# o con yarn
yarn add @paywl/sdk

import { Paywl } from '@paywl/sdk';

const paywl = new Paywl({
  tenantId: 'TU_TENANT_ID',
  apiKey: 'TU_API_KEY',
  environment: 'production', // o 'sandbox' para pruebas
});

{
  "tenant": "TU_TENANT_ID",
  "rules": {
    "default": "metered",
    "metered": {
      "freeArticles": 3,
      "resetPeriod": "monthly"
    },
    "hardPaywall": {
      "sections": ["investigaciones", "opinion-premium"]
    }
  },
  "wall": {
    "theme": "default",
    "position": "inline",
    "blur": true,
    "previewParagraphs": 3
  },
  "payment": {
    "gateway": "mercadopago",
    "currency": "COP",
    "plans": ["mensual", "anual"]
  },
  "analytics": {
    "ga4": true,
    "metaPixel": false
  }
}

import { Paywl } from '@paywl/sdk-node';

const paywl = new Paywl({
  tenantId: process.env.PAYWL_TENANT_ID,
  apiKey: process.env.PAYWL_API_KEY,
});

export default () => {
  return async (ctx, next) => {
    const { slug } = ctx.params;
    const userId = ctx.state?.user?.id || ctx.cookies.get('paywl_uid');

    // Verificar acceso con PAYWL Engine
    const access = await paywl.checkAccess({
      userId,
      contentId: slug,
      contentType: ctx.request.url.includes('/articles')
        ? 'article'
        : 'page',
    });

    // Inyectar resultado en el response
    ctx.state.paywlAccess = access;

    await next();

    // Si no tiene acceso, truncar el contenido
    if (!access.granted && ctx.response.body?.data?.content) {
      const paragraphs = ctx.response.body.data.content
        .split('</p>')
        .slice(0, 3);
      ctx.response.body.data.content = paragraphs.join('</p>') + '</p>';
      ctx.response.body.data.isPaywalled = true;
      ctx.response.body.data.wallConfig = access.wallConfig;
    }
  };
};

export default [
  'strapi::logger',
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  // ... otros middlewares
  {
    name: 'global::paywl-access',
    config: {},
  },
  'strapi::body',
  'strapi::query',
];

# Proximamente disponible en el repositorio de WordPress
# Por ahora, instalacion manual:
cd wp-content/plugins/
git clone https://github.com/nivelics/paywl-wp.git
wp plugin activate paywl-wp

// Credenciales de PAYWL
define('PAYWL_TENANT_ID', 'tu-tenant-id');
define('PAYWL_API_KEY', 'tu-api-key');
define('PAYWL_ENVIRONMENT', 'production'); // o 'sandbox'

┌──────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Tu CMS      │────>│  PAYWL Engine    │────>│  Pasarela Pago  │
│  (Frontend)  │<────│  (API REST)      │<────│  (MercadoPago)  │
└──────────────┘     └──────────────────┘     └─────────────────┘
       │                      │
       │  1. SDK verifica     │  2. Engine evalua
       │     acceso           │     reglas de negocio
       │                      │
       │  3. Si no tiene      │  4. Procesa pago
       │     acceso: muestra  │     y activa
       │     el muro          │     suscripcion
       │                      │
       └──────────────────────┘

// Escuchar cuando el muro se muestra
paywl.on('wall.shown', (data) => {
  console.log('Muro mostrado:', data.wallType, data.contentId);
  // Enviar a GA4
  gtag('event', 'paywall_shown', {
    wall_type: data.wallType,
    content_id: data.contentId,
  });
});

// Escuchar cuando un usuario se suscribe
paywl.on('wall.converted', (data) => {
  console.log('Nueva suscripcion:', data.subscriberId, data.planId);
  // Enviar a tu CRM
  fetch('/api/crm/new-subscriber', {
    method: 'POST',
    body: JSON.stringify(data),
  });
});

// Escuchar cuando el usuario cierra el muro
paywl.on('wall.dismissed', (data) => {
  console.log('Muro cerrado:', data.contentId);
});

<!-- Cargar el SDK solo cuando el usuario hace scroll -->
<script
  src="https://cdn.paywl.io/sdk/v1/paywl.min.js"
  data-tenant="TU_TENANT_ID"
  data-key="TU_API_KEY"
  data-lazy="true"
  data-lazy-threshold="0.5"
  async
></script>

// Modo headless: tu controlas la UI, PAYWL maneja la logica
const access = await paywl.check({ contentId: 'articulo-123' });

if (!access.granted) {
  // Renderizar tu propio componente de muro
  document.getElementById('custom-wall').innerHTML = `
    <div class="mi-paywall">
      <h2>Contenido exclusivo para suscriptores</h2>
      <p>Has leido ${access.articlesRead} de ${access.articlesLimit} articulos gratuitos.</p>
      <button onclick="paywl.startCheckout('${access.wallConfig.plans[0].id}')">
        Suscribirme por ${access.wallConfig.plans[0].price} ${access.wallConfig.plans[0].currency}/mes
      </button>
    </div>
  `;
}

paywl.init({
  tenantId: 'TU_TENANT_ID',
  apiKey: 'TU_API_KEY',
  analytics: {
    // Google Analytics 4
    ga4: {
      measurementId: 'G-XXXXXXXXXX',
      sendPageView: true,
      sendConversion: true,
    },
    // Meta Pixel
    metaPixel: {
      pixelId: '123456789',
      trackPurchase: true,
    },
    // Callback personalizado para cualquier plataforma
    custom: (event, data) => {
      // Enviar a Mixpanel, Amplitude, etc.
      mixpanel.track(event, data);
    },
  },
});

Access Token:     APP_USR-xxxxxxxxxxxx-xxxxxx-xxxxxxxxx-xxxxxxxxx
Public Key:       APP_USR-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Client ID:        xxxxxxxxxxxx
Client Secret:    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Webhook URL:      https://api.paywl.io/api/v1/webhook/mercadopago/TU_TENANT_ID

// El SDK maneja todo el flujo automaticamente:
// 1. Usuario hace clic en "Suscribirme"
// 2. PAYWL crea una preferencia de pago en MercadoPago
// 3. Usuario es redirigido al checkout de MercadoPago
// 4. MercadoPago procesa el pago y envía webhook
// 5. PAYWL activa la suscripcion automaticamente

// Si necesitas personalizar el flujo:
const checkout = await paywl.startCheckout({
  planId: 'mensual',
  gateway: 'mercadopago',
  successUrl: 'https://tumedio.com/bienvenido',
  failureUrl: 'https://tumedio.com/pago-fallido',
  pendingUrl: 'https://tumedio.com/pago-pendiente',
});

// checkout.redirectUrl → URL del checkout de MercadoPago

Secret Key:       sk_live_xxxxxxxxxxxxxxxxxxxx
Publishable Key:  pk_live_xxxxxxxxxxxxxxxxxxxx
Webhook Secret:   whsec_xxxxxxxxxxxxxxxxxxxx
Webhook URL:      https://api.paywl.io/api/v1/webhook/stripe/TU_TENANT_ID

// PAYWL crea automaticamente los productos y precios
// en tu cuenta de Stripe basandose en los planes
// configurados en el panel de PAYWL.

// Tambien puedes vincular productos existentes:
// Panel PAYWL > Pasarelas > Stripe > Mapeo de Productos

// Ejemplo de mapeo:
{
  "plan_mensual": "price_1234567890",  // Stripe Price ID
  "plan_anual": "price_0987654321"
}

Public Key:       pub_prod_xxxxxxxxxxxxxxxxxxxx
Private Key:      prv_prod_xxxxxxxxxxxxxxxxxxxx
Events Secret:    prod_events_xxxxxxxxxxxxxxxxxxxx
Integrity Secret: prod_integrity_xxxxxxxxxxxxxxxxxxxx
Webhook URL:      https://api.paywl.io/api/v1/webhook/wompi/TU_TENANT_ID

// PAYWL maneja el widget de Wompi automaticamente
const checkout = await paywl.startCheckout({
  planId: 'mensual',
  gateway: 'wompi',
  // Wompi soporta pagos recurrentes via tokenizacion
  // PAYWL gestiona la renovacion automatica
});

// Para pagos recurrentes, PAYWL:
// 1. Tokeniza la tarjeta del usuario via Wompi
// 2. Almacena el token de forma segura (PCI-DSS compliant)
// 3. Ejecuta el cobro automatico cada periodo
// 4. Notifica al medio y al suscriptor del resultado