Comience con el SDK Web

El SDK Web de DEUNA es un script para navegadores que renderiza experiencias de pago en un modal o en un elemento objetivo adaptable. Su backend crea pedidos y protege las credenciales privadas; el navegador recibe una clave API pública y un token de pedido de corta duración.

Arquitectura de integraciónPreguntar a Athia sobre esto#

1. Cargar una versión específicaPreguntar a Athia sobre esto#

<script
  crossorigin
  src="https://cdn.deuna.io/web-sdk/v1.7/index.js">
</script>

El script expone window.DeunaSDK. Asegurar la versión en producción y realizar pruebas de actualización en el entorno de pruebas. No modificar silenciosamente la URL del CDN en tiempo de ejecución a partir de fuentes no confiables.

Para una aplicación de una sola página, cargue el script una vez a nivel de documento. Si lo carga dinámicamente, resuelva una promesa compartida para evitar que las rutas concurrentes agreguen etiquetas duplicadas.

function loadDeunaSdk() {
  if (window.DeunaSDK) return Promise.resolve(window.DeunaSDK);
  if (window.__deunaSdkPromise) return window.__deunaSdkPromise;

  window.__deunaSdkPromise = new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'https://cdn.deuna.io/web-sdk/v1.7/index.js';
    script.crossOrigin = 'anonymous';
    script.onload = () => resolve(window.DeunaSDK);
    script.onerror = () => reject(new Error('DEUNA Web SDK failed to load'));
    document.head.append(script);
  });

  return window.__deunaSdkPromise;
}

2. Inicializar el entornoPreguntar a Athia sobre esto#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
});

Uso sandbox para pruebas de integración y production Para tráfico en tiempo real. El SDK es la opción predeterminada para producción, pero se puede configurar env Previene explícitamente el uso accidental de tokens y credenciales en diferentes entornos.

3. Seleccione la estrategia de cargaPreguntar a Athia sobre esto#

await DeunaSDK.initialize({
  publicApiKey: 'YOUR_PUBLIC_API_KEY',
  env: 'sandbox',
  preloadWidgets: [
    {
      widget: 'payment',
      params: {
        language: 'en',
        callbacks,
      },
    },
  ],
});

// Once your backend returns the token, reveal the prepared widget.
await DeunaSDK.initPaymentWidget({orderToken});

Cargar previamente únicamente la experiencia que el cliente probablemente abrirá. La fuente actual admite payment, elements, vouchery nextAction entradas de carga previa.

4. Abrir una experienciaPreguntar a Athia sobre esto#

Política de Seguridad de ContenidoPreguntar a Athia sobre esto#

Comenzar con la política existente de su aplicación y permitir únicamente los orígenes de DEUNA utilizados por el entorno y las funciones seleccionados. El SDK de producción se carga desde https://cdn.deuna.io; los marcos de widget utilizan los hosts de Checkout o Elements de producción, mientras que las conexiones de API y almacenamiento utilizan los endpoints de producción de DEUNA. El entorno de pruebas utiliza los correspondientes *.sandbox.deuna.io hosts.

Content-Security-Policy:
  script-src 'self' https://cdn.deuna.io;
  frame-src https://checkout-ux.deuna.com https://elements.deuna.com https://cdn.getduna.com;
  connect-src 'self' https://api.deuna.io https://apigw.getduna.com https://elements.deuna.com;

Los monederos, los proveedores de fraude, las APMs, las fuentes, las imágenes y los archivos de estilo personalizados pueden requerir orígenes específicos del proveedor. Añadir únicamente los orígenes utilizados por su integración configurada; verificar la consola del navegador en el entorno de pruebas y mantener la política bajo control de versiones. No añadir comodines amplios para evitar errores.

Host adaptable y accesibilidadPreguntar a Athia sobre esto#

El modo modal utiliza el viewport en pantallas de hasta 600 px de ancho. Para el modo embebido, proporcionar un host fluido y actualizar su altura desde onResize.

#deuna-payment {
  width: 100%;
  min-width: 0;
  min-height: 32rem;
}

@media (max-width: 600px) {
  #deuna-payment { min-height: 100dvh; }
}

Mantener la función de zoom activada, no bloquear el foco fuera del widget, restaurar el foco después de cerrar, y probar la navegación con teclado y un zoom de texto del 200%.

Lista de verificación para el entorno de pruebasPreguntar a Athia sobre esto#

• El script se carga una vez y el fallo produce una interfaz de usuario recuperable.
• Las claves y los tokens de pedido del entorno de pruebas nunca llegan a la producción, ni viceversa.
• Los modos modal y de destino funcionan con un ancho de 320 px y con un teclado únicamente.
• Se gestionan los casos de éxito, rechazo, cierre, tiempo de espera, actualización y interrupción de la red.
• Los popups o redirecciones de 3DS y APM no están bloqueados por la CSP o el sandboxing de iframe.
• Los registros excluyen tokens, detalles del cliente y datos de pago.
• Su backend, y no la devolución, decide si se permite la finalización de la transacción.

Próximos pasosPreguntar a Athia sobre esto#