Toku ofrece un script que sirve como interfaz para incrustar el portal de pagos en un sitio web, dentro de un iframe.

Autorizar host

Por defecto, el portal de pagos no permite ser incrustado en un iframe en cualquier sitio, así que es necesario comunicar a Toku cuál sera el host en el cuál se hará. Por ejemplo, si quiero incrustar el portal de pagos en mi sitio <https://example.com/site.php>, debo autorizar el host https://example.com/. Este paso debe ser solicitada a 🇨🇱ayuda@trytoku.com o a 🇲🇽ayudamx@trytoku.com.

Obtener API key pública

También es necesario proporcionar un API key para identificar la organización. Esta API key NO es la misma que la usada para las requests de backend, y debe ser solicitada a 🇨🇱ayuda@trytoku.com o a 🇲🇽ayudamx@trytoku.com.

Integración

Para incrustar el portal de pagos, se debe incluir el script de Toku en el HTML de la página web, de la siguiente forma:

<script src="https://storage.googleapis.com/toku-embedded-portal/index.min.js"></script>

Este script te entregará la clase y los métodos necesarios para empezar a utilizar el iframe.

La clase Toku

Una vez incluido el script en el HTML de la página, se pondrá a disposición la clase Toku, con la cual podrás controlar la aplicación de Toku dentro del iframe.

Instanciación

En primer lugar, se debe instanciar la clase Toku, con los siguientes argumentos:

const toku = new Toku(apiKey, {
  containerId: 'id del objeto en el DOM en donde se insertará el iframe de toku',,
  iframeId: 'iframe_id',
  portalId: 0, 
  onSuccess:()=> '',
  onError: '',
});

Parámetro	Default Value	Descripción
`publicApiKey`	`0`	API key pública de la organización.
`containerId`	`'toku-container'`	id del elemento DOM que contendrá el IFrame
`iframeId`	`'toku-frame'`	id del IFrame creado.
`portalId`	`0`	El id del portal, para clientes que no tengan más de un portal establecer siempre en 0. En caso de que exista otro portal, este deberá asignarse con el valor correspondiente.
`onSuccess`	`() => {}`	Respuesta ante una inscripción o pago exitoso.
`onError`	`() => {}`	Respuesta ante un error.

Ejemplo:

const toku = new Toku('apiKeyValue', {
  containerId: 'toku-iframe-container',
  iframeId: 'custom-iframe-id',
  onSuccess: () => {},
  onError: () => {},
});

Inicialización

Una vez instanciada la clase con los parámetros correspondientes, para que el iframe se incruste en el contenedor, se debe llamar al método initde la clase Toku con los siguientes parámetros: step y option.

toku.init(step, options);

Parámetro	Descripción
`step`	Paso o vista a la cual se quiere redirigir en la app del portal de pagos. ¿Cuáles son las vistas o steps de Toku?
`options`	Objeto con los datos necesarios para llenar la vista del medio de pago (ej: id de customer, id de subscription). Este depende del step.

En ese sentido, el formato de options depende del valor de step, y las combinaciones se describen a continuación:

Landing

Para mostrar el portal de pagos en la vista de buscador en donde el customer deberá ingresar su government_id o external_id según corresponda se debe ejecutar lo siguiente:

toku.init('landing');

Customer Portal

toku.init('dashboard', {
  customerId,
});

Parámetro	Tipo	Requerido	Descripción
customerId	string	Sí	Id del customer para vincularlo directamente a su portal

Ejemplo:

toku.init('dashboard', { customerId: 'cus_bPMJqiDPCywqJ4SUAOY8wdWBV75wcGHt'});

Checkout recurrente

toku.init('recurringCheckout', {
  customerId,
  accountId,
  subscriptionId,
  gateway,
});

Parámetro	Tipo	Requerido	Descripción
customerId	string	Sí	Id del customer
accountId	string	Sí	Id de la cuenta de pago. Se puede encontrar en Ajustes > Cuentas de cobro
subscriptionId	string	Sí	Id de la subscription en la cual se inscribirá el medio de pago.
gateway	string	No	Gateway específico por el cual pagar. Si se indica, se redirigirá directamente a este gateway. Si no se indica, se dirigirá a la vista general de checkout.

Los gateways disponibles para el checkout recurrente:

🇨🇱 'pac_inscription',
🇨🇱 'direct_debit_cl',
🇨🇱 'toku_card_on_file',
🇨🇱 'transbank_oneclick',
🇲🇽 'domiciliation'

Ejemplo:

toku.init('recurringCheckout', {
    customerId: 'cus_bPMJqiDPCywqJ4SUAOY8wdWBV75wcGHa',
    accountId: 'acc_6ar9C5NBJMllrrQpiu5PnLujq4zkMcQ2',
    subscriptionId: 'sub_lsFALPE9RH3Gf8qV-H-8W2CAUxejkg-5',
    gateway: 'pac_inscription',
});

Checkout one-time

toku.init('recurringCheckout', {
  customerId,
  accountId,
  invoiceIds,
  gateway,
});

Parámetro	Tipo	Requerido	Descripción
customerId	string	Sí	Id del customer
accountId	string	Sí	Id de la cuenta de pago. Se puede encontrar en Ajustes > Cuentas de cobro
invoiceIds	Array	Sí	Arreglo con los ids de los invoices a pagar.
gateway	string	No	Gateway específico por el cual pagar. Si se indica, se redirigirá directamente a este gateway. Si no se indica, se dirigirá a la vista general de checkout.

Los gateways disponibles para el checkout onetime:

🇨🇱 'transfer_cl',
🇨🇱 'toku_onetime',
🇨🇱 'transbank_webpay_plus',

Ejemplo:

toku.init('oneTimeCheckout', {
    customerId: 'cus_bPMJqiDPCywqJ4SUAOY8wdWBV75wcGH4',
    accountId: 'acc_6ar9C5NBJMllrrQpiu5PnLujq4zkMcQ1',
    invoiceIds: ['in_lsFALPE9RH3Gf8qV-H-8W2CAUxejkg-9'],
    gateway: 'transfer_cl',
});

Destrucción

Si quieres destruir el iframe de forma limpia, puedes llamar al método close:

toku.close();

Deep Links & Portales Adicionales en Iframe

Al momento de utilizar un Iframe, también es posible elegir qué portal queremos mostrar al customer y qué tan al interior del portal de pagos lo enviaremos. A continuación se muestran los pasos para la utilización de Deep Links y el funcionamiento de los Portales Adicionales. Para más información puedes revisar ¿Cuáles son las vistas o steps de Toku?

El siguiente script define la clase Toku, que se puede instanciar de la siguiente manera:

var toku = new Toku('<API_KEY>', options);

Donde options tiene las siguientes propiedades:

Parámetro	Default Value	Descripción
`containerId`	`'toku-container'`	id del elemento DOM que contendrá el IFrame
`iframeId`	`'toku-frame'`	id del IFrame creado.
`portalId`	`0`	El id del portal, para clientes que no tengan más de un portal establecer siempre en 0. En caso de que exista otro portal, este deberá asignarse con el valor 1.
`onSuccess`	`() => {}`	Respuesta ante una inscripción o pago exitoso.
`onError`	`() => {}`	Respuesta ante un error.

Para crear el IFrame e incrustarlo en el DOM, se debe llamar al método init de la siguiente manera:

toku.init('<STEP>', initOptions);

Reemplace <STEP> de acuerdo al deep link con el que desea iniciar el Iframe.