iFrame integration

Building the iFrame code :

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

FieldDescription
PaymentSessionIdpaymentSessionId obtained in return from Creates a payment session.
PaymentSessionUrlpaymentSessionUrl obtained from Creates a payment session.
PlaceHolderSelectorHTML element in which the iFrame should be displayed.
PaymentCompletedFunction called after payment.
StyleHeight and max-width applied to the iFrame.
enable3rdPartyCookiesFallbackOptional field to disable 3rd party cookies fallback solution.
True by default.
PaymentRedirectThis 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" }
isRedirectFullpageRequiredThis optionnal field allows to make redirection handling mandatory regardless of 3rd party cookies support (has to be used with PaymentRedirect)