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;"
...