Building the iFrame code :
- Call the paymentHub script
Integration : https://payment.integration-cb4x.fr/dist/js/paymentHub.js
Production : https://payment.cb4x.fr/dist/js/paymentHub.js - Create the div used to display the payment page
- Call the Gets the payment result from its session id. method in the onPaymentCompleted() function
Sample code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://payment.integration-cb4x.fr/dist/js/paymentHub.js"></script>
</head>
<body>
<div id="chosenDiv" style="width: 400px; height: 500px; border-color: gray; border-width: 4px; display: inline-block;">
</div>
<script type="text/javascript">
// do here what you want to do once payment is finished
function onPaymentCompleted() {
alert('payment is completed');
}
// do here what you want to do once payment needs redirection
function onPaymentRedirectionNeeded(event) {
alert('payment will redirect');
//basic example
window.location.replace(event.redirectUrl);
}
//function to display the payment iframe
function loadPaymentIframe() {
var hubOptions =
{
paymentSessionId: 'createdSessionId',
paymentSessionUrl: 'createdSessionUrl',
placeHolderSelector: '#chosenDiv',
paymentCompleted: onPaymentCompleted,
style : { height: '350px', maxWidth: '500px'},
paymentRedirect : onPaymentRedirectionNeeded
};
// PaymentHub.IframeComponent is referenced in the bundle
var iframeComponent = new PaymentHub.IframeComponent(hubOptions);
iframeComponent.init();
}
</script>
</body>
</html>
Information to put in hubOptions
Field | Description |
---|---|
PaymentSessionId | paymentSessionId obtained in return from Creates a payment session.. |
PaymentSessionUrl | paymentSessionUrl obtained from Creates a payment session.. |
PlaceHolderSelector | HTML element in which the iFrame should be displayed. |
PaymentCompleted | Function called after payment. |
Style | Height and max-width applied to the iFrame. |
enable3rdPartyCookiesFallback | Optional field to disable 3rd party cookies fallback solution. True by default. |
PaymentRedirect | This optionnal field allows to handle redirection when payment needs redirection outside iframe (full page redirection) The returned json object contains a field redirectUrl { redirectUrl : "https://redirect.toPage" } |
isRedirectFullpageRequired | This optionnal field allows to make redirection handling mandatory regardless of 3rd party cookies support (has to be used with PaymentRedirect) |