¿Cómo incrustar el portal de Toku en mi página?

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ámetroTipoRequeridoDescripción
apiKeystringEl api key pública de la organización.
containerIdstringEl id del tag HTML en el cual se quiere incrustar el iframe.
iframeIdstringNoEl id del iframe. Por defecto es toku-frame.
onSuccessfunctionNoCallback llamado cuando se inscribe un medio de pago o se realiza un cobro exitosamente.
onErrorfunctionNoCallback 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ámetroTipoRequeridoDescripción
customerIdstringId del customer

Checkout recurrente

toku.init('recurringCheckout', {
  customerId,
  accountId,
  subscriptionId,
  gateway,
});
ParámetroTipoRequeridoDescripción
customerIdstringId del customer
accountIdstringId de la cuenta de pago. Se puede encontrar en Ajustes > Cuentas de cobro
subscriptionIdstringNo*Id de la subscription en la cual se inscribirá el medio de pago. Es requerido si la organización está en modo suscripción.
gatewaystringNoGateway 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ámetroTipoRequeridoDescripción
customerIdstringId del customer
accountIdstringId de la cuenta de pago. Se puede encontrar en Ajustes > Cuentas de cobro
invoiceIdsArrayArreglo con los ids de los invoices a pagar.
gatewaystringNoGateway 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();