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
The container for the iFrame can be set to any size, but the recommended dimensions for the container are 280x520px. The iFrame is fully responsive and adjusted for both desktop and mobile devices, it is therefore recommended that the width is set to 100%.
When loading the client make sure that the fill size of the client is displayed correctly, for example if the Brite client is displayed in a new Pop-Up window there might be default margins to the window or scrolling in the window that would prevent the full client to be displayed.
For best user experience make sure the client is displayed in the center of the screen and that the full client is displayed 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.
