# Customer Base

Con Customer Base, puedes proporcionar la funcionalidad de administración de suscripción y facturación a tus clientes sin necesidad de desarrollarlo tú mismo. Después de configurar e integrarlo en tu sitio web o aplicación, los clientes pueden modificar sus suscripciones y detalles de facturación.

Las capacidades de Customer Base permiten a tus clientes:

* Administrar suscripción
* Ver su historial de facturas pagadas, vencidas y por vencer
* Administrar tarjeta
* Cancelar suscripción

***

### Configuración

{% hint style="warning" %}
Sorry. We are still documenting this section.
{% endhint %}

***

### Instalación

Descubre cómo configurar Customer Base y ponerlo a disposición de tus clientes.

#### 1. Copiar el Tag HTML para el widget de Piriod

Copia la etiqueta HTML en todos los lugares de tu sitio web o aplicación donde deseas que Customer Base se visualize.

```markup
<div id="piriod-widget"></div>
```

#### 2. Copiar el fragmento de JavaScript

Copia y pega el fragmento justo después de la etiqueta `</body>` en todas las páginas en las que deseas que Customer Base aparezca para tu cliente.

<pre class="language-html" data-overflow="wrap"><code class="lang-html">&#x3C;script>
  window.piriodSettings = {
    service: "customerBase",
    customerBaseId: "your Customer Base publishable_key attribute",
    sessionKey: "session token (required if use existing authentication)"
  };

<strong>  (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); })();
</strong>&#x3C;/script>
</code></pre>

#### 3. Crear una sesión para tu cliente

Una sesión de Customer Base brinda:

1. La seguridad necesaria para que la información de tu cliente esté a salvo.
2. La flexibilidad para que elijas el método más cómodo para que puedas autenticar a tu cliente, ya sea por su Tax ID, usuario y contraseña, etc.

Para [crear una sesión](https://docs.piriod.com/api/applications/customer-base/sessions#create-a-session), necesitas el ID de tu cliente y un return\_url, este último se utiliza para redireccionar a tu cliente una vez la sesión expira, es obligatoria siempre y cuando no hayas registrado una por defecto en la configuración de Customer Base.

Implementa un servicio del lado del servidor que te permita [crear una sesión](https://docs.piriod.com/api/applications/customer-base/sessions#create-a-session) para Customer Base. Por ejemplo en Python:

```python
import requests

url = f'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)
```

En el cuerpo de la respuesta, hay un atributo llamado `key`, devuelve este valor al lado del cliente para enviarlo a través de `window.piriodSettings`

```python
{
    "id": "ses_DyHrsrQjkUSSqYuosg",
    "is_active": "",
    "key": "1d4e158b-1bc3-4a17-896e-be180b8299b4",
    "return_url": "https://dashboard.myproduct.com/",
    "test_mode": false,
    "created": "2020-09-01T14:48:30.116162-04:00",
    "base": {
        "id": "bas_aiFqLDu2cUmDpWQjV1",
        "menu_items": [],
        "auth_scheme": "existing",
        "display_invoices": true,
        "enable_hosted": false,
        "hosted_page_description": "",
        "hosted_page_layout": "vertical",
        "hosted_page_title": "",
        "name": "New customer base",
        "privacy_police_url": "",
        "publishable_key": "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
        "return_url": "https://dashboard.myproduct.com/"
        "terms_of_service_url": "",
        "test_mode": false,
        "created": "2020-09-01T14:48:30.116162-04:00",
        "updated": "2020-09-01T14:48:30.116162-04:00"
    }
    "customer": "cus_18NSMz56sIVMsXo6Fy"
}
```

Envía el atributo `key` devuelto por la solicitud a través de `window.piriodSettings`

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

Una vez terminada esta instalación el widget de Piriod será capaz de mostrar en una interfaz de usuario toda la información y acciones permitidas en la configuración de Customer Base.

***

### Opciones personalizadas

Utiliza las opciones disponibles para personalizar el diseño o la información del portal de cliente. Utiliza el atributo `**piriodSettings.options**` para definir los valores de las diferentes opciones disponibles.

```html
<script>
	window.piriodSettings = {
		service: "customerBase",
  	publishableKey: "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
    sessionKey: "1d4e158b-1bc3-4a17-896e-be180b8299b4", // paste key attribute
  	options: {
  		backgroundColor: "white",
      locale: "es_MX"
  	}
};
</script>
```

#### Idioma y localización

Define el idioma con el que el consumidor final visualiza el portal de cliente de Customer Base.

**Atributo de personalización**

`options.locale`

**Valores disponibles**

| Valor                | Descripción              |
| -------------------- | ------------------------ |
| **es\_MX** `default` | Español de México        |
| **en\_US**           | Inglés de Estados Unidos |
| **po\_BR**           | Portugués de Brasil      |

**Ejemplo**

```html
<script>
  window.piriodSettings = {
    service: "customerBase",
    publishableKey: "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
    sessionKey: "1d4e158b-1bc3-4a17-896e-be180b8299b4", // paste key attribute
    options: {
      locale: "po_BR"
    }
	};
</script>
```

#### Color de fondo

Define el color de fondo que debe tener el portal de cliente de Customer Base.

**Atributo de personalización**

`options.backgroundColor`

**Valores disponibles**

| Valor                       | Descripción                                    |
| --------------------------- | ---------------------------------------------- |
| **literal** `default white` | Formato de color Literal. Ej. `black`          |
| **hexadecimal**             | Formato de color Hexadecimal. Ej. `#F8F8F8`    |
| **rgb**                     | Formato de color RGB. Ej. `rgb(248, 248, 248)` |

**Ejemplo**

```html
<script>
window.piriodSettings = {
    service: "customerBase",
    publishableKey: "bas_aiFqLDu2cUmDpWQjV11d4e158b1bc3DyHrsrQjkUSSqYuosg",
    sessionKey: "1d4e158b-1bc3-4a17-896e-be180b8299b4", // paste key attribute
    options: {
        backgroundColor: "#F8F8F8"
    }
};
</script>
```