---
title: Quickstart
slug: Od3a-quickstart
docTags: 
createdAt: 2023-05-30T16:07:59.000Z
---

### 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](https://portal.boompay.app/login)

In the Boom Partner Platform, navigate to ["Settings"](https://portal.boompay.app/settings) -> ["Developers"](https://portal.boompay.app/settings/developers) to generate an access key and a secret key.&#x20;

:::hint{type="warning"}
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.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
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": "test@email.com",
    "phone": "1234567890",
    "dob": "1999-09-27"
}'
```

:::hint{type="warning"}
Email and phone must be unique, meaning neither element should be present in Boom's system. &#x20;
:::

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

[https://github.com/boompay/sdk-integration-sample](https://github.com/boompay/sdk-integration-sample)&#x20;

### Sample iFrame implementation example for Vanilla js:

:::hint{type="info"}
This section is relevant for *plaid copy link* flow. For plaid shared token see [Plaid Processor Token Integration](docId\:Nf44BY7Fk3VGd-pvG0ptn) page or [Sample of full stack react/node implementation with Plaid processor token](docId\:Od3a2gm3bsNyt0OdyeOR5) 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.

:::CodeblockTabs
html

```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
      // 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>

```
:::

:::hint{type="warning"}
You need to handle a **close&#x20;**&#x61;n&#x64;**&#x20;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](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)&#x20;
