Tokenized 3DS Payment via WebSDK

by Merchant Warrior

HTML

<html>
<head>
</head>
<body style='background-color:lightblue;'>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  <script src="https://securetest.merchantwarrior.com/sdk/merchantwarrior.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://securetest.merchantwarrior.com/sdk/merchantwarrior.css" class="mw-style">

  <h1>PAYMENT</h1>
  <button class="button" onclick='payWithCardID()'>Pay with CardID</button> <br><br>
  <h1>TDS Container</h1>
    <div id="threeds-container" style="width: 390px; height: 400px;"></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;
}

JavaScript

const accessToken = 'YOUR_ACCESS_TOKEN'; //Expired Every 10 Minutes
const cardInfo = {cardID: "YOUR_CARD_ID"}
const paymentInfo = {
    transactionInfo:{
        transactionProduct: "TEST 3DSv2",
        transactionAmount: "1.00",
        transactionCurrency: "AUD",
        cardInfo: cardInfo,
    },
    customerName: 'Jim Bob',
    billingAddress: {
        billAddrLine1 : "345 Ann Street",
        billAddrCity: "Brisbane",
        billAddrState :"QLD",
        billAddrPostCode : "4000",
        billAddrCountry : "AU",
    },
    threeDS:{
        notifyURL: false,
    }
}
const options = {environment: 'development'}
function payWithCardID(){
		loading();
    MerchantWarrior.createWithToken(accessToken, options).then((mwarrior) => {
        tdsManager = mwarrior.createTDSManager(paymentInfo);
        tdsManager.loading = loading;
        tdsManager.loaded = loaded;
        tdsManager.checkTDS();
        tdsManager.mwCallback = function(){merchantRetrieveFinalResult(arguments)};
    });
}
//custom your loading function 
loading = function() {
  var tdsContrainer = document.getElementById("threeds-container");
  tdsContrainer.style.background = "url('https://securetest.merchantwarrior.com/inc/image/loading_gif.gif') center center no-repeat";
};
//custom your loaded function 
 loaded = function() {
	var tdsContrainer = document.getElementById("threeds-container");
  tdsContrainer.style.background = 'none';
}
//Merchant shoudl retrieve the threeDSToken for following payment
function merchantRetrieveFinalResult(arguments){
  threeDSToken = arguments[0].threeDSToken;
  Swal.fire({
    title: 'Success',
    html:  'threeDSToken returned is <strong>' + threeDSToken + '</strong><br/> Liability shifted is <strong>' + 'Y' + '</strong>',
    type: 'success',
    footer: '<span>You should submit the cardID and threeDSToken to your server and use the <a href="https://dox.merchantwarrior.com/#processcard31">processCard</a> method to complete the transaction from your...