PREAUTH_LightboxModal

by Handpoint

HTML

<html>

  <head>
    <!-- Load the jQuery library -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

    <!-- Load the Hosted Payment Page library -->
    <script src="https://commerce-api.handpoint.com/sdk/web/v1/js/hostedforms.min.js"></script>
    <style>
      input[type=submit] {
        background-color: #e97d29;
        border: none;
        color: white;
        width: 200px;
        padding: 5px;
        text-decoration: none;
        margin: 2px 2px;
        cursor: pointer;
      }

      body {
        font-family: 'Helvetica', 'Arial', sans-serif;
        color: #0074cc;
        font-size: 10pt;
        background-color: #e9ecef;
      }

      .card {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        width: 300px;
        padding: 16px;
        margin: 10px;
        text-align: center;
        font-family: arial;
        background-color: #ffffff;

      }

      .price {
        color: #25365d;
        font-size: 22px;
      }

      .card button {
        border: none;
        outline: 0;
        padding: 12px;
        color: white;
        background-color: #e97d29;
        text-align: center;
        cursor: pointer;
        width: 100%;
        font-size: 18px;
      }

      .card button:hover {
        opacity: 0.7;
      }

      .tab1cards {
        display: flex;
        flex-direction: row;
      }

    </style>
  </head>

  <body>

    <p class="aligncenter">
      <img style="width:250px" src="https://handpoint.com/wp-content/uploads/2022/05/Logo.svg" alt="Logo">
    </p>
    <p style="color:#25365d">Welcome to the Handpoint eShop</p>
    <br />

    <div class="tab1cards">
      <div class="card">
        <img style="height:170px" src="https://handpoint.imgix.net/Website%20refresh%20photos/product-images/SmartPOS_clean.png" style="width:100%">
        <h1>PAX A920</h1>


        <!--Example of PREAUTH -->
       ...