paymentMethods.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <title>Payment methods</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <style>
      body {
        color: #737373;
        font-family: gordita, Arial, sans-serif;
        margin: 0;
        padding: 10px; /* Adjust padding for mobile */
        background-color: rgb(241, 241, 241);
      }

      .payment-container {
        border-radius: 5px;
        padding: 20px;
        background-color: white;
        margin-top: 25px;
      }

      .payment-options {
        list-style: none;
        border-radius: 4px;
        padding: 0; /* Remove padding for mobile */
        margin: 0;
      }

      .payment-option {
        display: flex;
        align-items: center; /* Align items vertically */
        padding: 10px;
        border-bottom: 1px solid rgb(227, 227, 227);
      }

      .payment-option input[type="radio"] {
        margin-right: 10px;
      }
      .payment-option:last-child {
        border-bottom: none; /* Remove bottom border for last payment option */
      }

      .payment-button {
        background-color: rgb(236, 0, 0);
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        border-radius: 900px;
        width: 100%;
        margin-top: 20px;
        font-size: 16px;
      }

      .cc-icon {
        width: 40px;
        height: 25px;
        margin-right: 10px;
      }

      .payment-option label {
        margin: 0;
        line-height: 30px;
        flex: 1;
      }

      .heading {
        font-weight: normal;
        color: #232323;
        margin-top: 0;
      }

      input[type="text"] {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid rgb(227, 227, 227);
        border-radius: 3px;
        box-sizing: border-box;
      }

      label {
        margin-bottom: 5px;
        display: block;
      }
      hr {
        margin-top: 25px;
        border-top: 1px solid rgb(227, 227, 227);
      }
    </style>
  </head>
  <body>
    <div class="payment-container">
      <label for="custId">Customer ID</label>
      <input type="text" id="custId" placeholder="OE123"/>
      <label for="amount">Amount</label>
      <input type="text" id="amount" />
    </div>
    <div>
      <div class="payment-container">
        <h2 class="heading">Payment Methods</h2>
        <ul class="payment-options">
          <li class="payment-option">
            <!--            <img class="cc-icon" src="ma_symbol.svg" alt="master card" />-->
            <img class="cc-icon" src="https://assets.braintreegateway.com/payment_method_logo/visa.png?environment=sandbox" alt="visa card" />
            <label for="credit-card">411111******1111</label>
            <input
              type="radio"
              id="credit-card"
              name="payment-method"
              value="cj12zb8w"
            />
          </li>

          <li class="payment-option" id="gpay">
            <img class="cc-icon" src="google-pay-mark.svg" alt="Google Pay" />
            <label for="google-pay-radio">Google Pay</label>
            <input
              type="radio"
              id="google-pay-radio"
              name="payment-method"
              value="google-pay"
            />
          </li>
          <li class="payment-option" id="applepay">
            <img class="cc-icon" src="https://assets.braintreegateway.com/payment_method_logo/apple_pay.png?environment=sandbox" alt="Apple Pay" />
            <label for="apple-pay-radio">520424******1471</label>
            <input
              type="radio"
              id="apple-pay-radio"
              name="payment-method"
              value="mhe1acmh"
            />
          </li>
        </ul>
      </div>
      <hr />
      <!-- Horizontal line -->
      <div class="pay-now-container">
        <button type="button" class="payment-button" id="pay-now">
          Pay Now
        </button>
      </div>
    </div>

    <script>
      function request(data, callback) {
        const xhr = new XMLHttpRequest();
        xhr.open(data.method, data.url, true);

        if (data.method === "POST") {
          xhr.setRequestHeader("Content-Type", "application/json");
        }

        xhr.onload = function () {
          if (xhr.status >= 200 && xhr.status < 300) {
            callback(xhr);
          } else {
            callback("Error: " + xhr.status);
          }
        };

          xhr.onreadystatechange = function () {
              if (xhr.readyState === XMLHttpRequest.DONE) {
                  if (xhr.status >= 300 && xhr.status < 400 && xhr.getResponseHeader('Location')) {
                      console.log("Location: ", xhr.getResponseHeader('Location'))
                      window.location.href = xhr.getResponseHeader('Location');
                  }
              }
          };

          xhr.send(data.body ? JSON.stringify(data.body) : null);
      }
    </script>

    <script>
      function isIOSWebView() {
        return /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(
          navigator.userAgent
        );
      }

      function isAndroidWebView() {
        return /Android.*(?:Version\/(\d+)\.\d+)?\s+Chrome\/[.0-9]*\s+Mobile/i.test(
          navigator.userAgent
        );
      }

      // Function to show/hide buttons based on WebView type
      function toggleMobilePayments() {
        const gpay = document.getElementById("gpay");
        const applepay = document.getElementById("applepay");

        if (isIOSWebView()) {
          gpay.style.display = "none";
          applepay.style.display = "flex";
        } else if (isAndroidWebView()) {
          gpay.style.display = "flex";
          applepay.style.display = "none";
          gpay.addEventListener("click", () => {});
        } else {
          gpay.style.display = "flex";
          applepay.style.display = "flex";
        }

        document.getElementById("pay-now").addEventListener("click", () => {
          request(
            {
              method: "POST",
              url: "https://civil-rational-urchin.ngrok-free.app/checkouts",
              body: {
                amount: document.getElementById("amount").value,
                paymentMethodToken:
                  document.getElementById("apple-pay-radio").value,
              },
            },
            function (xhr) {
                console.log("pay now listener")
                console.log("xhr.responseURL: ", xhr.responseURL)
                window.location.href = xhr.responseURL;
            }
          );
        });
      }
      window.onload = toggleMobilePayments;
    </script>
  </body>
</html>