Create Enrollment Checkout Form

HTML

La inscripción de una tarjeta mediante Checkout Form es un proceso sencillo que solo requiere incluir un script en un formulario HTML de estructura básica sin las necesidad de realizar requests directamente a Toku. A continuación, se muestra un ejemplo básico de formulario:

HTML

<form id="creditCardForm">
    <div id="cardNumberContainer">
        <label for="cardNumber">Card Number:</label>
        <div id="pan" style="width: 17em; height: 3em;"></div>
    </div>

    <div id="expirationDateContainer">
        <label for="expirationDate">Expiration Date (MM/YY):</label>
        <input type="text" id="expirationDate" name="expirationDate" placeholder="MM/YY" required><br>
    </div>

    <label for="cvv">CVV:</label>
    <div id="cvv" style="width: 4em; height: 2em;"></div>

    <div id="cardholderNameContainer">
        <label for="cardholderName">Cardholder's Name:</label>
        <input type="text" id="cardholderName" name="cardholderName" required><br>
    </div>

    <button id="submitButton" type="button">Submit</button>
</form>

Es importante destacar que los IDs de los elementos

asociados al pan y cvv deben coincidir con los inputs del objeto TokuCheckoutForm consumido en el siguiente script para su correcto funcionamiento.

Script

HTML

<!-- Import the JavaScript file -->
<script src="https://storage.googleapis.com/toku-embedded-portal/checkout-form.min.js"></script>
<script>
  let tokuCheckoutForm = null;

  document.addEventListener('DOMContentLoaded', function () {
      tokuCheckoutForm = new TokuCheckoutForm({
          panDivId: 'pan',
          cvvDivId: 'cvv',
          environment: params.get('environment') || 'PROD',
          onSuccess: () => {
              console.log('Success');
              hideLoadingIndicator();
          },
          onError: () => {
              console.log('Error');
              hideLoadingIndicator();
          },
          onPanFocus: tokuCheckoutForm => {
              console.log('panFocus');
          },
          onPanBlur: tokuCheckoutForm => {
              console.log('panBlur');
          },
          onCvvFocus: tokuCheckoutForm => {
              console.log('CvvFocus');
            	tokuCheckoutForm.setCvvStylesheet('input { color: green }');
          },
          onCvvBlur: tokuCheckoutForm => {
              console.log('CvvBlur');
            	tokuCheckoutForm.setCvvStylesheet('input { color: red }');
          },
          onPanChange: data => {
              console.log('onPanChange' + JSON.stringify(data));
          },
          onCvvChange: data => {
              console.log('onCvvChange' + JSON.stringify(data));
          },
          onCardValidationLoading: () => {
              console.log('onCardValidationLoading');
          },
          onCardValidationCompleted: data => {
              console.log('onCardValidationCompleted' + JSON.stringify(data));
          },
          panStyle: {
              width: '15em',
              height: '1em',
              'border-radius': '0.5rem',
              border: '2px solid',
              padding: '0.5rem',
              outline: 'none',
          },
          cvvStyle: { width: '3em', height: '1em', 'box-shadow': '0 0 5px rgba(0, 0, 0, 0.2)' },
          options: {
              maskPan: true,
              panPlaceholder: 'Card Number',
              cvvPlaceholder: 'CVV',
          },
          panStylesheet: 'input { color: blue; } input:focus { color: green }',
          cvvStylesheet: '',
          organizationId: <org_id_encrypted>,
          accountId: <acc_id_encrypted>,
          tokuProduct: <toku_product>,
      });
  });

  document.getElementById("submitButton").addEventListener('click', function () {
      const formData = {
          expirationDate: document.getElementById('expirationDate')?.value,
          cardholderName: document.getElementById('cardholderName')?.value,
      };
      tokuCheckoutForm.processOperation("INSCRIPTION", {
          organizationId: <org_id_encrypted>,
          accountId: <acc_id_encrypted>,
          customerId: <cus_id_encrypted>,
          tokuProducts: [<toku_product>],
          expirationDate: formData.expirationDate,
          customerName: formData.cardholderName,
          subscriptionId: <subscription_id_encrypted>
      });
  });

  document.getElementById('expirationDate').addEventListener('input', function (e) {
      let input = e.target.value.replace(/\D/g, '').substring(0, 4); // Allow only digits and limit to 4 chars
      if (input.length >= 2) {
          input = input.slice(0, 2) + '/' + input.slice(2); // Add slash after the second digit
      }
      e.target.value = input;
  });
</script>

TokuCheckoutForm

  <th>
    Tipo
  </th>

  <th>
    Descripción
  </th>

  <th>
    Requerido
  </th>
</tr>

  <td>
    `string`
  </td>

  <td>
    Identificador del div asociado al **pan** en el form. 
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    cvvDivId
  </td>

  <td>
    `string`
  </td>

  <td>
    Identificador del div asociado al **cvv** en el form.
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    environment
  </td>

  <td>
    `string`
  </td>

  <td>
    Ambiente de trabajo. Debe ser `PROD`.
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    onSuccess
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada al éxito
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    onError
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada al error
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    onPanFocus
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada al enfocar el `input` del pan.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onPanBlur
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada al desenfocar el `input` del pan.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onCvvFocus
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada al enfocar el `input` del cvv.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onCvvBlur
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada al desenfocar el `input` del cvv.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onPanChange
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada cada vez que el usuario cambia el número de tarjeta. Recibe como primer argumento `data` un objeto con los siguientes atributos:  

    * `length`: El largo del número de tarjeta ingresado hasta ahora.
    * `cardInstitution`: `visa`, `mastercard` o `americanexpress`
    * `luhnCheck`: `true` si el número ingresado hasta ahora pasa el [algoritmo de Luhn](https://es.wikipedia.org/wiki/Algoritmo_de_Luhn).
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onCvvChange
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada cada vez que el usuario cambia el cvv. Recibe como primer argumento `data` un objeto con los siguientes atributos:  

    * `length`: El largo del número de tarjeta ingresado hasta ahora.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onCardValidationLoading
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada cuando se va a buscar el país y tipo de la tarjeta.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    onCardValidationCompleted
  </td>

  <td>
    `function`
  </td>

  <td>
    Función gatillada cuando se obtiene el país y tipo de la tarjeta. Recibe como primer argumento `data` un objeto con los siguientes atributos:  

    * `success`: `true` si la validación fue exitosa.
    * `country`: El país de emisión de la tarjeta.
    * `type`: `credit` o `debit`.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    panStyle
  </td>

  <td>
    `dict`
  </td>

  <td>
    Estilo del input del **pan**
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    cvvStyle
  </td>

  <td>
    `dict`
  </td>

  <td>
    Estilo del input del **cvv**
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    panStylesheet
  </td>

  <td>
    `string`
  </td>

  <td>
    Estilos para insertar de un tag `<style>` en el `iframe` del `pan`
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    cvvStylesheet
  </td>

  <td>
    `string`
  </td>

  <td>
    Estilos para insertar de un tag `<style>` en el `iframe` del `cvv`
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    options
  </td>

  <td>
    `dict`
  </td>

  <td>
    `maskPan`: `true` para ofuscar el `pan` cuando se desenfoca el `input`.
  </td>

  <td>
    No
  </td>
</tr>

<tr>
  <td>
    organizationId
  </td>

  <td>
    `string`
  </td>

  <td>
    id organization encriptado.
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    accountId
  </td>

  <td>
    `string`
  </td>

  <td>
    id account encriptado.
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    tokuProduct
  </td>

  <td>
    `string`
  </td>

  <td>
    Toku product que se usará para procesar la operación. Para este caso (inscripción) solo soporta `cards_batch_mx_recurring_pst`.
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

Nombre
panDivId

TokuCheckoutForm.processOperation

  <th>
    Tipo
  </th>

  <th>
    Descripción
  </th>

  <th>
    Requerido
  </th>
</tr>

  <td>
    `string`
  </td>

  <td>
    Tipo de operación a realizar
  </td>

  <td>
    :radio_button:

     Si
  </td>
</tr>

<tr>
  <td>
    body
  </td>

  <td>
    `json`
  </td>

  <td>
    Cuerpo para la request
  </td>

  <td>
    :radio_button:

     Si
  </td>
</tr>

Nombre
TokuOperationType

TokuCheckoutForm.processOperation - body

  <th>
    Tipo
  </th>

  <th>
    Descripción
  </th>

  <th>
    Requerido
  </th>
</tr>

  <td>
    `string`
  </td>

  <td>
    id organization encriptado
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    accountId
  </td>

  <td>
    `string`
  </td>

  <td>
    id account encriptado
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    customerId
  </td>

  <td>
    `string`
  </td>

  <td>
    id customer encriptado
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    tokuProducts
  </td>

  <td>
    `list[string]`
  </td>

  <td>
    Lista de toku products que se usarán para procesar el pago. Los valores soportados son:  

    * `["cards_batch_mx_recurring_pst"]`
    * `["payment_orchestration"]`
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    expirationDate
  </td>

  <td>
    `string`
  </td>

  <td>
    Fecha expiración de tarjeta ingresada
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    customerName
  </td>

  <td>
    `string`
  </td>

  <td>
    Nombre del portador de tarjeta ingresada
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

<tr>
  <td>
    subscriptionId
  </td>

  <td>
    `string`
  </td>

  <td>
    id subscripción encriptado
  </td>

  <td>
    :radio_button: Si
  </td>
</tr>

Nombre
organizationId

TokuCheckoutForm.setPanStylesheet()

Recibe un string con reglas css y lo inserta dentro de un tag <style> en el iframe del pan.

TokuCheckoutForm.setCvvStylesheet()

Recibe un string con reglas css y lo inserta dentro de un tag <style> en el iframe del cvv.

Ejemplo integrado

El siguiente ejemplo muestra un ejemplo integral para incorporar un formulario de inscripción de tarjetas utilizando Checkout Form, junto con un indicador de carga simple para mejorar la experiencia del usuario.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Checkout Form Example</title>
  <style>
    /* Simple loading spinner styles */
    #loadingIndicator {
      display: none;
      width: 40px;
      height: 40px;
      border: 4px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top-color: #000;
      animation: spin 1s infinite linear;
      margin: 10px auto;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <h1>Checkout Form</h1>
  <form id="creditCardForm">
    <div id="cardNumberContainer">
      <label for="cardNumber">Card Number:</label>
      <div id="pan" style="width: 17em; height: 3em;"></div>
    </div>

    <div id="expirationDateContainer">
      <label for="expirationDate">Expiration Date (MM/YY):</label>
      <input type="text" id="expirationDate" name="expirationDate" placeholder="MM/YY" required><br>
    </div>

    <label for="cvv">CVV:</label>
    <div id="cvv" style="width: 4em; height: 2em;"></div>

    <div id="cardholderNameContainer">
      <label for="cardholderName">Cardholder's Name:</label>
      <input type="text" id="cardholderName" name="cardholderName" required><br>
    </div>

    <button id="submitButton" type="button">Submit</button>
  </form>
  <div id="loadingIndicator"></div>

  <!-- Import the JavaScript file -->
  <script src="https://storage.googleapis.com/toku-embedded-portal/checkout-form.min.js"></script>
  <script>
    // Get the current URL
    const url = new URL(window.location.href);

    // Get the search parameters
    const params = new URLSearchParams(url.search);

    let tokuCheckoutForm = null;
    document.addEventListener('DOMContentLoaded', function () {
      tokuCheckoutForm = new TokuCheckoutForm({
        panDivId: 'pan',
        cvvDivId: 'cvv',
        environment: params.get('environment') || 'PROD',
        onSuccess: () => {
          console.log('Success');
          hideLoadingIndicator();
        },
        onError: () => {
          console.log('Error');
          hideLoadingIndicator();
        },
        onPanFocus: tokuCheckoutForm => {
          console.log('panFocus');
        },
        onPanBlur: tokuCheckoutForm => {
          console.log('panBlur');
        },
        onCvvFocus: tokuCheckoutForm => {
          console.log('CvvFocus');
        	tokuCheckoutForm.setCvvStylesheet('input { color: green }');
        },
        onCvvBlur: tokuCheckoutForm => {
          console.log('CvvBlur');
          tokuCheckoutForm.setCvvStylesheet('input { color: red }');
        },
        onPanChange: data => {
          console.log('onPanChange' + JSON.stringify(data));
        },
        onCvvChange: data => {
          console.log('onCvvChange' + JSON.stringify(data));
        },
        onCardValidationLoading: () => {
          console.log('onCardValidationLoading');
        },
        onCardValidationCompleted: data => {
          console.log('onCardValidationCompleted' + JSON.stringify(data));
        },
        panStyle: {
          width: '15em',
          height: '1em',
          'border-radius': '0.5rem',
          border: '2px solid',
          padding: '0.5rem',
          outline: 'none',
        },
        cvvStyle: { width: '3em', height: '1em', 'box-shadow': '0 0 5px rgba(0, 0, 0, 0.2)' },
        options: {
          maskPan: true,
          panPlaceholder: 'Card Number',
          cvvPlaceholder: 'CVV',
        },
        panStylesheet: 'input { color: blue; } input:focus { color: green }',
        cvvStylesheet: '',
        organizationId: params.get('organizationId'),
        accountId: params.get('accountId'),
        tokuProduct: params.get('tokuProduct'),
      });
    });
    document.getElementById('submitButton').addEventListener('click', function (event) {
      showLoadingIndicator();

      const formData = {
        expirationDate: document.getElementById('expirationDate').value,
        cardholderName: document.getElementById('cardholderName').value,
      };
      tokuCheckoutForm.processOperation('INSCRIPTION', {
        organizationId: params.get('organizationId'),
        accountId: params.get('accountId'),
        customerId: params.get('customerId'),
        tokuProducts: [params.get('tokuProduct')],
        expirationDate: formData.expirationDate,
        customerName: formData.cardholderName,
        subscriptionId: params.get('subscriptionId'),
      });
    });

    function showLoadingIndicator() {
      document.getElementById('loadingIndicator').style.display = 'block';
      document.getElementById('submitButton').disabled = true;
    }

    function hideLoadingIndicator() {
      document.getElementById('loadingIndicator').style.display = 'none';
      document.getElementById('submitButton').disabled = false;
    }

    document.getElementById('expirationDate').addEventListener('input', function (e) {
      let input = e.target.value.replace(/\D/g, '').substring(0, 4); // Allow only digits and limit to 4 chars
      if (input.length >= 2) {
        input = input.slice(0, 2) + '/' + input.slice(2); // Add slash after the second digit
      }
      e.target.value = input;
    });
  </script>
</body>

</html>