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 ecomsupport#globalpay.com
Related
I'm using the code generated from the Facebook code generator here https://developers.facebook.com/docs/plugins/comments/ and as instructed I've created a HTML file with the following code in it.
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0" nonce="PMiduXpV"></script>
<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="1" data-numposts="1"></div>
</body>
</html>
however, nothing is displayed on the UI. I can only access the comments if I manually inspect the page and manually navigate through the loaded Iframe.
Any ideas why this might be happening?
I've attached copies of the code below. Only two files in my project now, app.js and index.html. When I go to google developers' tool and console, the log statement isn't going through. When I type react or react-dom into console I am told Reference Error: React is not defined. This is what a Udemy tutorial has told me to do last updated 5/19 so this should work. I have tried putting import React from "react"; in the top of the files but that doesn't work either. Any suggestions?
//app.js
console.log("App.js is running!)
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Indecision App</title>
</head>
<body>
<script src="https://unpkg.com/react#16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.0.0/umd/react-dom.development.js"></script>
<script src="/scripts/app.js"></script>
</body>
</html>
Looks like you'll need to also specify the crossorigin attribute on the scripts as per the react CDN-links docs.
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
I have a single HTML page with React (build manually without ANY tools, just a text editor).
This page is working correctly. Now, I would like to add a PIE Chart with NIVO lib.
When I add the script (CDN) I got the following error in console:
exports is not defined
I can solve this by creating a fake exports var = {} (is that a good solution ?)
But then I have a new error:
require is not defined
Do that means the CDN link from NIVO is incorrect ? How to solve this ?
Alternative: I am open to use another lib working with React. But I want to only use CDN links and a text editor to achieve that.
Full HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Batch stats</title>
<script>let exports = {};</script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react#16.7.0/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16.7.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#nivo/pie#0.61.1/dist/nivo-pie.cjs.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Page(props) {
return (
<div>
<h1>Hello World</h1>
<div>How to add a PIEChart ?</div>
</div>
);
}
ReactDOM.render(<Page version="v3"/>, document.getElementById('root'));
</script>
</body>
</html>
Thanks
Nivo do not support it.
you should use the UMD build, however, you'll need a bunch of extra
dependencies, including D3 packages which are using modern JS
features.
https://github.com/plouc/nivo/issues/959
How can i navigate from one HTML page to other HTML page using Mobile jQuery?
I tried this one:
function temperature()
{
$.mobile.changePage("temperature.html",{reloadPage:true});
}
when i clicked on temperature button temperature function is called.
<button id="TempConvert" data-theme="b" onClick="temperature()">Temprature Converter</button>
i got error message Error while Loading Page.
I used below scripts tags to include .js files
`<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="index.css" />
<script src="jquery.mobile/jquery-1.7.2.min"></script>
<script src="jquery.mobile/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
`
You could use an anchor: Go temp! and style it so it looks like a button (that is what the data-role="button" part does).
The anchor will still behave like a regular anchor but it will look like a button.
I want to preload a JS file and a CSS file from the landing page to optimize the main site load, after the conversion in the landing. I was looking for information about this and finally tried to get this done using:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'jsUrl');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'cssUrl');
xhr.send('');
With Firefox this great, but with Chrome it seems that the XHR calls are cached in a different cache than the css and js files.
We don´t use JQuery, the landing page must be lightweight (less load, more conversion rate).
Do you have any recommendation of another way to solve the original problem? (preload components)
Do you know how to make Chrome cache these requests?
This is a tested solution in a high volume site that works.
First, to avoid a competition between the landing page resources and the preloaded resources for the bandwith you could delay the load with javascript:
var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
if(prevOnLoad) {
try{
prevOnLoad();
}catch(err){
}
}
preloadSiteComponents();
}
window.onload=onLoadPreloadComponents;
This is not the way I solved this because in my use case a flash event (using the Flash to JS brigde) signals when the landing was finally loaded. But the previous code must works as well. When the load page event is fired by the browser this function will execute previous onLoad code and the preloading.
I put an empty div cointainer where the iframe will be loaded.
<div id="mainSiteComponentsContainer" style="display: none;">
</div>
And the function code is:
function preloadSiteComponents() {
try{
document.getElementById('mainSiteComponentsContainer')
.innerHTML=
"<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
}catch(err) {
}
}
As you could see, the link url to iframe is dynamic, it changes between differents plataform versions (different deployments) to avoid unwanted browser cache with a new deployments.
The HTML that will be in the iframe could be something like this (for example):
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
Here you could see the links to the components that I want to preload.
Finally, the div cointainer will have the iframe. After the onLoad event:
<div id="mainSiteComponentsContainer" style="display: none;">
<iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
</iframe>
</div>
You could see the working solution here.
Use Firebug to see the delayed load of this components.
Random thought:
Maybe you could include a hidden IFrame in your landing page which loads a page that does nothing but include your javascript and CSS files. If you trigger the loading of that IFrame in your javascript then it shouldn't block the landing page's loading or rendering, yet the script and css files would be loaded by the browser in the same way that it would for any other page.
Haven't tried this but adding this to the BOTTOM of your landing HTML should work:
<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">
The browser doesn't actually care that the resources aren't images it should fetch and cache them anyway. Browser typically load resources in page order so you wont delay other elements and with display:none you probably won't block rendering either.
Downside is you won't preload images defined in the CSS or #imports unless you preload them manually.