W-9 Collection Drop-In

Rendering and Styling the W-9 Collection Drop-In UI Component

Using an authenticated Client SDK, you can pass in your custom theme into the render command of the W-9 Collection Drop-In.

1<html>
2    <head>
3        <title>My App</title>
4    </head>
5    <body>
6        <!-- target parent node to render UI -->
7        <div id="abound-ui-wrapper"></div>
8        <script type="module">
9            import { renderW9Collection } from "https://js.withabound.com/latest-major/abound-client-sdk.js";
10
11            // define your custom theme object
12            const customTheme = {
13                color: {
14                    text: "#000000",
15                },
16            };
17
18          	// define your custom text content object
19            const customContent = {
20                submitButton: "Complete",
21                loadingButton: "In Progress",
22                loadingPrompt: "Please Wait",
23                errorMessage: "Incorrect",
24            };
25
26            // render drop-in component
27            renderW9Collection({
28                accessToken: "accessToken_sampleeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2OTY5ODczNTcsImV4cCI6MTY5Njk4NzY1NywiYXVkIjoiYXBwSWRfc2FtcGxlcU5oVmNkWVFZVSIsImlzcyI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjQiLCJzdWIiOiJ1c2VySWRfc2FtcGxlWEdNRm5oT3BlUiJ9.-NrPVQvsnM8vJouyuP5yeFGlYb1xGgR-gS3v87p5BQk",
29                targetId: "abound-ui-wrapper",
30                theme: customTheme,
31              	content: customContent
32            });
33        </script>
34    </body>
35
36</html>

You should now see the stylized UI rendered in your app:


Properties

Rendering the W-9 Collection Drop-In comes with the following properties:

PropertyDescription
onSubmit
(optional, function)		Callback function executed when the W9 collection form is submitted and before any error or success event.
onSubmitError
(optional, function)		Callback function executed when the W9 collection form errors during submission.
onSubmitSuccess
(optional, function)		Callback function executed when the W9 collection form is successfully submitted.
accessToken
(string, required)		The user-specific accessToken.
targetId
(string, required for js)		The value of a node’s id attribute where the UI will be rendered.
theme
(optional, object)		Override default styling definitions with your own brand’s styling.
content
(optional, object)		Override default text content with your own brand’s content.

Custom Text Content


You can customize the following text content values in the W-9 Collection Drop-In using the content parameter:

PropertyDescription
submitButton
(optional, string, default: Submit)		The text shown in the submit button.
loadingButton
(optional, string, default: Loading...)		The text shown in the submit button when the form is in a loading state.
loadingPrompt
(optional, string, default: "This should take less than 10 seconds.")		The helper text below the button when the form is in a loading state.

On Submit Errors

Here is a list of the possible errors that are returned in the onSubmitError callback function.

Error TypeDescription
Missing Required FieldsThis is shown if the form is attempted to be submitted without all the required form fields present.
Something Went WrongThis is a system-failure error and should rarely, if ever, occur.

Data Pre-population

On load, the W-9 Collection Drop-In will display (if available) the latest available W-9 information previously submitted by for this userId.