Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.piriod.com/llms.txt

Use this file to discover all available pages before exploring further.

Customer Base es un portal de autoservicio que puedes integrar en tu sitio web o aplicación para que tus clientes administren su propia suscripción y facturación — sin que tengas que desarrollarlo tú mismo. Con Customer Base, tus clientes pueden:
  • Administrar su información de facturación
  • Ver el resumen y estado de su suscripción
  • Administrar su tarjeta de pago
  • Cancelar su suscripción
  • Ver su historial de facturas pagadas, vencidas y por vencer
Captura De Pantalla 2026 04 30 A La(s) 19 08 33

​
Configuración

Ve a Componentes → Customer Base → Nuevo portal de cliente.

​
Funcionalidades

Activa o desactiva las capacidades que quieres habilitar para tus clientes:
  • Administrar información de facturación
  • Cancelar suscripción
  • Administrar tarjeta
  • Visualizar facturación y pagos

​
Método de autenticación

Define cómo se autenticarán tus clientes al acceder al portal: Autenticación con email a través de Piriod — Piriod gestiona el login enviando un enlace de acceso al email del cliente. No requiere desarrollo adicional. Integrar con una autenticación existente — usa tu propio sistema de autenticación. Requiere implementar la creación de sesiones vía API (ver sección de instalación más abajo).

​
Redireccionamiento por defecto

URL a la que se redirige al cliente cuando su sesión expira. Una vez configurado, haz clic en Crear y poner en vivo.
Captura De Pantalla 2026 04 30 A La(s) 19 08 54

​
Instalación

​
1. Agregar el tag HTML

Agrega este elemento en los lugares de tu sitio donde quieres que aparezca el portal: 
<div id="piriod-widget"></div>

​
2. Agregar el fragmento de JavaScript

Pega este script antes del cierre de </body> en las páginas donde quieres que Customer Base aparezca: 
<script>
  window.piriodSettings = {
    service: "customerBase",
    customerBaseId: "your Customer Base publishable_key attribute",
    sessionKey: "session token (required if use existing authentication)"
  };

  (function () {
    var s = document.createElement("script");
    s.src = "https://js.piriod.com/embed/piriod-embed.umd.min.js";
    s.async = true;
    s.type = "text/javascript";
    var x = document.getElementsByTagName("script")[0];
    x.parentNode.insertBefore(s, x);
  })();
</script>

​
3. Crear una sesión para tu cliente

Si usas autenticación existente, debes crear una sesión desde tu servidor para cada cliente. La sesión protege la información del cliente y permite autenticarlo con el método que prefieras. Para crear una sesión necesitas el ID del cliente y una return_url. Ejemplo en Python: 
import requests

url = 'https://api.piriod.com/customer_base/sessions/'
headers = {
  'Authorization': f'Token {api_key}',
  'x-simple-workspace': '{organization_id}'
}
payload = {
  'base': 'bas_aiFqLDu2cUmDpWQjV1',
  'customer': 'cus_18NSMz56sIVMsXo6Fy',
  'return_url': 'https://dashboard.myproduct.com/',
}
r = requests.post(url=url, json=payload, headers=headers)
La respuesta incluye un atributo key. Devuelve ese valor al cliente y pásalo a través de window.piriodSettings: 
<script>
  window.piriodSettings = {
    service: "customerBase",
    customerBaseId: "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
    sessionKey: "1d4e158b-1bc3-4a17-896e-be180b8299b4"
  };
</script>
Consulta la referencia completa en Create a session.

​
Opciones de personalización

Usa piriodSettings.options para personalizar la apariencia del portal. 
<script>
  window.piriodSettings = {
    service: "customerBase",
    customerBaseId: "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
    sessionKey: "1d4e158b-1bc3-4a17-896e-be180b8299b4",
    options: {
      backgroundColor: "white",
      locale: "es_MX"
    }
  };
</script>

​
options.locale

Define el idioma del portal.
ValorDescripción
es_MX (default)Español de México
en_USInglés
po_BRPortugués de Brasil

​
options.backgroundColor

Define el color de fondo del portal. Acepta nombres de color CSS, hex o RGB.
FormatoEjemplo
Literal (default: white)black
Hexadecimal#F8F8F8
RGBrgb(248, 248, 248)