Code Samples


First, install components dependency with the package manager of your choice:

pnpm npm yarn
pnpm install @maxio-com/self-service

Then, initialize componentsFactory in your application code:

let componentsFactory = new Components({
  i18nSettings: {
    loadPath: '{{ns}}.json',
    language: 'en',
    colors: {colorpalette},
    components: {
      Button: {...ButtonSettings, boxShadow: 'none'}

Properties of the Components object include the following.

Property Description

The localization settings. The loadPath property specifies the URL where the label translations can be found. Merchants can use localization provided by Maxio, or create their own. The language property simply specifies the language.

accessTokenUrl The URL of the authentication endpoint. This must be provided by the Merchant for the authenticated users with tokens used to authenticate Maxio customers against the components' backend.

The URL of the Embeddable Components backend, which by default is

onAuthenticationRequest This is used for customizing authentication request to the Merchant's backend by, for example, providing a custom authentication header.
theme This property can be used for styling and overriding components appearance.


Theming Example

To customize theming, simply include the theme property in the componentsFactory constructor.

	colors: {colorpalette},
	fontWeights: "1",
	components: {
	  Button: {...ButtonSettings, boxShadow: 'none'},

The Merchant can customize the entire color palette, many standard text formatting options and the granular settings of each individual Component, like button, credit card, or Input. The full customization reference is available here.


Backend Authentication Endpoint

The endpoint should return a JSON object with the 'token' field containing the signed token value.

For example:

{”token”: “eyJg…”}

The token subject should be set as the Maxio customer reference of a customer referring to an authenticated user in the Merchant’s application. Token should be signed using the JWT key provided while launching the integration in Maxio. Signing should be done using HS256 algorithm. Also, the iat (issued at) claim must be provided.

Python Nodejs Go Java .NET
# Install the PyJWT package using pip, or include it in your requirements.txt.
import base64
from datetime import datetime
import json
from jwt.api_jwt import PyJWT

payload = {
	"sub": customer_reference, # where customer_reference is a Maxio customer's 
	# reference field resolved from merchant's authenticated customer
	"iat": datetime.utcnow().timestamp()

decoded_key = base64.b64decode(key) # where key is secret provided within Maxio UI
jwt_token = PyJWT().encode(payload=payload, key=decoded_key)
response_body = json.dumps({"token": jwt_token})
Was this article helpful?
0 out of 0 found this helpful