Integración del SDK Elements

Integrar el SDK Elements es un proceso sencillo. Solo necesitas incluir el archivo JavaScript en tu aplicación y configurar los elementos HTML necesarios para alojar los campos del SDK. Los siguientes pasos describen el proceso:

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>

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.

Iniciar la captura de datos

Inicializa el SDK con el identificador del servicio, el ambiente (siempre production) y un callback que se ejecuta cuando el SDK está listo. Los tres argumentos son obligatorios.

Iniciar la captura de datos

const FT = window.FTCaptures.init("ggMoeO2K3G", "production", () => {});

El ambiente del SDK es siempre production, incluso durante tus pruebas. El modo de prueba lo determina la API key con la que llamas a la API de OnePay: con tu llave de test puedes tokenizar la tarjeta de prueba 4242 4242 4242 4242 y el backend registrará una tarjeta de prueba.

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: 'Nombre del titular',
  autocomplete: 'cc-holder',
  errorColor: '750000',
  required: 'true',
  css: css
});

FT.field('#cc-number', {
  type: 'card-number',
  name: 'number',
  placeholder: 'Número de tarjeta',
  autocomplete: 'cc-number',
  errorColor: '750000',
  required: 'true',
  css: css
});

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

FT.field('#cc-cvv', {
  type: 'card-security-code',
  name: 'cvv',
  placeholder: 'CVV',
  autocomplete: 'cc-csc',
  errorColor: '750000',
  required: 'true',
  css: css
});

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

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 método de pago

const id = "ggMoeO2K3G";

const validationResults = await FTCaptures.validate(id);

if (validationResults.hasErrors) {
    // Manejar errores de validación
    console.error("Errores de validación:", validationResults);
    return;
}

const tokenizationResult = await FTCaptures.tokenize(id);

// El token de la tarjeta es el valor del campo `number` del resultado.
const cardToken = tokenizationResult.number;

tokenize() devuelve los campos del formulario con los datos sensibles ya reemplazados: el token de la tarjeta es el valor del campo number (un UUID). Es un token temporal — envíalo de inmediato a tu backend para crear la tarjeta; no lo almacenes.

Enviar el token al servidor

Enviar el token al servidor

Enviar el token al servidor.

Inicio rápido

Cobrar (Recaudo)

Pagar (Dispersiones)

Webhooks

IA (MCP)

Verificación

Configuración

Artículos

Enviar el token al servidor