COF (CIT - 2)

5 - Cardholder provides their card details when agreeing to purchase by instalments on the Merchant's website. 6 - Cardholder provides their card details to sign up to a subscription via mail or telephone to the Merchant 7 - Cardholder provides their card details when agreeing to purchase by instalments via mail or telephone to the Merchant. 8 - Merchant makes an unscheduled transaction, such as an account top-up, as previously agreed with the Cardholder when they stored their card details.

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 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;
        }

        .info {
            color: #25365d;
            font-size: 16px;
        }

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