Hosted Integration iFrame embedded

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: 14pt;
            background-color: #e9ecef;
        }

        .card {
            box-shadow:  0.5px 0.5px 0.5px black;
            width: auto;
            height: 350px;
            margin-right: 20px;
            text-align: center;
            font-family: arial;
            background-color: #ffffff;

        }

        .cardIframe {
            box-shadow: 0px 0px 0px black;
            text-align: center;
            font-family: arial;
            background-color: transparent;

        }

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


        .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 style="width:200px;" class="card">
            <h1 style="margin-top: 20px;">PAX A920</h1>
            <img style="height:170px;margin-top: 10px;"
               ...