Rendering the Brite Client

In this section, we walk through the process of integrating the Brite Client into your environment, focusing on creating a seamless user experience (UX) via our iframe solution. Our goal is to ensure the Brite Client is rendered optimally across all devices, from desktops to mobile phones.

Embedding the Brite Javascript SDK

To start using Brite in your environment, embed our JavaScript SDK on your webpage. This SDK facilitates rendering the Brite Client and subscribing to session events for a dynamic user experience.

Script Tag 

Include the following script tag in your HTML to load the Brite JavaScript SDK:

				
					<script src="https://client.britepaymentgroup.com/client.js"></script>

				
					<script src="<base url>/client.js"></script>

Rendering the Brite iframe

The Brite Client is rendered within an iframe on your webpage. Begin by initialising the Brite JavaScript library and defining an HTML container where the iframe will be placed.

Defining the iframe container

For an optimal user experience, it’s crucial that the HTML container dynamically adjusts to hug the dimensions of the Brite Client iframe. This ensures that the presentation is seamless across all devices, eliminating any possibility of internal scrolling within the container that could detract from the user experience.

To achieve this, your application should follow size changes in the iframe and adjust the container’s dimensions accordingly. This dynamic adjustment is essential to maintain a consistent and engaging user interface, especially when dealing with various device sizes and orientations.

				
					/* Base styles for BritePayment container div */
#BritePayment {
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  position: fixed; /* Fixed position */
  top: 0; /* Align to the top of the viewport */
  left: 0; /* Align to the left of the viewport */
  z-index: 10; /* Ensure it appears above other content */
  overflow: hidden; /* Prevent scroll on the container */
}

Brite Client Size

Desktop and Tablet Devices: The Brite Client is designed with a minimum height of 600px and width of 400px. Note that these dimensions are subject to change and using a dynamic container is recommended.

				
					/* Styles for desktop and tablet devices */
@media only screen and (min-width: 481px) {
  #BritePayment {
    width: auto; /* Allow the width to grow with the iframe */
    height: auto; /* Allow the height to grow with the iframe */
    min-width: 400px; /* Minimum width for Brite Client */
    min-height: 600px; /* Minimum height for Brite Client */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the div in the viewport */
  }
}

Mobile Devices: The Brite Client is required to occupy the full viewport to enhance the user experience.

				
					/* Media query for mobile phones */
@media only screen and (max-width: 480px) {
  #BritePayment {
    width: 100vw; /* Occupy 100% of the viewport width */
    height: 100vh; /* Occupy 100% of the viewport height */
  }
}

Implementation Tips

CSS Flexbox or Grid: Use them to make your container responsive and flexible. These layouts automatically adjust to their child elements’ size, making them ideal for dynamically sizing the Brite iframe container.
Viewport Units for Mobile Devices: For mobile devices, ensure the container uses viewport width (vw) and viewport height (vh) units to occupy the full screen. This is crucial for meeting the requirement that the Brite Client occupies the full viewport on mobile devices.
Don’t obstruct the Brite Client: Additional close buttons or overlay elements that might hinder usability are not allowed.

Example HTML container

				
					<div id="BritePayment"></div>

Initializing the Brite Client

Define the Brite Client using the Brite JavaScript SDK, initializing it with the session_token obtained from the session creation step.

Example JavaScript

				
					var client = new Brite('session_token');

Once the Brite Client is defined, render the Brite iframe to the user by populating the previously defined container.

Example JavaScript

				
					client.start({
    selector: '#BritePayment',
    width: '400px',   // Override the default Brite Client's width
    height: '600px'   // Override the default Brite Client's height
}, function(state) {
    if (state == Brite.STATE_COMPLETED) {
        console.log("Client completed");
    }
}, function() {
    client.stop();
});

Handling Brite Client Events with JavaScript Callbacks

Brite SDK allows you to monitor and respond to changes in the Brite Client’s state through callbacks. This functionality enables you to manage the user experience dynamically based on their actions.

Example Callbacks

				
					client.start({
    selector: "#BritePayment",
    width: '400px',   // Override the default Brite Client's width
    height: '600px'   // Override the default Brite Client's height
}, function(state) {
    if (state == Brite.STATE_COMPLETED) {
        // Perform an action when the client completes
    }
}, function() {
    // Perform cleanup or UI adjustments when the client is stopped
    client.stop();
});

On this page