Descripción general

​

Qué es Secure Elements

• Revelado de tarjeta — mostrar a un usuario su propio PAN, fecha de expiración y CVV.
• Entrada segura de tarjeta — capturar una tarjeta física y agregarla como método de pago en su cuenta.

​

Cómo funciona

Your backend  →  mint client token  →  Your frontend  →  SDK mounts Fluz frame  →  callback with result

​

Requisitos previos

• Tu aplicación está registrada con Fluz. El alcance requerido en tu token de acceso depende de para cuál capacidad estás generando un client token:

  Propósito	Alcance requerido
  reveal (Revelado de tarjeta)	CREATE_VIRTUALCARD
  tokenization (Entrada segura de tarjeta)	MANAGE_PAYMENT

• Para un token de revelado específicamente, también necesitas un id de tarjeta virtual ACTIVE, propiedad de la cuenta que estás revelando, para pasarlo al generarlo.

​

Entornos

​

Cargar el SDK

<script src="https://secure-cdn.fluz.app/secure-elements/v0.3.0/index.global.js"></script>
<script>
  const { createCardViewer } = FluzSecureElements;

  const viewer = createCardViewer({
    /* ... */
  });
</script>

​

Generar un client token

POST {baseUrl}/v1/client-token
Authorization: Bearer <your Fluz OAuth access token>
Content-Type: application/json

{
  "purpose": "reveal",
  "virtualCardId": "<uuid>"
}

{ "clientToken": "<token>", "loadToken": "<token>", "expiresIn": 300 }

​

Estilos de los campos

const viewer = createCardViewer({
  clientToken,
  loadToken,
  frameHostOrigin: "https://staging.secure.fluz.app",
  style: {
    color: "#1a1a1a",
    fontSize: "16px",
    fontWeight: "600",
    fontFamily: "Inter",
  },
});

• Fuentes del sistema — pilas comunes de SO/web-safe (system-ui, -apple-system, Helvetica Neue, Arial, Georgia, Menlo, y las palabras clave genéricas monospace / serif / sans-serif, entre otras). Estas renderizan de inmediato, sin petición de red.
• Google Fonts — cualquier familia del catálogo de Google Fonts ("Roboto", "Inter", "IBM Plex Mono", etc.), pasada exactamente como la lista Google. El SDK carga la fuente por ti — no necesitas una etiqueta <link> ni una regla @font-face.

const { SYSTEM_FONTS, GOOGLE_FONTS, isAllowedFontFamily } = FluzSecureElements;

isAllowedFontFamily("Roboto"); // true
isAllowedFontFamily("roboto"); // false -- exact, case-sensitive match required

​

Content Security Policy

frame-src https://secure.fluz.app;  # or https://staging.secure.fluz.app to test against staging
script-src https://secure-cdn.fluz.app 'nonce-<your-nonce>';  # or a hash, for the inline script that calls the SDK

<script nonce="<your-nonce>">
  const { createCardViewer } = FluzSecureElements;
  // ...
</script>

​

Modelo de seguridad

• Tu token de acceso OAuth nunca sale de tus servidores.
• El client token que tu frontend conserva es opaco y de un solo propósito — no transporta datos de tarjetas y no puede reutilizarse para una tarjeta o acción diferente.
• Los datos de tarjeta solo se pueden leer dentro de frames alojados por Fluz, aislados del propio JavaScript de tu página. Cada frame está en sandbox (allow-scripts allow-same-origin allow-forms) con referrerPolicy="no-referrer" — el SDK nunca coloca datos de tarjeta en el DOM fuera de ellos.
• El frame solo se renderiza dentro de orígenes que hayas preregistrado con Fluz.
• Los datos de tarjeta nunca llegan a tus servidores ni al JavaScript de tu página — esta es la condición más relevante para la elegibilidad SAQ A bajo PCI DSS, junto a los demás requisitos que establece SAQ A (p. ej., no almacenar, procesar ni transmitir por tu cuenta datos del titular de la tarjeta). Tus obligaciones aplicables bajo PCI DSS dependen de todo tu entorno de datos del titular; confirma tu alcance con tu QSA.

​

Próximos pasos