I'm experiencing with rxp-hpp.js and would like to customize the HPP form displayed in my iframe.
I have followed instructions at https://developer.globalpay.com/ecommerce/hosted-solution/customization but I'm unable to get HPP to use my CSS.
Any help would be appreciated.
My html page
<html>
<head>
<title>HPP P2 (hpp:body)</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="/lib/rxp-hpp.js"></script>
<link rel="stylesheet" type="text/css" href="./css/styles.css">
<script>
// 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.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
RealexHpp.embedded.init("payButtonId","targetIframe","/examples/hpp/response.php", jsonFromServerSdk);
});
});
</script>
</head>
<body>
<hpp:body />
<input type="submit" id="payButtonId" value="Checkout Now 3.6.1" />
<br />
<iframe id="targetIframe" height="700" width="400" style="display:none;"></iframe>
</body>
</html>
As mentioned in the documentation, all images or CSS used in the template must be referred to locally on our server; no absolute URLs to external images or CSS. You'll need to include the image files along with the template page.
You will need to create this template (JavaScript is not needed) and then send it to the support team, which will upload it to the HPP server, under the merchant provided by you - once the process is completed, you will be able to see the styling being loaded inside the HPP. The support team can be contacted at [email protected]