Front-end integration

Front-end sequence

Front-end integration consists of 2 widgets to be implemented and invoked on the checkout page:

  • senseJS for fingerprinting
  • UIWidget for FlexCharge's response
Front-end sequence.  
(click to display image in full screen)

Front-end sequence.
(click to display image in full screen)

Front-end snippets can be found in you Sandbox account. Developers > Sites > View/Edit


SenseJS

SenseJS is a JavaScript library for the browser that is used as a device fingerprint and to track simple page events like loading, pasting, resizing.

Embed SenseJS

The snippet to embed SenseJS can be found in your Sandbox account. Developers > Sites > View/Edit > SenseJS

midYour FlexCharge Merchant Identification Number. Get your Mid
siteIdUnique id for each of your websites.
If you are implementing FlexCharge on several websites, make sure that SenseJS snippet contains the right siteId.

❗️

Content Security Policy

If you use CSP (Content Security Policy) headers on your site, you must allow the "*.flex-charge.com" in connect-src directive for full functionality based on your host configuration.

Content-Security-Policy: connect-src 'self' https://*.flex-charge.com;

Invoke SenseJS

Sense JS needs to be invoked with your order id for all of your payment transactions, as soon as possible in the payment flow, before you receive the response for your payment transaction from the PSP.

This is how a customer session can be matched with their specific order.

<script>
    window.addEventListener('load', function() {
            window.fc.setOrderId({ orderId: 'your order id' });
        });
</script>

UI Widget

The UI Widget handles the response from Evaluate.

Embed UI Widget

The snippet to embed the UI Widget can be found in your Sandbox account. Developers > Sites > View/Edit > UI configuration

midYour FlexCharge Merchant Identification Number. Get your Mid
siteIdUnique id for each of your websites.
If you are implementing FlexCharge on several websites, make sure that UIWidget snippet contains the right siteId.

❗️

Content Security Policy

If you use CSP (Content Security Policy) headers on your site, you must allow the "*.flex-charge.com" in connect-src directive for full functionality based on your host configuration.

Content-Security-Policy: connect-src 'self' https://*.flex-charge.com;

Invoke UI Widget

After the decline response from PSP, invoke initUI instead of redirecting to the decline page.

<script>
    window.addEventListener('load', function() {
            window.UIWidget.InitUi({
                successUrl: 'https://your-site-success-page',
                rejectUrl: 'https://your-site-decline-page',
                cancelUrl: 'https://your-site-cancel-page',
            });
        });
</script>

Configuration

Events listeners

The UI Widget allows adding events, to which you can register easily, by calling .on(eventName, callbackFunction) on your Widget instance.

Event NameDescription
successEvent triggers if a customer clicks on the "Ok" button on the success popup.
declineEvent triggers if a payment was rejected or if a customer clicks the "Ok" button on the decline popup.
cancelEvent triggers if a customer clicks on the "Close" button.
UIWidget.on("success", () => {
  console.log("Do something");
});

Events can be removed.

UIWidget.removeEvent("success")

Widget initialization argument object fields

How to pass additional information to the UI Widget during initialization.

You can set additional fields for argument object when you trigger InitUi method. This information is essential for the UI Widget to function properly and to provide the user with a seamless payment experience.

NameTypeRequiredDescription
orderSessionKeyguid/uuidoptionalCurrent order session unique key.
successUrlstringoptionalUrl to redirect to success page.
rejectUrlstringoptionalUrl to redirect to decline page.
cancelUrlstringoptionalUrl to redirect to cancel page.
UIWidget.InitUi({ 
  orderSessionKey: 'bd5b3f47-a15e-4b5e-b8f1-799edfdf33e7', 
  successUrl: 'https://your-site-success-page',
  rejectUrl: 'https://your-site-decline-page',
  cancelUrl: 'https://your-site-cancel-page',
});