Payee Tax Profile Component

Rendering the Component

Authenticate and style this component by importing and calling the renderPayeeTaxProfile function from the Abound Client SDK. This function will render the “Payee Tax Profile” Drop-In UI component in your app.

Javascript
1<html>
2    <head>
3        <title>My App</title>
4    </head>
5    <body>
6        <div id="abound-ui-wrapper"></div>
7        <script type="module">
8            import { renderPayeeTaxProfile } from "https://js.withabound.com/latest-v3-minor/abound-client-sdk.js";
9
10            // define your custom styles object
11            const styles = {}; // see the styling guide for more information
12
13            // define your callbacks
14            const onReady = () => {
15              console.log("do something when the drop-in is initalized")
16            }
17
18            const onSubmit = () => {
19              console.log("do something when the a new tax profile has been submitted and wating for a response")
20            }
21
22            const onSubmitSuccess = () => {
23              console.log("do something when the a new tax profile has been successfully submitted")
24            }
25
26            const onSubmitError = (error) => {
27              console.log("do something when submitting a tax profile encounters an unexpected error")
28            }
29
30            // render drop-in component
31            renderPayeeTaxProfile({
32                accessToken: "accessToken_sampleeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTY5ODczNTcsImV4cCI6MTY5Njk4NzY1NywiYXVkIjoiYXBwSWRfc2FtcGxlcU5oVmNkWVFZVSIsImlzcyI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjQiLCJzdWIiOiJ1c2VySWRfc2FtcGxlWEdNRm5oT3BlUiJ9.-NrPVQvsnM8vJouyuP5yeFGlYb1xGgR-gS3v87p5BQk",
33                targetId: "abound-ui-wrapper",
34                styles,
35              	onReady,
36              	onSubmit,
37              	onSubmitSuccess,
38              	onSubmitError
39            });
40        </script>
41    </body>
42
43</html>

Render Properties

The following properties are available to passed into the renderPayeeTaxProfile function:

Property
Description
onReady
(optional, function)		Callback function executed when the component has initialized.
onSubmit
(optional, function)		Callback function executed when the component is submitted and before any error or success event.
onSubmitError
(optional, function)		Callback function executed when the component errors during submission.
onSubmitSuccess
(optional, function)		Callback function executed when the component is successfully submitted.
accessToken
(required, string)		The token used to authenticate communication between the client and Abound. Optionally has userId context.
targetId
(required, string)		The value of a node’s id attribute where the UI will be rendered.
styles
(required, object)		A nested object of styling definitions to match the component with your own brand.

Customizations

There are several custom options available to customize the appearance of the “Payee Tax Profile” component. Unlike, the properties defined at render, these customizations are defined at the time of accessToken creation nested under the customizations.payeeTaxProfile key.

Property
d		Description
shouldPreloadFromUserId
(optional, boolean)		Prevents preloading of the Payee Tax Profile by userId lookup. Default is true.
supportedTaxForms
(optional, array)		An array of the forms your organizaton intends to support and collect during a Payee Tax Profile submission. Default is all forms: ["FORM_W_9", "FORM_W_8BEN", "FORM_W_8BEN_E"].
defaults
(optional, object)		Used to preload the Payee Tax Profile with default values. These defaults will be ignored if data is preloaded by userId.
requestingPayer
(optional, object)		If supplied, a Payee Tax Profile submission that creates a Form W-9 will attach this information as the Payer.
Example accessToken request payload w/ customizations
1{
2  "expiresIn": 300,
3  "userId": "userId_sampleXGMFnhOpeR",
4  "customizations": {
5    "payeeTaxProfile": {
6      "shouldPreloadFromUserId": false,
7      "supportedTaxForms": ["FORM_W_9", "FORM_W_8BEN", "FORM_W_8BEN_E"],
8      "defaults": {
9        "firstName": "Ada",
10        "lastName": "Lovelace",
11        "businessName": "Computer Consulting LLC",
12        "dateOfBirth": "1980-01-12",
13        "address": "456 Daisy Dr.",
14        "address2": "Apt. 12",
15        "city": "Anoka",
16        "state": "MN",
17        "postalCode": "00000",
18        "country": "US",
19        "email": "example@withabound.com"
20      },
21      "requestingPayer": {
22        "name": "Payer Inc.",
23        "tin": "111111111",
24        "address": "123 Main St.",
25        "address2": "Suite 120",
26        "city": "Anoka",
27        "state": "MN",
28        "postalCode": "11111",
29        "country": "US",
30        "phoneNumber": "5555555555"
31      }
32    }
33  }
34}

Data Prepopulation

There are two ways to prepopulate the Payee Tax Profile component:

1. Preload from the Previous Submission

If you included a userId when creating the accessToken, the component will automatically display (if available) the latest available W-9/W-8 information previously submitted by that User. This behavior can be turned off by setting payeeTaxProfileOptions.shouldPreloadFromUserId to false when creating the accessToken.

2. Preload from Default Values

If you include the payeeTaxProfileOptions.defaults object when creating an accessToken, the component will prepopulate select form fields with this data.

Ignoring Defaults

Defaults will only apply if a previous Payee Tax Profile submission was not found during a userId lookup or if payeeTaxProfileOptions.shouldPreloadFromUserId is set to false.

Here is an example of how to structure the payeeTaxProfileOptions.defaults object:

Example 'defaults' object
1{
2  firstName: "Ada",
3  lastName: "Lovelace",
4  businessName: "Computer Consulting LLC",
5  dateOfBirth: "1980-01-12",
6  address: "456 Daisy Dr.",
7  address2: "Apt 12",
8  city: "Anoka",
9  state: "MN",
10  postalCode: "00000",
11  country: "US",
12  email: "example@withabound.com"
13}