Quickstart
Environments
| Sandbox | Production |
|---|---|---|
Partner Platform link | https://portal.sandbox.boompay.app | https://portal.production.boompay.app |
API host | https://api.sandbox.boompay.app | https://api.production.boompay.app |
SDK iframe URL | https://sdk.sandbox.boompay.app | https://web.boompay.app |
To get started with the Boom SDK, follow these 3 steps:
1. Generate an access key and a secret key using the Boom Partner Platform
In the Boom Partner Platform, navigate to "Settings" -> "Developers" to generate an access key and a secret key.
Make sure to save the secret key after you generate it, as you won't be able to view it again in the Partner Platform.
2. Exchange your access key and secret key for an API token
curl --location 'https://api.production.boompay.app/partner/v1/authenticate' \
--header 'Content-Type: application/json' \
--data '{
"access_key": {{access_key}},
"secret_key": {{secret_key}}
}'3. Create a customer authentication token and sync with our user database
curl --location 'https://api.production.boompay.app/partner/v1/customers' \
--header 'Authorization: Bearer {{api_token}}' \
--header 'Content-Type: application/json' \
--data-raw '{
"first_name": "John",
"last_name": "Doe",
"email": "[email protected]",
"phone": "1234567890",
"dob": "1999-09-27"
}'Email and phone must be unique, meaning neither element should be present in Boom's system.
Sample of fullstack react/node implementation with Plaid processor token:
Sample iFrame implementation example for Vanilla js:
This section is relevant for plaid copy link flow. For plaid shared token see Plaid Processor Token Integration page or Sample of full stack react/node implementation with Plaid processor token above
An iFrame embedded environment is fully supported with the Boom SDK.
iFrame supports the following query params for customization:
token - required to launch authenticated experience. We emit an auth-error event if the token fails authentication.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Demo</title>
<style>
.wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<iframe
title="boompay"
src=""
frameborder="0"
height="100%"
width="100%"
allow="fullscreen"
></iframe>
</div>
<script>
// Target origin of iframe
// sandbox - https://sdk.sandbox.boompay.app
const TARGET_ORIGIN = "https://web.boompay.app";
// Helper function to build query string and configure SDK
const buildURLQuery = (obj) =>
Object.entries(obj)
.map((pair) => pair.map((v) => encodeURIComponent(v)).join("="))
.join("&");
// Wait for DOM to load
window.addEventListener("DOMContentLoaded", () => {
/**
* Prompt to insert token
* Note: this is just for demo purposes
*
* in real-world example you should store that token
* in your DB and send that token here via request
*
*/
const token = prompt("Please, insert token:");
const iframe = document.querySelector("iframe");
// Listen to available messages from iframe
window.addEventListener(
"message",
(event) => {
// please, reffer to Client Events documentation for more information;
if (event.origin === TARGET_ORIGIN) {
const parsedEvent = JSON.parse(event.data);
if(parsedEvent?.type === "action") {
switch (parsedEvent.name) {
case "close":
// Handle close event
// Triggered when user closes iframe
iframe.style.display = "none";
break;
case "auth-error":
// Handle auth error
// Triggered when token in url is invalid
alert("Auth error");
iframe.style.display = "none";
break;
default:
console.log(event.data);
}
}
}
},
false
);
// Run iframe with params once token is inserted
if (!token) {
alert("Token is required");
} else {
const params = buildURLQuery({ token });
iframe.src = `${TARGET_ORIGIN}/?${params}`;
}
});
</script>
</body>
</html>
You need to handle a close and auth-error event.
Please refer to the following link for more details on handling those events: