examples/hpp/process-a-payment-lightbox.html

<!DOCTYPE html>
<html>
<head>
    <title>HPP Lightbox Demo</title>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./../../dist/rxp-js.js"></script>
    <script src="./helper.js"></script>
    <script>
        RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');

        // Enable the logger. Should be used for debugging only.
        RealexHpp.setConfigItem('enableLogging', true);
        window.addEventListener(RealexHpp.constants.logEventName, function(e) {
            console.log(e.detail);
        });

        // get the HPP JSON from the server-side SDK
        $(document).ready(function () {
            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                RealexHpp.lightbox.init(
                    "payButtonId",
                    "./response.php", // merchant url
                    jsonFromServerSdk   //form data
                );
                $('body').addClass('loaded');
            });
        });
    </script>
</head>
<body>
    <div class="method">
        <label for="paymentMethod">Payment Method: </label>
        <select name="paymentMethod" id="paymentMethod">
            <option value="https://pay.sandbox.realexpayments.com/pay">Ecommerce</option>
            <option value="https://apis.sandbox.globalpay.com/ucp/hpp/transactions">Unified Payments</option>
        </select>
    </div>
    <input type="submit" id="payButtonId" value="Checkout Now" />
</body>
</html>