iFrame integration

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)