MW Web SDK - Digital Wallets

by Merchant Warrior

HTML

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

<div class="mx-auto max-w-3xl p-6">
  <h1 class="text-2xl font-semibold">Digital Wallets WEB SDK</h1>

  <div class="mt-6 space-y-2">
    <label for="token" class="block text-sm font-medium text-gray-700"
      >Access Token</label
    >
    <input
      type="text"
      id="token"
      value=""
      placeholder="Paste access token here"
      class="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200"
    />

    <button
      id="loadButton"
      class="inline-flex items-center justify-center rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-gray-800 active:bg-gray-950"
    >
      Load SDK
    </button>
  </div>

  <div class="mt-6">
    <div id="wallet-buttons" class="w-full"></div>
  </div>

  <pre
    id="log"
    class="mt-6 overflow-auto rounded-lg border bg-white p-3 text-xs text-gray-700"
  ></pre>
</div>

JavaScript

const logEl = document.getElementById('log');
function log(...args) {
  console.log(...args);
  logEl.textContent +=
    args
      .map((a) => (typeof a === 'string' ? a : JSON.stringify(a, null, 2)))
      .join(' ') + '\n';
}

const summary = {
  total: { amount: '100.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,
  // curring: 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',
    iframe: true
  },
  applePay: {
    buttonHeight: '45px',
    buttonWidth: '100%',
    marginTop: '10px',
    marginBottom: '10px',
    iframe: true
  },
  wallets: ['googlepay', 'applepay'],
};

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

try {
  const version = MerchantWarrior.getVersion();
  log('MerchantWarrior SDK version:', version);
} catch (e) {
  log('Could not read SDK version:', e?.message || e);
}

document.getElementById('loadButton').addEventListener('click', async () => {
  const token = document.getElementById('token').value.trim();
  if (!token) {
    Swal.fire(
      'Missing token',
      'Please paste an access token first.',
      'warning',
    );
    return;
  }

  try {
    log('Creating SDK instance with token...');
    const mwarrior = await MerchantWarrior.createWithToken(token, options);
    log('Created:', { version: mwarrior.version });

    log('Building payment request UI...');
...