Web SDK with Payframe and Iframes

by Merchant Warrior

HTML

<html>

  <head>
    <script src="https://securetest.merchantwarrior.com/sdk/merchantwarrior.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
  </head>

  <body style='background-color:#f5f5f5;'>
    <h1>Payframe WEB SDK</h1>

    <label>Select Method</label><br>
    <select id="method">
      <option value="getPayframeToken">getPayframeToken</option>
      <option value="addCard">addCard</option>
    </select>
    <br>
    <br>
    <label>Access Token</label><br>
    <input type="text" id="token" value=""><br><br>

    <label>Load Current WEB SDK Wallets</label><br>
    <select id="loadWallets">
      <option value="disable">Disable</option>
      <option value="enable">Enable</option>
    </select><br><br>


    <button class="button" id="loadButton">Load SDK</button>


    <div id="cardData">
    </div><br><br>

    <div id="wallet-buttons" style="width: 600px"></div>

    <button class="button" id="submitButton">Submit</button>

  </body>

</html>

CSS

body {
  background-color: #f5f5f5;
}

JavaScript

const summary = {
  total: {
    amount: '1.00',
    label: 'MOBILE TEST',
  },
  customer: {
  	name: 'Sam Heck',
  	country: 'US',
  	state: 'QLD',
  	city: 'Brisbane',
  	address: '345 Ann Street',
  	postCode: '4000',
  	phone: '61412345678',
    email: 'sam.heck@gmail.com'
	},
  addCard: true,
  recurring: true,
  style: 'dark',
  transaction: {
  	transactionProduct: "Invoice",
    transactionReferenceID: crypto.randomUUID(),
    //storeID: "store123",
    custom1: "one",
    custom2: "two",
    custom3: "three",
    currency: "AUD",
  },
  googlePay: {
    allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
    buttonHeight: '45px',
    buttonWidth: '100%',
    marginTop: '10px',
    marginBottom: '10px',
  },
  applePay: {
    buttonHeight: '45px',
    buttonWidth: '100%',
    marginTop: '10px',
    marginBottom: '10px',
  },
  wallets: [
    'googlepay',
    'applepay',
    'basic-card',
  ],
  payframe: {
    threeDS: true,
    submitUrl: 'https://base.merchantwarrior.com/payframe/',
    styles: {
      fontFamily: 'Open Sans, sans-serif',
      fontSrc: ['https://fonts.googleapis.com/css?family=Open+Sans'],
    },
    tdsStyles: {
      width: "500px",
      height: "500px",
    }
  }
}

const options = {
  environment: 'development',
  autoProcess: true,
}

const version = MerchantWarrior.getVersion();
var button = document.getElementById("submitButton");

document.getElementById("loadButton").addEventListener("click", function(event) {
  const token = document.getElementById("token").value;
  const method = document.getElementById("method").value;
  const walletEnabled = document.getElementById("loadWallets").value;
  document.getElementById("cardData").innerHTML = "";

  MerchantWarrior.createWithToken(token, options).then((mwarrior) => {
    console.log('Created', mwarrior.version);
    mwarrior.loadPayframe(method, 'cardData', summary)
      .then((mwPayframe) => {
        payframeFunctionality(mwPayframe);
      });

    if (walletEnabled ==...