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. Consulta la sección de instalación para comenzar.

Las capacidades de Customer Base permiten a tus clientes:

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

Configuración

🚧
Sorry. We are still documenting this section.

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.

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

2. Copiar el fragmento de JavaScript

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

<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

Una sesión de Customer Base brinda:

La seguridad necesaria para que la información de tu cliente esté a salvo.
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, 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 para Customer Base. Por ejemplo en Python:

Create a new CustomerBase session

Open Recipe

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

{
    "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

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

<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

<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

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