Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.onepay.la/llms.txt

Use this file to discover all available pages before exploring further.

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:
  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
Inicializa el SDK con el identificador del servicio y el ambiente (production o sandbox).
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: '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
});
  1. Eventos del formulario
FTCaptures.on(event, function (event) {
    //Do something with the event
});
  • 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 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 resultante se debe enviar a tu backend
// para crear la tarjeta con POST /cards (tokenizada)
console.log("Token generado:", tokenizationResult);
  1. Enviar el token al servidor

Enviar el token al servidor

Enviar el token al servidor.