Payframe with accessToken and 3DS - 2

by Merchant Warrior

HTML

<html>

  <head>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  </head>

  <body>
    <div id="cardData"></div>
    <button class="button" id="submitButton" onclick='submitFrame()'>Submit</button>
    <!-- By default payframe.js will always remain up to date with the latest version of the payframe. If you are after a specific version please set this to payframe-1.1.js and so on. -->
    <script src='https://securetest.merchantwarrior.com/payframe/payframe.js'></script>

  </body>

</html>

CSS

body {
  background: #EBF0F6;
}

.button {
  font-family: 'Open Sans', sans-serif;
  visibility: hidden;
  display: inline-block;
  font-size: 16px;
  min-width: 150px;
  background: #0074FF;
  color: #fefefe;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  position: relative;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  transition: border-radius linear 0.05s, width linear 0.05s;
}

.button:focus {
  outline: 0;
}

.button:active {
  background: #005BE6;
}

JavaScript

var method = 'getPayframeToken'; // change this to getPayframeToken for payment payframe
var threeDS = true; // this will only work with the getPayframeToken method
var style = {
  fontFamily: 'Open Sans, sans-serif',
  fontSrc: ['https://fonts.googleapis.com/css?family=Open+Sans'],
};
var accessToken = "xxxxxx";
var submitURL = 'https://base.merchantwarrior.com/payframe/';


payframeObject = {
accessToken: accessToken,
payframeDivId: 'cardData',
src: 'https://securetest.merchantwarrior.com/payframe/',
submitUrl: submitURL,
style: style,
method: method,
};
var mwPayframe = new payframe(payframeObject);


mwPayframe.mwCallback = function() {
  //Example of success and error scenarios below
  if (threeDS) {
    processResponseEvent(method, arguments, tdsCheck);
  } else {
    processResponseEvent(method, arguments);
  }
};

function submitFrame() {
  // Disable the button to stop double submissions
  button.setAttribute('disabled', 'disabled');
  button.innerHTML = "Please wait.."
  button.style.opacity = '0.5';
  button.filter = 'alpha(opacity=50)'; // IE8 fallback

  mwPayframe.submitPayframe(this)

}

function resetFrame(error_only) {
  if (threeDS && !error_only) {
    tdsCheck.destroy();
    mwPayframe.deploy();
  } else if (!error_only) {
    mwPayframe.reset();
  }

  // Enable the button
  button.removeAttribute('disabled');
  button.innerHTML = 'Submit';
  button.style.opacity = '1';

}

mwPayframe.loading = function() {
  var mwIframe = document.getElementById("mwIframe");
  var cardDiv = document.getElementById("cardData");

  // Hide the payframe during load operations
  mwIframe.style.visibility = 'hidden';

  // Assign the parent div the same dimensions as the payframe
  var height = mwIframe.height;
  var width = mwIframe.width;

  cardDiv.style.height = height;
  cardDiv.style.width = width;

  // Place a loading animation in the center of the payframe
  cardDiv.style.background =...