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

<!DOCTYPE html>
<html>
<head>
    <title>HPP embed Demo</title>
    <meta charset="UTF-8">
    <style>
        #targetIframe {
            min-height: 600px;
            min-width: 350px;
        }
    </style>
    <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');
        // get the HPP JSON from the server-side SDK
        $(document).ready(function () {
            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                RealexHpp.embedded.init(
                    "autoload",
                    "targetIframe",
                    function (answer, close) {
                        console.log('embed answer: ', answer)
                        close();
                        if (answer.AUTHCODE) {
                            $('.paymentResult').html('<div class="alert alert-success">All set!</div>');
                            //success
                            success(answer);
                        }
                        else {
                            //error
                            $('.paymentResult').html('<div class="alert alert-danger">'+answer.MESSAGE+'</div>');
                            //would you retry? This part should be handled at the rxp side, stay in the modal/iframe... TODO
                        }
                    },
                    jsonFromServerSdk
                );
                $('body').addClass('loaded');
            });
        });
    </script>
</head>
<body>
    <div class="paymentResult"></div>
    <iframe id="targetIframe" style="display:none;"></iframe>
</body>
</html>