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	No*	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 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();