Getting Started with Drop-Ins

Drop-In UI Components are pre-built experiences that can be embedded directly within your app. They enable you to:

  • launch your tax features quicker with pre-built UI that matches your brand’s look and feel
  • eliminate maintenance of UI and UX with changing tax regulation
  • leverage best-in-class UX
  • safely transmit PII data on the client-side, bypassing your server all together

Importing the Client SDK

To start, you will need to import the client SDK into your app.

You can pin to a static version or we suggest using the latest-v3-minor version to ensure you receive the latest features and bug fixes.

Here is an example:

Javascript
1<script type="module">
2  import {renderPayeeTaxProfile} from
3  "https://js.withabound.com/latest-v3-minor/abound-client-sdk.js";
4</script>
Browser Support

Drop-In UI Components are available in any web browser that supports JavaScript Modules. A list of these browsers can be found here.

Authenticating Drop-Ins

All Drop-In UI Components are authenticated using an accessToken, created server-side, and passed directly into a component’s render function on the front-end. Below is an example of creating an accessToken specifiying a userId (optional), expiration time, and passing it into the renderPayeeTaxProfile function.

Access token request
1curl \
2  --request POST \
3  --url https://sandbox-api.withabound.com/v4/access-tokens \
4  --header 'accept: application/json' \
5  --header 'content-type: application/json' \
6  --data '{
7    "userId": "userId_sampleXGMFnhOpeR",
8    "expiresIn": 300
9  }'
Access token response
1{
2  "accessToken": "accessToken_sampleeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTY5ODczNTcsImV4cCI6MTY5Njk4NzY1NywiYXVkIjoiYXBwSWRfc2FtcGxlcU5oVmNkWVFZVSIsImlzcyI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjQiLCJzdWIiOiJ1c2VySWRfc2FtcGxlWEdNRm5oT3BlUiJ9.-NrPVQvsnM8vJouyuP5yeFGlYb1xGgR-gS3v87p5BQk",
3  "createdAt": "2024-08-06T22:46:51.873Z",
4  "expiresAt": "2024-08-06T22:51:51.000Z"
5}
Authenticating the render funtion
1<script type="module">
2  import { renderPayeeTaxProfile } from "https://js.withabound.com/latest-v3-minor/abound-client-sdk.js";
3
4  // render drop-in component
5  renderPayeeTaxProfile({
6    accessToken:
7      "accessToken_sampleeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTY5ODczNTcsImV4cCI6MTY5Njk4NzY1NywiYXVkIjoiYXBwSWRfc2FtcGxlcU5oVmNkWVFZVSIsImlzcyI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjQiLCJzdWIiOiJ1c2VySWRfc2FtcGxlWEdNRm5oT3BlUiJ9.-NrPVQvsnM8vJouyuP5yeFGlYb1xGgR-gS3v87p5BQk",
8    targetId: "abound-ui-wrapper",
9    styles: {}, // see the styling guide for more information
10  });
11</script>