Braintree 3D Secure iframe not displaying — Possible conflict with VGS iframe?

[victorgraciaweb]

Hello everyone, I have a question, and I hope someone can help me. We are implementing 3D Secure using Braintree's server-side. The problem is that we can't get the iframe with the interactive challenge to appear. When we call the function: initializeChallengeWithLookupResponse, the iframe should be displayed in the browser, but it never shows up, and the developer console doesn’t show any errors either.

Does anyone know if this could be caused by a conflict with a VGS (Very Good Security) iframe in the same component, or are we misusing the function? We’ve tested this in both Sandbox and Production environments.

  const client = await braintree.client.create({ authorization: clientToken });

  const threeDS = await braintree.threeDSecure.create({
    client,
    version: 2,
  });

  threeDS.prepareLookup({
    nonce: nonce,
    bin: nonce.tokenizeCreditCard.paymentMethod.bin,
  }, async (err, payloadPrepareLookup) => {
    if (err) {
      console.error("Error en la verificación 3D Secure", err);
      return;
    }

    console.log("PAYLOAD PREPARE LOOKUP: ", payloadPrepareLookup);

    // Realizar el lookup 3DS en el backend
    const lookupResponse = await axios.post(
      "http://localhost:3000/api/v1/payments/3ds-lookup",
      payloadPrepareLookup,
      { headers: { "Content-Type": "application/json" } }
    );

    console.log("LOOKUP RESPONSE: ", lookupResponse.data);

    // Verificar si es necesario el desafío 3DS
    const authentication = lookupResponse.data.data.performThreeDSecureLookup.paymentMethod.details.threeDSecure.authentication;
    if (authentication.liabilityShifted) {
      console.log("No se requiere desafío 3DS");

      const processPaymentResponse = await axios.post(
        "http://localhost:3000/api/v1/payments/process-payment",
        {
          nonce: lookupResponse.data.data.performThreeDSecureLookup.paymentMethod.id,
          amount: "10.00",
        },
        { headers: { "Content-Type": "application/json" } }
      );

      console.log("Respuesta del pago:", processPaymentResponse.data);
      alert("Pago procesado exitosamente!");
      form.reset();
    } else if (authentication.liabilityShiftPossible) {
      console.log("Se requiere desafío 3DS");

      threeDS.initializeChallengeWithLookupResponse(lookupResponse.data.data.performThreeDSecureLookup).then(function (payload) {
        if (payload.liabilityShifted) {
          // Liability has shifted
          console.log("Desafío 3DS exitoso: ", payload);
          //submitNonceToServer(payload.nonce);
        } else if (payload.liabilityShiftPossible) {
          // Liability may still be shifted
          // Decide if you want to submit the nonce
        } else {
          // Liability has not shifted and will not shift
          // Decide if you want to submit the nonce
        }
      });
    }
  });