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

Obtener api key pública

Para poder incrustar el portal de pagos, 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 Toku ([email protected]).

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>

La clase Toku

Una vez incluido el script en el HTML de la página, se disponibilizará la clase Toku, con la cual podrás controlar el comportamiento del iframe.

Instanciación

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

const toku = new Toku(apiKey, {
  containerId,
  iframeId,
  onSuccess,
  onError,
});

Parámetro	Tipo	Requerido	Descripción
apiKey	string	Sí	El api key pública de la organización.
containerId	string	Sí	El id del tag HTML en el cual se quiere incrustar el iframe.
iframeId	string	No	El id del iframe. Por defecto es `toku-frame`.
onSuccess	function	No	Callback llamado cuando se inscribe un medio de pago o se realiza un cobro exitosamente.
onError	function	No	Callback llamado si hay un error durante el proceso.

Inicialización

Para incrustar el portal de pagos en la página, se debe llamar al método init, el cual recibe los siguientes parámetros:

toku.init(step, options);

El formato de options depende del valor de step, y las combinaciones se describen a continuación

Dashboard

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

Parámetro	Tipo	Requerido	Descripción
customerId	string	Sí	Id del customer

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.

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.

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 que portal queremos mostrar al customer y que 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

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. Las opciones permitidas son:

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');

Dashboard

En caso que el objetivo sea cargar el portal de pagos para un customer previamente identificado y que este pueda visualizar sus deudas o inscripciones de medios de pago.

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

Donde customerId corresponde al id del customer.

Recurring Checkout

Para enviar a pagos recurrentes se debe ejecutar la clase Toku como se muestra a continuación

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

Donde cada uno de los parámetros se define en la siguiente tabla.

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. Es requerido si la organización está en modo suscripción.
`gateway`	string	No	Gateway específico al cual será redirigido, en caso de omitir este valor, se mostrarán todos los gateways disponibles.

One Time Checkout

Para enviar a pagos spot se debe ejecutar la clase Toku como se muestra a continuación

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

Donde cada uno de los parámetros se define en la siguiente tabla.

Parámetro	Tipo	Requerido	Descripción
`customerId`	string	yes	Id del customer
`accountId`	string	yes	Id de la cuenta de pago. Se puede encontrar en Ajustes > Cuentas de cobro
`invoiceIds`	list[string]	yes	Arreglo con los ids de los invoices a pagar.
`gateway`	string	no	Gateway específico al cual será redirigido, en caso de omitir este valor, se mostrarán todos los gateways disponibles.