> ## 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. # Integración del SDK Elements > Captura datos de tarjetas de forma segura cumpliendo PCI DSS con el SDK Elements de OnePay. 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** ```JavaScript Pagina de pagos lines icon="code" theme={null} ... ``` 2. **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: ```HTML Formulario lines icon="code" theme={null} ``` 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. 3. **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. ```JavaScript Iniciar la captura de datos lines icon="code" theme={null} 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](/client/cards/index#tarjetas-de-prueba-exitosas) `4242 4242 4242 4242` y el backend registrará una tarjeta de prueba. 4. **Configurar los campos del formulario** ```JavaScript Configurar los campos del formulario lines icon="code" theme={null} 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 }); ``` 5. **Eventos del formulario** ```js theme={null} FTCaptures.on(event, function (event) { //Do something with the event }); ``` * cardHolderValidationSuccess * cardNumberValidationSuccess * cardExpirationDateValidationSuccess * cardSecurityCodeValidationSuccess * expirationYearValidationSuccess * expirationMonthValidationSuccess * cardHolderValidationFailed * cardNumberValidationFailed * cardExpirationDateValidationFailed * cardSecurityCodeValidationFailed * expirationYearValidationFailed * expirationMonthValidationFailed 6. **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. ```js Validar y tokenizar el método de pago lines icon="code" theme={null} 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. 7. **Enviar el token al servidor** Enviar el token al servidor.