Auth with Google and Apple Pay

Here is an example on how to launch the iframe to make an Authorization with Google or Apple pay
Payment Methods Configuration

The payment_methods field defines the supported payment options for the iframe.
Supported Values

Value	Description
credit_card	Enables standard card payments.
google_pay	Enables payments via Google Pay.
apple_pay	Enables payments via apple Pay.
Example:
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Digicel Sandbox Demo</title>
  <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");
    body {
      font-family: "Poppins", sans-serif;
      font-weight: 300;
    }

    .card-header {
      padding: .5rem 1rem;
      margin-bottom: 0;
      background-color: rgba(0, 0, 0, .03);
      border-bottom: none;
    }

    .btn-light:focus {
      color: #212529;
      background-color: #e2e6ea;
      border-color: #dae0e5;
      box-shadow: 0 0 0 0.2rem rgba(216, 217, 219, .5);
    }

    .input i {
      position: absolute;
      top: 16px;
      left: 11px;
      color: #989898;
    }

    .free-button {
      background: #1565c0;
      height: 52px;
      font-size: 15px;
      border-radius: 8px;
    }

    #response {
      word-break: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
    }
  </style>
</head>

<body>
<div id="containerIframe" class="d-flex justify-content-center align-items-center p-4">
  <!-- You can specify the width here -->
  <div style="width: 468px;">
    <span>Payment Method</span>
    <div class="card">
      <div class="accordion" id="accordionExample">
        <div class="card">
          <div class="card-header p-0">
            <h2 class="mb-0">
              <button style="width: 100%" class="btn btn-light btn-block text-left p-3 rounded-0"
                      data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <div class="d-flex align-items-center justify-content-between">
                  <span>Authorize With Google Pay</span>
                </div>
              </button>
            </h2>
          </div>
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
            <form>
              <div id="iframeContent"></div>
              <p style="text-align:center" id="response"></p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>

  const locationId = 'location_id'; //4003821 279685
  let accessToken = "";
  let sessionID = '';

  /*
      fetchAccessToken function is for demo purposes only.
      Credentials data must not be exposed in the front end.
  */
  async function fetchAccessToken() {
    const url = 'baseurl' + locationId + '/access_token';
    const params = {
      api_key: 'apikey',
      client: 'client'
    };


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

    const res = fetch(url, requestOptions)
            .then(response => response.json())
            .then(data => {
              const accessToken = data.accessToken;
              return accessToken;
            })
            .catch(error => console.error('Error:', error));

    return res;
  }

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

    const scriptElement = document.createElement("script");
    scriptElement.src = `https://iframe-gtw.tabpoint.us/api/softpoint-pay?location_id=`+locationId+`&session_key=${accessToken}`; // DEV  ----> This works Mahipath please check this  to test
    // scriptElement.src = `http://localhost:3000/api/softpoint-pay?location_id=`+locationId+`&session_key=${accessToken}`; // DEV  ----> This works Mahipath please check this  to test

    document.head.appendChild(scriptElement);

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

    // Generate UUID
    const generatedUUID = generateUUID();

    // Construct the URL
    const orgID = 'rpzdrvix';
    merchantID = 'mid';
    sessionID = generatedUUID;
    url = `https://h.online-metrix.net/fp/tags.js?org_id=${orgID}&session_id=${merchantID}${sessionID}`;

    const scriptTag = document.createElement('script');
    scriptTag.src = url;
    scriptTag.type = 'text/javascript';
    document.head.appendChild(scriptTag);

    scriptElement.onload = function () {

      let amount = 2.29;
      const conf = {
        "location_id": locationId,
        "access_token": accessToken,
        "orderid": "512d1428-7bc5-c0ba-9ce4-95baf1675fdd",
        "country_iso": "US",
        "currency_iso": "USD",
        "process_type": "authorize",
        "amount": amount,
        "payment_methods": ["google_pay", "apple_pay"],
        "session_id": sessionID,
        "user_id": "5000",
        "phone_number": "1869762446",
        "msisdn": "18697624464",
        "default_cardholder_name": "Test user",
        "default_email": "[email protected]",
        "default_street": "Pine Dr",
        "default_street_2": "cal"
      }

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

  loadAndProcessOrderWithAccessToken();

  const form = document.querySelector('form');
  form.addEventListener('submit', (event) => {
    event.preventDefault();
    //Prepare settings
    let amount = 1;
    const paymentDetails = {
      "session_id": sessionID,
      "location_id": locationId,
      "access_token": accessToken,
      "process_type": "authorize",
      "amount": amount,
      "user_id": "5000",
      "country_iso": "US",
      "phone_number": "1869762446",
      "msisdn": "18697624464",
      "email": "[email protected]",
      "order": {
        "items": [
          {
            "id": "1000",
            "name": "ProductSKU",
            "type": "MobileRecharge",
            "productSKU": "productSKU",
            "productProvider": "DC",
            "quantity": 1,
            "price": 200.50,
            "tax_type": "Inclusive",
            "tax": 1.00,
            "phone_number": "1869762446",
          }
        ]
      }
    }
    submitPayment(paymentDetails);
  });

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

  function onDeclinedCallback(e) {
    console.log('onDeclinedCallback called', e);
    if (e == 'input_error') {
      var btn = document.getElementById('btnSubmit');
      btn.disabled = false;
    } else {
      const response = document.querySelector('#response');
      response.innerHTML = JSON.stringify(e);
      var btn = document.getElementById('btnSubmit');
      response.style.color = 'red';
      btn.disabled = false;
      btn.innerText = 'Custom Submit';
    }

  }

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


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

</script>
</body>

</html>