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

<!DOCTYPE html>
<html>
<head>
    <title>HPP embed Demo</title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="/dist/rxp-js.js"></script>
    <script>
        RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
        // get the HPP JSON from the server-side SDK
        $(document).ready(function () {
            $.getJSON("/examples/hpp/proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                RealexHpp.embedded.init(
                    "payButtonId",
                    "targetIframe",
                    "/examples/hpp/response.php",   // merchant url
                    jsonFromServerSdk,  // form data
                    {   // options
                        onResize:function(data){
							$('#targetIframe').css(data)
                        }
                    }
                );
                $('body').addClass('loaded');
            });
        });
    </script>
</head>
<body>
    <input type="submit" id="payButtonId" value="Checkout Now" />
    <br />
    <iframe id="targetIframe" style="display:none;"></iframe>
</body>
</html>