Tokenize Google Pay

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Iframe Demo</title>

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
  <div id="containerIframe" class="d-flex justify-content-center align-items-center p-4">
    <div style="width: 468px;">
      <span>Payment Method</span>
      <div class="card">
        <div class="accordion" id="accordionExample">
          <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
              <button
                class="accordion-button"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseOne"
                aria-expanded="true"
                aria-controls="collapseOne"
              >
                Google Pay
              </button>
            </h2>
            <div
              id="collapseOne"
              class="accordion-collapse collapse show"
              aria-labelledby="headingOne"
              data-bs-parent="#accordionExample"
            >
              <div class="accordion-body">
                <form>
                  <div id="iframeContent"></div>
                  <div class="pt-3">
                    <button
                      id="btnSubmit"
                      type="submit"
                      class="btn btn-block w-100"
                      style="background-color: #dd051f; color: white;"
                      disabled
                    >
                      Pay
                    </button>
                  </div>
                  <p class="text-center mt-2" id="response"></p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <script>
    const locationId = '__LOCATION_ID__';
    const amount = 0.00;
    let accessToken = '';
    let sessionID = '';

    // Device fingerprint (ThreatMetrix) settings
    const orgID = 'rpzdrvix';
    const merchantID = '20022141';

    const BUTTON_LABEL = 'Pay';

    /*
      fetchAccessToken is for demo purposes only.
      Credentials must not be exposed in the front end.
    */
    async function fetchAccessToken() {
      const url = `https://sandbox-api-gtw.softpoint.io/api/locations/${locationId}/access_token`;
      const params = {
        api_key: '__API_KEY__',
        client: '__CLIENT__KEY__'
      };

      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(params)
        });

        const data = await response.json();
        return data.accessToken;
      } catch (error) {
        console.error('Error fetching access token:', error);
      }
    }

    function generateUUID() {
      let d = new Date().getTime();
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        const r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
    }

    function loadDeviceFingerprint() {
      sessionID = generateUUID();

      const tmScript = document.createElement('script');
      tmScript.type = 'text/javascript';
      tmScript.src = `https://h.online-metrix.net/fp/tags.js?org_id=${orgID}&session_id=${merchantID}${sessionID}`;
      document.head.appendChild(tmScript);
    }

    async function loadAndProcessOrderWithAccessToken() {
      accessToken = await fetchAccessToken();

      const script = document.createElement('script');
      script.src = `https://sandbox-iframe-gtw.softpoint.io/api/softpoint-pay?location_id=${locationId}&session_key=${encodeURIComponent(accessToken)}`;
      document.head.appendChild(script);

      loadDeviceFingerprint();

      script.onload = () => {
        const conf = {
          location_id: locationId,
          access_token: accessToken,
          process_type: 'tokenize',
          payment_methods: ['google_pay'],
          'include-cardholder': 0,
          'include-email': 0,
          'include-street': 0,
          'include-street2': 0,
          'include-city': 0,
          'include-state': 0,
          'include-country': 0,
          'include-zip': 0,
          'store-card': 1,
          'validate-address': 0,
          country_iso: 'US',
          currency_iso: 'USD',
          default_customer_state: 'California',
          default_cardholder_name: 'Test user',
          default_email: '[email protected]',
          default_street: 'Pine Dr',
          default_street_2: 'cal',
          amount: amount,
          surcharge_amount: 0.00,

          // REQUIRED FOR APPLE PAY
          client_url: '__CLIENT_URL__'
        };

        initPaymentForm('iframeContent', conf);
      };
    }

    loadAndProcessOrderWithAccessToken();

    document.querySelector('form').addEventListener('submit', (event) => {
      event.preventDefault();

      const paymentDetails = {
        session_id: sessionID,
        location_id: locationId,
        access_token: accessToken,
        process_type: 'tokenize',
        amount: amount,
        user_id: '5000'
      };

      submitPayment(paymentDetails);
    });

    function onApprovedCallback(e) {
      console.log('onApprovedCallback called', e);
      const response = document.querySelector('#response');
      response.innerHTML = JSON.stringify(e);
      response.style.color = 'green';
      const btn = document.getElementById('btnSubmit');
      btn.disabled = false;
      btn.innerText = BUTTON_LABEL;
    }

    function onDeclinedCallback(e) {
      console.log('onDeclinedCallback called', e);
      const response = document.querySelector('#response');
      const btn = document.getElementById('btnSubmit');

      if (e === 'input_error') {
        btn.disabled = false;
      } else {
        response.innerHTML = JSON.stringify(e);
        response.style.color = 'red';
        btn.disabled = false;
        btn.innerText = BUTTON_LABEL;
      }
    }

    function onErrorCallback(e) {
      console.error('onErrorCallback called', e);
    }

    function onDecline(e) {
      console.log('onDecline called', e);
    }

    // Called by the iframe once it's ready; enable the submit button here.
    function onIframeLoaded() {
      const btn = document.getElementById('btnSubmit');
      if (btn) btn.removeAttribute('disabled');
    }
  </script>
</body>
</html>

{
  "transaction_id": "--REDACTED",
  "card_data": {
    "token": "--REDACTED",
    "cardfullname": "john doe",
    "expiry_information": "12/26",
    "last4": "5454",
    "card_brand": "MasterCard"
  }
}