Vault via URL / Iframe

Vault via URL / Iframe (no recomendado)

Puedes renderizar el Vault Widget dentro de un Iframe o en un tab completo, en caso de que no puedas usar los SDKs.

Para integrar el Payment Vault por URL o iFrame, sigue los pasos:

1. Inicializa un Iframe en tu aplicación

Usa la URL de DEUNA para inicializar el Iframe dentro de tu sitio web.

URL para integración

https://elements.sandbox.deuna.io/vault?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}

https://elements.deuna.com/vault?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}

Incluye los parámetros de consulta al inicializar el Iframe.

Cada parámetro juega un papel importante en la personalización y el funcionamiento correcto del componente.

Atributos permitidos en Query Params

Atributo	Descripción
`publicApiKey`	La llave pública de tu cuenta con DEUNA.
`firstName`	El nombre del usuario que está siendo registrado o autenticado.
`lastName`	El apellido del usuario.
`email`	La dirección de correo electrónico del usuario.
`cssFile` (opcional)	UUID proporcionado por DEUNA. Esto aplica si quieres configurar un archivo css personalizado.
`orderToken`(optional)	UUID obtenido al crear una orden con DEUNA. Este query param es requerido para mostrar installments en el vault.
`allowSaveUserInfo`(optional)	(Boolean) Si se quiere guardar la tarjeta del usuario para uso futuro
`showSaveCardFlow`(optional)	(Boolean) Si se le quiere mostrar a un usuario nuevo el toggle al usuario para seleccionar si quiere guardar la tarjeta o no para uso futuro. Los usuarios guest no tiene la opción de guardar tarjeta ya que esta es de un solo uso.
`userToken` (optional)	El bearer token del usuario de DEUNA. Cuando este es enviado, todas las acciones dentro del widget van a hacer sobre este usuario de DEUNA. Adicionalmente, cuando se envía este userToken, no es necesario mandar ni el `email`, `firstName`, `lastName`. Solo será requerido el `userToken`y el `publicApiKey`.

📘
Los Query Params deben ser codificados adecuadamente en caso de que contengan caracteres especiales. Esto es fundamental para evitar posibles problemas en las solicitudes.

Ejemplo de integración de la URL en um sitio web con HTML, CSS, y JavaScript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vault Widget Integration</title>
    <style>
      /* Estilos básicos para el iframe */
      #vault-widget-iframe {
          width: 100%;
          height: 500px; /* Ajusta la altura según tus necesidades */
          border: none;
      }
    </style>
  </head>
  <body>
    <iframe
      id="vault-widget-iframe"
      src="https://elements.sandbox.deuna.io/vault?publicApiKey=${apiKey}&firstName=${encodeURIComponent(firstname)}&lastName=${encodeURIComponent(lastname)}&email=${encodeURIComponent(email)}"
      allow="payment"
    >
    </iframe>

    <script>
      // Escucha los mensajes de postMessage para recibir el card_id (a.k.a card token)
      window.addEventListener('message', function(event) {
          if (event.origin !== "https://elements.sandbox.deuna.io") {
              return;
          }
          let firstParsedData;
          if (typeof event.data === 'string') {
              firstParsedData = JSON.parse(event.data);
          } else {
              firstParsedData = event.data;
          }

          const parsedData = JSON.parse(firstParsedData);
          console.log('postMessage:', parsedData);

          if (
            parsedData &&
            parsedData.type === "vaultSaveSuccess"
        ) {
          // obtener el card_id (a.k.a card token)
          const cardId = parsedData.data.metadata.createdCard.id;

          // crear pago con el card_id
        }
      });
    </script>
  </body>
</html>

📘
El componente de DEUNA se encarga de la gestión de usuarios y proceso de guardado de tarjeta.

2. Maneja eventos con postMessage

Después de integrar la URL, DEUNA envia un evento mediante postMessage con el card_id válido.

📘
Envía el card_id en las solicitudes del endpoint V2 Purchase desde tu backend para completar pagos.

Ejemplo de manejo de eventos

window.addEventListener("message", (event) => {
  if (event.origin !== "URL_DE_CONFIANZA") { // Reemplaza con tu URL de confianza
    return;
  }

  switch (event.data.type) {
    case 'checkoutStarted':
      // Vault está listo
      break;

    case 'vaultSaveSuccess':
      // Tarjeta guardada con éxito, obtén el card_id
      const cardId = event.data.metadata.createdCard.id;
      // Usa card_id para procesar el pago
      
      // stored card sera true si fue una tarjeta seleccionada de las
      // tarjetas guardas, de lo contrario sera false si es nueva
      const storedCard = event.data.metadata.createdCard.storedCard
      break;

    case 'vaultSaveError':
    case 'vaultFailed':
      // Manejo de errores
      const errorCode = event.data.metadata.errorCode;
      const errorMessage = event.data.metadata.errorMessage;
      break;

    case 'vaultProcessing':
      // Pago en proceso
      break;
    case 'onBinDetected':
    	// Cuando el usuario ingresa los primeros 6 dígitos de la tarjeta
    case 'onInstallmentSelected':
    	const planOptionId = event.data.metadata.installment.plan_option_id;

    // Añade más casos según sea necesario
  }
});

📘
Para más información acerca de eventos, ve a Manejo de eventos con postMessage.

3. Aplica cambios en la orden después de cargar el Vault

Emite un mensaje al Iframe utilizando postMessage con type refetchOrder para aplicar cambios en una orden.

Aplicar cambios en una orden funciona para aplicar una promoción o descuento que afecte la orden en el Widget.

📘
El mensaje postMessage permite que el Widget actualice una orden y muestre los cuotas o el descuento.

Ejemplo de cambio en orden

if ( parsedData && parsedData.type === elementsLinkEvents.onBinDetected) {
          const cardBrand = parsedData.data?.metadata?.cardBrand
           
          // 1.Verificar si la tarjeta es mastercard  
          if (cardBrand === 'mastercard') {
            
            //Si es así aplicar un descuento del 20% (función del comercio)
            const cartUpdated  = applyDiscount(cart, 20);
            dispatcher(setDiscountedCart(cartUpdated));
            
            //Modifica la orden apuntando a un endpoint de Deuna
            await updateOrder({...});

            //2. Notificale al widget que hay que actualizar la orden e installments
            iframeRef.current?.contentWindow?.postMessage(
              JSON.stringify({
                type: 'refetchOrder',
                data: null // debe siempre ir en null
              }),
              '*'
            );
             // 3. Incluso podrías enviar un postMessage adicional para mostrar
             // un tag promocional, 
            iframeRef.current?.contentWindow?.postMessage(
            JSON.stringify({
              type: elementsLinkEvents.setCustomCSS,
              data: getCustomCSS(cardBrand)
            }),
            '*'
          );
          }
        }

Vault via URL / Iframe