Atelio Embedded Components SDK

This SDK includes React components that allow brands to integration Atelio's hosted finance offerings. In order to make use of them, you will first need to create API Keys.

Installation

NPM

To install the module in your repo, simply run this in your terminal: npm install @atelio/embedded-components

Then import the desired components in your code: import { Onboarding } from '@atelio/embedded-components';

Using Temporary Tokens

Before executing any request, you need to authorize the calls to the Atelio API.

1. Make an authorized call from your backend with the correct external_entity_id to receive temporary tokens of {Identity, Authorization} scoped to the external_entity_id. Use these limited in scope-and-time values to make requests from your app.

For onboarding a new entity, you can generate a unique uuid for your external_entity_id.

Note that the following examples are for use with the "production" environment. There's also a sandbox environment you can use for development. For that, use https://api-sandbox.auth.embedded.atelio.com/api/v0/auth/

cURL

curl --request POST \
  --url https://api.auth.embedded.atelio.com/api/v0/auth/ \
  --header 'Content-Type: application/json' \
  --header 'Identity: YOUR_IDENTITY' \
  --header 'Authorization: YOUR_AUTHORIZATION' \
  --data '{"external_entity_id": "YOUR_EXTERNAL_ENTITY_ID"}'

Javascript

const headers: HeadersInit = {
	'Content-Type': 'application/json',
	Authorization: YOUR_AUTHORIZATION,
	Identity: YOUR_IDENTITY,
};
const options: RequestInit = {
	body: JSON.stringify({
		external_entity_id: YOUR_EXTERNAL_ENTITY_ID,
	}),
	headers: headers,
	method: 'POST',
};
const response = await fetch('https://api.auth.embedded.atelio.com/api/v0/auth/', options); 
const data = await response.json();
const { access_token, refresh_token } = data;

Components

Once you have an your access and refresh tokens, simply pass them as props to the component, in addition to specifying whether these are for production or sandbox:

<Onboarding accessToken={accessToken} isProduction={true} refreshToken={refreshToken} />