Función postMessage en JavaScript

*postMessage es una función de JavaScript crucial para la comunicación segura entre iFrames y ventanas en aplicaciones web. Es especialmente importante en el contexto de pagos online, donde proteger los datos de los usuarios es esencial. Esta función nos permite intercambiar información de forma segura entre el sistema de pago y la página del comercio, garantizando que los datos sensibles, como la información de tarjetas de crédito, se manejen con la máxima seguridad. Utilizamos postMessage** para enviar eventos estandarizados que informan sobre el progreso de las transacciones, mejorando la experiencia del usuario y asegurando transacciones seguras.*

En la siguiente sección, encontrarás detalles sobre estos eventos, ejemplos de implementación y recomendaciones sobre cómo actuar tras recibir y procesar estos eventos, facilitando una integración fluida en tu sistema de pagos.

Tabla de eventos

Evento	Meta-Payload	Descripción
`VaultStarted`		Se emite cuando el widget haya cargado y el usuario ahora pueda interactuar dentro de los elementos de la página.
`VaultSaveSuccess`	createdCard: bankName (string), cardId (string), company (string), firstSix (string), lastFour (string), userId (string), storedCard (boolean, sera true si la tarjeta fue seleccionada de las tarjetas guardadas de usuario, de lo contrario es false si es nueva)	Emitido cuando se completa con éxito la creación de una tarjeta en DEUNA.
`VaultSaveError`	errorMessage, errorCode	Se dispara cuando ocurre un error en la creación de la tarjeta.
`VaultFailed`	errorCode, errorMessage	Para errores generales durante la carga.
`VaultProcessing`	-	Emitir cuando el usuario haga clic en el botón de acción y mientras la API de DEUNA responda.
`onBinDetected`	Aquí se proporciona como metadata: BIN de la tarjeta (card_bin) Marca de la tarjeta (card_brand) Estos datos se enviarán únicamente si se ingresa el BIN. En caso de que el sistema detecte la introducción del BIN y posteriormente se borre, no se enviará metadata, para informar al comercio que no lo envíe en la transacción.	Emitido al reconocer algún cambio en el ingreso del BIN.
`onInstallmentSelected`	`parsedData.data?.metadata?.plan_option_id` : dicho ID contiene la opción seleccionada de installment que se debe mandar en el /purchase API)	Se emite este evento cuando el usuario seleccionó alguna opción del dropdown de installments

Ejemplo de código para implementar postMessage

window.addEventListener("message", (event) => {
  // Verificar el origen del mensaje para garantizar seguridad
  if (event.origin !== "URL_DE_CONFIANZA") {
    return;
  }

  // Procesar el evento recibido
  switch (event.data.type) {
    case 'VaultStarted':
      console.log("VaultStarted: Click to Pay está listo para la interacción.");
      // Implementar acciones cuando el proceso de pago ha iniciado
      break;

    case 'VaultSaveSuccess':
      const cardId = event.data.metadata.createdCard.id;
      console.log(`VaultSaveSuccess: Tarjeta guardada con éxito. ID de la tarjeta: ${cardId}`);
      // Manejar el éxito en la creación de la tarjeta y proceder con el proceso de pago
      break;

    case 'VaultSaveError':
    case 'VaultFailed':
      const errorCode = event.data.metadata.errorCode;
      const errorMessage = event.data.metadata.errorMessage;
      console.error(`${event.data.type}: Error en el proceso. Código: ${errorCode}, Mensaje: ${errorMessage}`);
      // Manejar errores en el guardado de la tarjeta o errores generales
      break;

    case 'VaultProcessing':
      console.log("VaultProcessing: Procesando pago con DEUNA.");
      // Implementar acciones mientras se procesa la transacción
      break;
    case 'onBinDetected':
    	// Cuando el usuario ingresa los primeros 6 dígitos de la tarjeta
      const cardBrand = event.data?.metadata?.cardBrand;
    case 'onInstallmentSelected':
    	// Cuando el usuario selecciona las cantidad de cuotas
    	const planOptionId = event.data.metadata.plan_option_id;
   case 'onBinEmpty':
    	// Cuando el usuario limpia el BIN
    default:
      console.warn(`Evento no reconocido: ${event.data.type}`);
      // Manejar cualquier otro caso no especificado
      break;
  }
});

Acciones post-captura de evento

Tras la captura de un evento, es crucial que el comercio inicie un proceso en su backend para realizar una llamada al endpoint para procesar el pago de nuestro servicio. Esto garantiza la finalización efectiva de la transacción de pago, siguiendo nuestras directrices de seguridad y manejo de datos.