addCard in Web SDK

by Merchant Warrior

HTML

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  </head>
  <body>
    <div>
      <input type="text" id="access-token-value" placeholder="Enter the accessToken">
      <img src="https://securetest.merchantwarrior.com/inc/image/loading_gif.gif" id="loading-image" style = "display:none">
    </div>
    <button class="button" id="submit-button" onclick='submitDirectRequest()'>Submit</button>
    <div id="response-container"></div>
    <script src="https://securetest.merchantwarrior.com/sdk/merchantwarrior.min.js"></script>
  </body>
</html>

CSS

.container {
    text-align: center;
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }

  input[type="text"] {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #0056b3;
  }

  #response-container{
    display: block;
  }

JavaScript

var directRequest = {
    method: "addCard",
    cardName: "Tony Stark",
    cardNumber: "5123456789012346",
    cardExpiryMonth: "01",
    cardExpiryYear: "39",
    verifyCard: "1",
    paymentCardCSC: "123",
    paymentFingerprint: "1",
    loading: function () {
      document.getElementById('access-token-value').style.display = 'none';
    	document.getElementById('loading-image').style.display = 'block';
    },
    loaded: function() {
      document.getElementById('access-token-value').style.display = 'block';
    	document.getElementById('loading-image').style.display = 'none';
    }
};

const options = { environment: 'development' };

function submitDirectRequest() {
	if (document.getElementById("access-token-value").value)
		accessToken = document.getElementById("access-token-value").value;
    
	MerchantWarrior.createWithToken(accessToken, options).then((mwarrior) => {
		mwarrior.directRequest(directRequest);
      
		mwarrior.on('card-added', (status, response, third) => {
			document.getElementById("response-container").innerHTML = JSON.stringify(response, undefined, 4);
		});
	});
}