Frontend JS

Managing the frontend 3DS loops can be done in several ways however, to keep things simple, we've added all of the necessary functions to the Javascript file you created in the previous steps

Step 1: Add a 'result' object directly to the Javascript file which contains instructions for what to show on the checkout page, if required, add the CRSF token to the checkout page (used to submit the ACS iframe)

<!-- PHP/Laravel -->
<script src="/js/checkout.js" result="{{ isset($result) ? json_encode($result) : '' }}" csrf="{{ csrf_token() }}"></script>

Step 2: Add a function which creates the 3DS iframe if required by the result object with the necessary information

function submit3DSForm() {
  var threeDSContainer = document.createElement('div');
  threeDSContainer.setAttribute("id", "threeDSContainer");
  threeDSContainer.classList.add('flexcenter');
  document.body.appendChild(threeDSContainer);

  var threeDSIframe = document.createElement("iframe");
  threeDSIframe.setAttribute("id", "threeDSIframe");
  threeDSIframe.setAttribute("height", "1");
  threeDSIframe.setAttribute("width", "1");
  threeDSIframe.setAttribute("sandbox", "allow-scripts allow-forms allow-top-navigation allow-same-origin allow-popups allow-modals allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation");
  threeDSIframe.setAttribute("name", "threeds_iframe");
  threeDSContainer.appendChild(threeDSIframe);

  var threeDSForm = document.createElement("form");
  threeDSForm.setAttribute("method", "post");
  threeDSForm.setAttribute("target", "threeds_iframe");
  threeDSForm.setAttribute("action", result.threeDSUrl);
  threeDSForm.classList.add('hidden');
  threeDSContainer.appendChild(threeDSForm);

  if(!result.display) {
    threeDSIframe.classList.add('hidden');
  } else {
    var threeDSBackground = document.createElement('div');
    threeDSBackground.setAttribute("id", "iframeBackground");
    threeDSContainer.appendChild(threeDSBackground);
    threeDSForm.setAttribute("target", "_parent");

    threeDSIframe.classList.remove('hidden');
  }

  let response = JSON.parse(result.threeDSMethodData);
  Object.keys(response).forEach(key => {
    var input = document.createElement("input");
    input.setAttribute("type", "text");
    input.setAttribute("name", key);
    input.value = response[key];

    threeDSForm.appendChild(input);
  });

  var input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("name", "_token");
  input.value = csrf;
  threeDSForm.appendChild(input);

  var button = document.createElement("button");
  button.setAttribute("type", "submit");
  threeDSForm.appendChild(button);

  button.click();
}

Step 3: Add a function to create the ACS iframe with the relevant data if result object states ACS

function submitAcsForm() {
  var acsContainer = document.createElement('div');
  document.body.appendChild(acsContainer);

  var acsIframe = document.createElement("iframe");
  acsIframe.setAttribute("name", "acs_iframe");
  acsIframe.setAttribute("height", "1");
  acsIframe.setAttribute("width", "1");
  acsIframe.setAttribute("sandbox", "allow-scripts allow-forms allow-top-navigation");
  acsContainer.appendChild(acsIframe);

  var acsForm = document.createElement("form");
  acsForm.setAttribute("method", "post");
  acsForm.setAttribute("target", "_parent");
  acsForm.setAttribute("action", result.url);
  acsForm.classList.add('hidden');
  acsContainer.appendChild(acsForm);

  var input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("name", "threeDSResponse");
  input.value = JSON.stringify(result.post);
  acsForm.appendChild(input);

  var input = document.createElement("input");
  input.setAttribute("type", "text");
  input.setAttribute("name", "_token");
  input.value = csrf;
  acsForm.appendChild(input);

  var button = document.createElement("button");
  button.setAttribute("type", "submit");
  acsForm.appendChild(button);

  button.click();
}

Step 4: Add the following code to the top of your checkout.js file, CHANGE the on document load method to the one below:

//Add these to the top of the checkout.js file
var script = document.currentScript;
var result;
var csrf;

//Change the on DOMContentLoaded function to this
document.addEventListener('DOMContentLoaded', function() {
    result = script.getAttribute('result');
    csrf = script.getAttribute('csrf');

    if(result) {
      result = JSON.parse(result);

      if(result) {
        switch(result.status) {
          case '3ds':
            submit3DSForm();
            break;
          case 'acs':
            submitAcsForm();
            break;
        }
      }
    } else {
      setupCardForm();
    }
});