Quickstart

6min
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
curl --location 'https://api.sandbox.boompay.app/partner/v1/authenticate' \
--header 'Content-Type: application/json' \
--data '{
    "access_key": {{access_key}},
    "secret_key": {{secret_key}}
}'
curl --location 'https://api.sandbox.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
curl --location 'https://api.sandbox.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"
}'
curl --location 'https://api.sandbox.boompay.app/partner/v1/customers' \
--header 'Authorization: Bearer {{api_token}}' \
--header 'Content-Type: application/json' \
--data-raw '{
    "first_name": "John",
    "last_name": "Doe",
    "email": "test@email.com",
    "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:
﻿https://github.com/boompay/sdk-integration-sample 
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.
html
<!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
      // https://sdk.sandbox.boompay.app
      const TARGET_ORIGIN = "https://sdk.sandbox.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>

<!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
      // https://sdk.sandbox.boompay.app
      const TARGET_ORIGIN = "https://sdk.sandbox.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:
﻿https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 
Updated 16 Oct 2024
Did this page help you?
Introduction to the Boom SDK
Plaid Processor Token Integration
Quickstart

1. Generate an access key and a secret key using the Boom Partner Platform﻿

2. Exchange your access key and secret key for an API token

3. Create a customer authentication token and sync with our user database

Sample of fullstack react/node implementation with Plaid processor token:

Sample iFrame implementation example for Vanilla js:

1. Generate an access key and a secret key using the Boom Partner Platform
