> ## 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

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

<Frame>
  <img src="https://mintcdn.com/piriod-d406ac55/CyasDKczYvaYYs01/images/Captura-de-pantalla-2026-04-30-a-la(s)-19.08.33.png?fit=max&auto=format&n=CyasDKczYvaYYs01&q=85&s=2ee56f278e6bb1d848140e0085249574" alt="Captura De Pantalla 2026 04 30 A La(s) 19 08 33" width="2282" height="1182" data-path="images/Captura-de-pantalla-2026-04-30-a-la(s)-19.08.33.png" />
</Frame>

***

## 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**.

<Frame>
  <img src="https://mintcdn.com/piriod-d406ac55/CyasDKczYvaYYs01/images/Captura-de-pantalla-2026-04-30-a-la(s)-19.08.54.png?fit=max&auto=format&n=CyasDKczYvaYYs01&q=85&s=a7ecc3a8a1568320bad31f54494112be" alt="Captura De Pantalla 2026 04 30 A La(s) 19 08 54" width="2280" height="1186" data-path="images/Captura-de-pantalla-2026-04-30-a-la(s)-19.08.54.png" />
</Frame>

***

## Instalación

#### 1. Agregar el tag HTML

Agrega este elemento en los lugares de tu sitio donde quieres que aparezca el portal:

```html theme={null}
<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:

```html theme={null}
<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:

```python theme={null}
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`:

```html theme={null}
<script>
  window.piriodSettings = {
    service: "customerBase",
    customerBaseId: "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
    sessionKey: "1d4e158b-1bc3-4a17-896e-be180b8299b4"
  };
</script>
```

Consulta la referencia completa en [Create a session](https://docs.piriod.com/api/applications/customer-base/sessions#create-a-session).

***

### Opciones de personalización

Usa `piriodSettings.options` para personalizar la apariencia del portal.

```html theme={null}
<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.

| Valor             | Descripción         |
| :---------------- | :------------------ |
| `es_MX` (default) | Español de México   |
| `en_US`           | Inglés              |
| `po_BR`           | Portugués de Brasil |

#### `options.backgroundColor`

Define el color de fondo del portal. Acepta nombres de color CSS, hex o RGB.

| Formato                    | Ejemplo              |
| :------------------------- | :------------------- |
| Literal (default: `white`) | `black`              |
| Hexadecimal                | `#F8F8F8`            |
| RGB                        | `rgb(248, 248, 248)` |