In this section, we will cover the UX component of the Brite products. The Brite client is an iFrame solution leveraging javascript and a container that will contain the client.
Prior to rendering the client, the merchant will have to be authorized as a merchant to get the access_token needed to initialize the Brite products and use the session api’s to create a client session using the session_token to initialize the client.
Always make sure to use the Javascript to render the client for your customers since you need to subscribe to the client events to be able to close the client and act on client events.
Embedding the Javascript #
To initialize the Brite client, merchants will embed a javascript hosted by Brite. There are several callbacks linked to the javascript library, allowing merchants to get detailed insights about the end user’s iFrame interaction, e.g. whether the end user has completed the purchase or has dropped off at an earlier stage.
Script tag
The following script tag should be embedded on the page where the merchant intends to use Brite. The code contains the Brite javascript SDK that will later be used to render the Brite components. As mentioned before, this is hosted by us.
<script src="https://client.britepaymentgroup.com/client.js"></script>
Rendering the Brite iFrame
When initializing the Brite javascript library, the merchant will be making use of javascript on the intended webpage for the Brite client to render. In addition to initializing the javascript library, a container where the iFrame is to be rendered should be defined by creating an html element with an id of the merchant’s preference. This will be referenced in the script used to render the iFrame.
Defining a container for the iFrame
Our client.js script efficiently handles presentation, ensuring optimal rendering. However, should you wish to customize the size, the following guidelines apply:
- Desktop and Tablet Devices:
- Our Client is designed with a max-height of 600px and max-width of 400px.
- Mobile Devices:
- To optimize the user experience, the Client should occupy the entire viewport of the screen.
Please note that while the container size for the iframe can be adjusted as needed, we recommend adhering to these dimensions for an ideal user experience. For mobile devices, we require the full viewport of the screen.
When loading the client, it is essential to ensure that it fills the designated size correctly. For example, if the Brite client appears within a new pop-up window, be mindful of default window margins or potential scrolling that could obstruct the full client display.
To provide users with the best experience, center the client on the screen and ensure it appears without any scrollbars.
Example of how to define the container:
<div id="BritePayment"></div>
Defining the client
The Brite javascript library is triggered by a set of javascript functions. You will first need to define the client as a variable and call our Authorize as a merchant API as well as create a session to get the session_token string.
Example of defining the client:
var client = new Brite('session_token');
Initialize the Brite iFrame
Once the client has been defined, the Brite iFrame shown to the end user can be rendered. This is done by calling the Brite javascript library that will populate the container within the iFrame.
Example of initializing the Brite iFrame:
client.start({
selector: '#BritePayment',
}, function(state) {
if (state == Brite.STATE_COMPLETED) {
console.log("client completed");
}
}, function() {
client.stop(); });
Javascript Callbacks
The Brite javascript SDK allows the merchant to listen to callbacks from Brite to get the current state of the ongoing session (please note – not the transaction states), allowing actions to be taken when a change in state occurs. The following example outlines the callback function:
Called when client state changes
Called when end user closes the client
client.start({
selector: "#BritePayment",
}, function(state) {
if (state == Brite.STATE_COMPLETED) {
// do something }
}, function() {
client.stop();
});
Closing the client
Brite offers the possibility to close the client at any time. This can also be implemented in your frontend and make it available to users by simply calling this function. Brite currently does not support a cancel or go-back button within the iFrame.
client.stop();
Note that while this function closes the client, it does not directly affect the state of the ongoing session.
