Skip to main content
Integrar la biblioteca es un proceso sencillo. Simplemente necesita incluir el archivo JavaScript en su aplicación y configurar los elementos HTML necesarios para alojar los campos del SDK. Los siguientes pasos describen el proceso:
  1. Incluir el archivo JavaScript
Pagina de pagos
<body>
    <script src="https://cdn.firstoken.co/captures/js/2.2/sdk.js" integrity="sha256-IzmJZo/gWd+To2rEV/ZC9+fXZZgHfw5E0jZECyq9ipY=" crossorigin="anonymous"></script>
    ...
</body>
  1. Configurar los elementos HTML
A continuación, inserte los elementos HTML necesarios en su aplicación de formulario. Es fundamental usar etiquetas ID específicas para una correcta representación del SDK. Estos elementos sirven como marcadores de posición donde se insertarán los iframes del SDK. Para una seguridad óptima de los datos, recomendamos usar elementos “div” en lugar de elementos “input”. A continuación, se muestra un ejemplo:
Formulario
<form id="collect-form" method="post">
    <div class="form-field-group ">
      <div id="cc-holder"></div>
      <div id="cc-number"></div>
      <div id="cc-expiration-date"></div>
      <div id="cc-cvv"></div>
    </div>
    <div class="form-buttons"> <button type="submit" class="form-button">Process</button>
      <button type="submit" class="form-button inactive"> Regresar</button>
    </div>
</form>
En el ejemplo anterior, cada elemento “div” tiene un ID único que corresponde al tipo de datos que capturará (p. ej., número de tarjeta, nombre del titular, fecha de vencimiento, código de seguridad).
  • cc-number: corresponde al campo donde se recibirá el número de tarjeta.
  • cc-holder: corresponde al campo donde se recibirá el nombre del titular.
  • cc-expiration-date: corresponde al campo donde se recibirá la fecha de vencimiento.
  • cc-cvv: corresponde al campo donde se recibirá el código de seguridad.
  1. Iniciar la captura de datos
Iniciar la captura de datos
const FT = window.FTCaptures.init("ggMoeO2K3G", "production");
  1. Configurar los campos del formulario
Configurar los campos del formulario
const css = {
  'color': '#09090b',
  'height': '36px',
  'font-size': '16px',
  'font-family': 'ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji',
  'padding': '0px 12px',
  '::placeholder': {
      'color': '#c2c2c8',
      'font-weight': '300',
  },
};

FT.field('#cc-holder', {
  type: 'card-holder',
  name: 'holder',
  placeholder: '{{__('checkout.form_card.card_holder')}}',
  autocomplete: 'cc-holder',
  errorColor: '750000',
  required: 'true',
  css: css
});

FT.field('#cc-number', {
  type: 'card-number',
  name: 'number',
  placeholder: '{{__('checkout.form_card.card_number')}}',
  autocomplete: 'cc-number',
  errorColor: '750000',
  required: 'true',
  css: css
});

FT.field('#cc-expiration-date', {
  type: 'card-expiration-date',
  name: 'expiration_date',
  placeholder: '{{__('checkout.form_card.expiration')}}',
  autocomplete: 'cc-expiration-date',
  errorColor: '750000',
  required: 'true',
  css: css
});

FT.field('#cc-cvv', {
  type:'card-security-code',
  name: 'cvv',
  placeholder: '{{__('checkout.form_card.cvv')}}',
  autocomplete: 'cc-csc',
  errorColor: '750000',
  required: 'true',
  css: css
});
  1. Eventos del formulario
FTCaptures.on(event, function (event) {
    //Do something with the event
});
  • Validación exitosa
  • Validación fallida
  • cardHolderValidationSuccess
  • cardNumberValidationSuccess
  • cardExpirationDateValidationSuccess
  • cardSecurityCodeValidationSuccess
  • expirationYearValidationSuccess
  • expirationMonthValidationSuccess
  1. Valide y tokenize el metodo de pago
La función Tokenizar prepara los campos de una ruta específica para la tokenización. A continuación, se explica su funcionamiento: La función devuelve una nueva promesa que toma dos parámetros: resolve y reject. Estos parámetros se utilizan para gestionar el resultado asíncrono del proceso de tokenización.
Validar y tokenizar el metodo de pago
const id = "ggMoeO2K3G";

const validationResults = await FTCaptures.validate(id);

if (validationResults.hasErrors) {
    // Manejar error

    return 
}

const tokenizationResult = await FTCaptures.tokenize(id);

// Enviar token.
  1. Enviar el token al servidor

Enviar el token al servidor

Enviar el token al servidor.