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,
});

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,
});

Checkout recurrente

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

Checkout one-time

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

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:

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.

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.