Challenge Flow 3d Secure 2 .NET SDK

Question

I have all but finished my implementation of the 3d Secure 2 workflow (https://developer.globalpay.com/ecommerce/3d-secure-version2/browser-authentication#api) but I am struggling to determine what to do on the challenge flow.

All of the cards work apart from the challenge flow cards, I am getting the iFrame appears on my end, and clicking "continue" fires a request to my Challenge URL - I am performing the code that is shown on the API documentation (linked above) but the JSON I return is just showing up in the iFrame instead of triggering my javascript. Please find my JS below and my endpoint for the challenge flow:

async function performPaymentFlow(type, cardDetails, personalDetails, orderID) {
    
    // Perform the check card on the information sent in
    var versionCheckData, authenticationData;
    try {
        // call the api to see whether the card is valid
        versionCheckData = await checkVersion('/api/Payments/CheckCard', { cardNumber: cardDetails.cardNumber });
        if (versionCheckData.IsError) {
            // show user error
        }

    }
    catch (e) {
        // show user error
    }

    // perform authentication
    // WITHIN THIS CALL THIS IS WHERE THE CHALLENGE IS SHOWN TO THE USER
    try {
        authenticationData = await initiateAuthentication('/api/Payments/Authenticate', {
            serverTransactionId: versionCheckData.serverTransactionId,
            methodUrlComplete: true,
            card: {
                expiryMonth: cardDetails.expiryMonth,
                expiryYear: cardDetails.expiryYear,
                securityCode: cardDetails.cv2,
                cardHolderName: cardDetails.cardName,
                cardNumber: cardDetails.cardNumber
            },
            challengeWindow: {
                displayMode: 'lightbox',
            },
            screenOptions: {
                colorDepth: screen.colorDepth,
                language: navigator.language,
                timezone: new Date().getTimezoneOffset()
            },
            personalDetails: personalDetails,
            type: type,
            orderID: orderID
        });

        if (authenticationData.IsError) {
            // show user error
        }
        else {
            // frictionless authentication success and authorization success
            if (authenticationData.result == "AUTHORIZATION_SUCCESS") {
                // complete
            }
            // challenge success
            else if (authenticationData.challenge.response.data.transStatus == "Y") {
            
                var serverTransactionId = authenticationData.challenge.response.data.threeDSServerTransID;

                var model = {
                    serverTransactionId: serverTransactionId,
                    card: cardDetails,
                    type: type
                };
                $.ajax({
                    type: "POST",
                    url: "/api/Booking/Authorize",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: JSON.stringify({ "model": model })
                }).done(function (authorizationResponse) {
                    if (authorizationResponse.IsError) {
                        // Show user errlr
                    }
                    else {
                       // complete
                    }
                });
            }

            // challenge failure
            else {
                // show user error
            }
        }
    }
    catch (e) {
        // show user error
    }
};

Here is my server-side implementation of the Challenge URL

public void Challenge()
        {
            // Get the data from the form
            var cres = HttpContext.Current.Request.Form["cres"];
            try
            {
                #region Instantiate the service
                ServicesContainer.ConfigureService(new GpEcomConfig
                {
                    MerchantId = Constants.realexuser,
                    AccountId = "internet",
                    SharedSecret = Constants.realexsecret,
                    MethodNotificationUrl = Constants.DomainName + "/api/Payments/MethodSetup",
                    ChallengeNotificationUrl = Constants.DomainName + "/api/Payments/Challenge",
                    MerchantContactUrl = Constants.DomainName + "/visit/find-us-and-faqs",
                    Secure3dVersion = Secure3dVersion.Two
                });
                #endregion

                #region data population and parsing
                byte[] data = Convert.FromBase64String(cres.Replace('-', '+').Replace('_', '/').PadRight(4 * ((cres.Length + 3) / 4), '='));

                string challengeUrlResponseString = Encoding.UTF8.GetString(data);

                dynamic challengeUrlResponse = JsonConvert.DeserializeObject(challengeUrlResponseString);

                var threeDSServerTransID = challengeUrlResponse.threeDSServerTransID; // af65c369-59b9-4f8d-b2f6-7d7d5f5c69d5
                var acsTransId = challengeUrlResponse.acsTransID; // 13c701a3-5a88-4c45-89e9-ef65e50a8bf9
                var messageType = challengeUrlResponse.messageType; // Cres
                var messageVersion = challengeUrlResponse.messageVersion; // 2.1.0
                var transStatus = challengeUrlResponse.transStatus; // Y
                #endregion

                // Package up the data and send it back to the user
                challengeUrlResponseString = JsonConvert.SerializeObject(new
                {
                    threeDSServerTransID = threeDSServerTransID,
                    transStatus = transStatus
                });
                SendResponse(challengeUrlResponseString);
                return;
            }
            // Uh oh - another error from the API
            catch (Exception exce)
            {
                // Return error to user
            }
        }

The JSON that is returned from this is showing in the iframe, rather than coming back to my JS so I can continue in the flow, any help would be appreciated.

Answer 1

The client-side needs to be notified that the that Challenge step is complete. For this, the Challenge Notification endpoint should respond with:

<script src="globalpayments-3dsecure.js"></script>
<script>
    GlobalPayments.ThreeDSecure.handleChallengeNotification('"threeDSServerTransID":"threeDSServerTransID","transStatus":"transStatus"');
</script>

Please make sure that the 3DS JS Library is included.

Answer 2

The documentation is not clear. Essentially what you have to do is literally write a script response to the browser which is fed to the iframe.

[HttpPost]
[AllowAnonymous]
public IHttpActionResult ChallengeNotification(JObject payload)
{
  try
  {

    // All your parsing

    challengeUrlResponseString = JsonConvert.SerializeObject(new
    {
      threeDSServerTransID = threeDSServerTransID,
      transStatus = transStatus
    });
    
    
    return Ok($"<script src=\"actual-path-to/globalpayments-3ds.min.js\"></script><script>GlobalPayments.ThreeDSecure.handleMethodNotification({challengeUrlResponseString});</script>");
  }
  catch (Exception e)
  {
    ...
  }
}