Casos de uso

El Tokenizer Web es útil en los siguientes escenarios:

Tokenizar una tarjeta para crear una orden con su cargo — el token generado se usa directamente al crear una orden de pago de cargo único.
Tokenizar una tarjeta para guardarla y ejecutar cargos bajo demanda — el token se asocia a un customer y la tarjeta queda disponible para cobros posteriores iniciados por el comercio en cualquier momento, sin intervención del cliente.
Tokenizar una tarjeta para crear suscripciones — el token se asocia a un customer que se inscribe en un plan, habilitando cobros recurrentes automáticos.

Inicializar el iframe

Un iframe es un documento HTML que está incrustado dentro de otro en un sitio Web.

El iframe se compone de una parte de HTML y una parte de JavaScript

<html>

<head>
  <meta charset="utf-8">
  <title>Checkout</title>
  <script type="text/javascript" src="https://pay.conekta.com/v1.0/js/conekta-checkout.min.js"></script>
</head>

<body>
  <div id="conektaIframeContainer" style="height: 1350px;"></div>
  <script type="text/javascript">
    const options = {
      backgroundMode: 'lightMode',
      colorPrimary: '#081133',
      colorText: '#585987',
      colorLabel: '#585987',
      hideLogo: false,
      inputType: 'minimalMode',
      excludeCardNetworks: [],
    };

    const config = {
      targetIFrame: "#conektaIframeContainer",
      publicKey: "key_xxxxxxxxxxxxxxxx",
      locale: 'es',
    };

    const callbacks = {
      onCreateTokenSucceeded: function(token) {
        console.log(token)
      },
      onCreateTokenError: function(error) {
        console.log(error)
      },
      onGetInfoSuccess: function(loadingTime) {
        console.log(loadingTime)
      },
    };

    window.ConektaCheckoutComponents.Card({
      config,
      callbacks,
      options
    })
  </script>
</body>

</html>

Parámetros: `config`

Campo	Tipo	Requerido	Descripción
`targetIFrame`	string	Sí	Selector CSS del contenedor donde se renderiza el iframe
`publicKey`	string	Sí	Llave pública de tu cuenta Conekta. Obtén tus llaves
`locale`	string	No	Idioma del componente. Valores: `es` (español), `en` (inglés). Default: `es`

Parámetros: `options`

Todos los campos de options son opcionales y permiten personalizar la apariencia del componente.

Campo	Tipo	Descripción	Valores posibles
`backgroundMode`	string	Tema visual del componente	`lightMode`, `darkMode`
`colorPrimary`	string	Color principal: botón y bordes activos. Formato hexadecimal	Ej. `#081133`
`colorText`	string	Color del texto dentro de los inputs. Formato hexadecimal	Ej. `#585987`
`colorLabel`	string	Color de las etiquetas de los campos. Formato hexadecimal	Ej. `#585987`
`hideLogo`	boolean	Oculta el logo de Conekta en el iframe	`true`, `false` (default: `false`)
`inputType`	string	Estilo visual de los inputs	`flatMode`, `minimalMode`
`excludeCardNetworks`	array	Redes de tarjeta a excluir del formulario	`["Visa"]`, `["Mastercard"]`, `["Amex"]`

Callbacks

Evento	Cuándo se dispara	Qué hacer
`onCreateTokenSucceeded`	La tarjeta fue tokenizada correctamente	Recupera el `token.id` y úsalo para crear el customer u orden en tu servidor
`onCreateTokenError`	Ocurrió un error durante la tokenización	Muestra un mensaje de error al usuario y permite que reintente
`onGetInfoSuccess`	El iframe terminó de cargar	Úsalo para medir tiempos de carga o mostrar el formulario al usuario una vez listo

Personalización del Tokenizer

Submit externo

Por defecto, el token se genera cuando el usuario hace clic en el botón Finalizar del iframe. Si necesitas controlarlo desde tu propio botón o lógica, activa el modo ExternalSubmit.

Cómo activarlo

1. Agrega useExternalSubmit: true al objeto config:

const config = {
  targetIFrame: "#conektaIframeContainer",
  publicKey: "key_xxxxxxxxxxxxxxxx",
  locale: 'es',
  useExternalSubmit: true,
};

2. Define la función que disparará el envío desde tu código:

let submitConektaPayment = () => {};

const submitPayment = () => {
  submitConektaPayment();
};

3. Agrega onUpdateSubmitTrigger a los callbacks para recibir la función de envío del iframe:

const callbacks = {
  onCreateTokenSucceeded: function(token) { console.log(token) },
  onCreateTokenError: function(error) { console.log(error) },
  onUpdateSubmitTrigger: function(submitFunction) {
    submitConektaPayment = submitFunction;
  },
};

4. Llama a submitPayment() desde tu botón o lógica cuando quieras generar el token:

<button onclick="submitPayment()">Pagar</button>