Manejo de eventos con postMessage

*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

EventoMeta-PayloadDescripción
VaultStartedSe emite cuando el widget haya cargado y el usuario ahora pueda interactuar dentro de los elementos de la página.
VaultSaveSuccesscreatedCard: 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.
VaultSaveErrorerrorMessage,
errorCode
Se dispara cuando ocurre un error en la creación de la tarjeta.
VaultFailederrorCode,
errorMessage
Para errores generales durante la carga.
VaultProcessingNo hay payloadEmitir cuando el usuario haga clic en el botón de acción y mientras la API de DEUNA responda.
onBinDetectedparsedData.data?.metadata?.cardBrandInformación del bin de la tarjeta ingresada por el cliente (i.e. franquicia)
onInstallmentSelectedparsedData.data?.metadata?.plan_option_id (este 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;
   
    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.