JSFiddle - React, Tailwind, and code Playground

by Merchant Warrior

HTML

<html>

  <head>
  </head>

  <body style='background-color:lightblue;'>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>

    <h1>PAYMENT</h1>
    <div id="card-details">
      <p>The purpose of this sample is to test demonstrate the 3DSv2 workflow</p>
      <p>We recommend using the default card details to force a challenge flow.</p>

      <div class="card-detail">Card Name:</div> <input id="card-name" type="text" value="John Doe" /> <br />
      <div class="card-detail">Card Number:</div> <input id="card-number" type="text" value="5167473595100592" /> <br />
      <div class="card-detail">Card Expiry Month:</div> <input id="card-expiry-month" type="text" value="01" /> <br />
      <div class="card-detail">Card Expiry Year:</div> <input id="card-expiry-year" type="text" value="39" /> <br />
      <div class="card-detail">Card CSC:</div> <input id="card-csc" type="text" value="123" /> <br /><br />

      <button class="button" onclick='payWith3DS2()'>Pay</button> <br><br>
    </div>

    <div id="threeds-container"></div>
  </body>

</html>

CSS

body {
  background: #EBF0F6;
}

.button {
  font-family: 'Open Sans', sans-serif;
  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;
}

.tdsv2challengeIframe {
  width: 600px;
  height: 400px;
  outline: none;
  border: none;
}

.hidden_TDS_From {
  display: none;
  width: 0;
  height: 0;
  border: 0;
  border: none;
}

.card-detail {
  width: 150px;
  float: left;
}

JavaScript

const accessToken = "xxxxxxxx"; //FILL THIS IN MANUALLY AND CLICK RUN TO BEGIN, expires in 10 minutes

// YOU SHOULD NOT NEED TO MODIFY ANYTHING BELOW TO GET THE EXAMPLE TO WORK

const mwDomain = "https://base.merchantwarrior.com";

const notifyURL = mwDomain + "/threeds/notify";

//MW NOTIFY URL -urlHash is optional; merchant Notify URL -urlHash is required to be matched
const tdsEndPoint = mwDomain + "/threeds/";


function payWith3DS2() { 
	document.getElementById("card-details").style = "display: none;"
  loadingSpinnerAnimation("on");

  cardInfo = {
  	paymentCardNumber: document.getElementById("card-number").value,
  	paymentCardExpiry: document.getElementById("card-expiry-month").value + document.getElementById("card-expiry-year").value,
  	paymentCardCSC: document.getElementById("card-csc").value,
  	paymentCardName: document.getElementById("card-name").value,
  };
  
  checkEnrollment();
}

let tdsPayKey = null;
let tdsPayToken = null;

var cardInfo = {
  paymentCardNumber: "",
  paymentCardExpiry: "",
  paymentCardCSC: "",
  paymentCardName: "",
}

const paymentInfo = {
  transactionInfo: {
    transactionProduct: "TEST 3DSv2",
    transactionAmount: "1.00",
    transactionCurrency: "AUD",
    carInfo: cardInfo,
  },
  customerName: 'Jim Bob',
  billingAddress: {
    billAddrLine1: "345 Ann Street",
    billAddrCity: "Brisbane",
    billAddrState: "QLD",
    billAddrPostCode: "4000",
    billAddrCountry: "AU",
  }
}

function checkEnrollment() {
  $.ajax({
    type: 'POST',
    url: tdsEndPoint,
    data: {
      'accessToken': accessToken,
      'method': 'checkEnrollment',
      'paymentCardNumber': cardInfo.paymentCardNumber,
      'paymentCardExpiry': cardInfo.paymentCardExpiry,
      'paymentCardName': cardInfo.paymentCardName,
      'paymentCardCSC': cardInfo.paymentCardCSC,
      'customerName': paymentInfo.customerName,
      'transactionAmount': paymentInfo.transactionInfo.transactionAmount,
      'transactionCurrency':...