Skip to content
brite docs
  • Technical Documentation
    Implementation Guidelines
    Implementation Guidelines

    Detailed guidelines on how to do a technical integration with Brite

    Read more

    Developer API image
    Developer API

    Technical documentation needed for offering the Britest payment solutions

    Read more

  • Checkout Guidelines
  • Marketing Guide
  • Implementation Guidelines
  • Developer API
  • Checkout Guidelines
  • Marketing Guide
  • FAQS
FAQS
Implementation Guidelines
  • Implementation Guidelines
Products
  • Brite Play
  • Brite Instant Payins
  • Brite Instant Payouts
  • Brite Data Solutions
Authorize as a merchant
  • Generate Token
  • Renew token
Brite Play
  • Brite Play
Brite Instant Payins
  • Brite Instant Payins
  • Recurring Deposits
  • Approve/Reject Deposit After Merchant Internal Check
Brite Instant Payouts
  • Brite Instant Payouts
  • Withdrawals using the Brite Client
  • Withdrawals using API-only
  • Create Reference Withdrawal
  • Time 2 Money (Withdrawal ETA)
  • Approve/Reject Withdrawal After Merchant Internal Check
KYC
  • KYC
Brite Blended
  • Brite Blended
Bank Account Selection
  • Create Bank Account Selection Session
Client Authentication
  • Create Authentication Session
Rendering the client
  • Rendering the client
Session handling
  • Session handling
Transaction handling
  • Transaction Handling
Check balance by API
  • Check balance by API
Http callbacks
  • Http Callbacks
Customer management
  • Customer management
Bank account management
  • Bank account management
Export functionality
  • Export to CSV
Error simulation in Sandbox
  • Erros Simulation in Sandbox
Error Codes
  • Aborted state errors
Brite in different Countries
  • Brite in different Countries
Brite on Native App or Mobile
  • Brite on Native App or Mobile
Brite integration test and verification
  • Brite integration test and verification
  • Home
  • Implementation Guideline
  • Rendering the client
  • Rendering the client

Rendering the client

Table of Contents
  • Embedding the Javascript

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.

What are your Feelings
Still stuck? How can we help?

How can we help?

Updated on September 22, 2022
Table of Contents
  • Embedding the Javascript

Brite
Linnégatan 5
114 47, Stockholm
Sweden

Phone: +46101888777

Brite

  • About Us
  • Careers
  • Cookies

Technical Documentation

  • Developer API
  • Implementation Guidelines

Marketing Guide

  • Assets
  • User Information

Checkout Guidelines

  • Checkout Guidelines

Contact

  • Merchant Support
  • Customer support
brite logomark gray
  • Privacy Policy
  • Terms & Conditions

Brite AB (corporate identity number: 559116-1632) is a licensed Payment Institution under the supervision of the Swedish Financial Supervisory Authority (Finansinspektionen). Brite AB provides payment services under the Swedish Payment Services Act (2010:751) as well as the EU Directive 2015/2366 about payment services in the internal market (PSD2) and has, upon notification, the authority to provide

YOUR COOKIE SETTINGS

We use cookies to provide the best experience.

 

You can find out more about which cookies we use, or switch them off by clicking `customise´. Here, you'll also find links to our Privacy Notice and Cookie Notice, which explain how we work with cookies and process your personal data.

 

Do you accept all cookies?

Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

3rd Party Cookies

This website uses Google Analytics, Leadfeeder, Hotjar, LinkedIn and Meta pixels to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

Cookie Policy

Download our Cookie Notice.