Adding a Tax Profile Drop-In

Data Prepopulation

The Tax Profile Drop-In Component will display any information already on the user record as a default. For example, if you already saved the firstName and lastName for a user, the information will prepopulate.

Prerequisites

Before you begin, be sure you've familiarized yourself with the following guides:

Rendering and Styling the Tax Profile Drop-In Component

Using an authenticated Client SDK, you can pass in your custom theme into the render command of the Tax Profile Drop-In Component.

<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <!-- target parent node to render UI -->
        <div id="abound-ui-wrapper"></div>
        <script type="module">
            import Abound from "https://js.withabound.com/latest/abound-client-sdk.js";

            // authenticate the Abound Client SDK for an Abound user
            const abound = new Abound({
                accessToken: "<<testAccessToken>>",
            });

            // define your custom theme object
            const customTheme = {
                color: {
                    text: "#000000",
                },
            };
          
            // define your custom text content object
            const customContent = {
                submitButton: "Complete",
                loadingButton: "In Progress",
                loadingPrompt: "Please Wait",
                errorMessage: "Incorrect",
            };

            // render drop-in component
            abound.renderTaxProfile({
                targetId: "abound-ui-wrapper",
                theme: customTheme,
                content: customContent
            });
        </script>
    </body>
</html>

import React, { useCallback, useState } from "react";
import { Abound } from "@withabound/react-client-sdk";

// authenticate the Abound Client SDK for an Abound user
const abound = new Abound({
  accessToken: "<<testAccessToken>>"
});

const { TaxProfile } = abound;

// define your custom theme object
const customTheme = {
  color: {
        text: "#000000"
    },
};

// define your custom text content object
const customContent = {
  submitButton: "Complete",
  loadingButton: "In Progress",
  loadingPrompt: "Please Wait",
  errorMessage: "Incorrect",
};

const MyApp = () => {
  const [successMessage, setSuccessMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const handleTaxProfileSubmitSuccess = useCallback((data) => {
    console.log(data)
    setSuccessMessage("success!");
  }, []);

  const handleTaxProfileSubmitError = useCallback((error) => {
    console.log(error);
    setErrorMessage("oh no error!");
  }, []);

  return (
    <div className="my_app">
      <TaxProfile
        theme={customTheme}
                content={customContent}
        onSubmitSuccess={handleTaxProfileSubmitSuccess}
        onSubmitError={handleTaxProfileSubmitError}
      />
      {successMessage && <div className="my_success_message">{successMessage}</div>}
      {errorMessage && <div className="my_error_message">{errorMessage}</div>}
    </div>
  );
};

import React, { useCallback, useState } from "react";
import { View, Text } from "react-native";
import { Abound } from "@withabound/react-native-client-sdk";

// authenticate the Abound Client SDK for an Abound user
const abound = new Abound({
  accessToken: "<<testAccessToken>>"
});

const { TaxProfile } = abound;

// define your custom theme object
const customTheme = {
  color: {
        text: "#000000"
    },
};

// define your custom text content object
const customContent = {
  submitButton: "Complete",
  loadingButton: "In Progress",
  loadingPrompt: "Please Wait",
  errorMessage: "Incorrect",
};

const MyApp = () => {
  const [successMessage, setSuccessMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const handleTaxProfileSubmitSuccess = useCallback((data) => {
    console.log(data)
    setSuccessMessage("success!");
  }, []);

  const handleTaxProfileSubmitError = useCallback((error) => {
    console.log(error);
    setErrorMessage("oh no error!");
  }, []);

  return (
    <View>
      <TaxProfile
        theme={customTheme}
                content={customContent}
        onSubmitSuccess={handleTaxProfileSubmitSuccess}
        onSubmitError={handleTaxProfileSubmitError}
      />
      {successMessage && <Text className="my_success_message">{successMessage}</Text>}
      {errorMessage && <Text className="my_error_message">{errorMessage}</Text>}
    </View>
  );
};

import SwiftUI
import Abound

struct MyApp: App {
    public static func main() {
            Abound.accessToken = "accessToken_testeyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBfaWQiOiJhcHBJZF90ZXN0NDhlN2VhYTMxNzVhNjYzNTRlMDA2MjY1NDJkMiIsImNyZWF0ZWRfdGltZXN0YW1wIjoxNjU1MDk2NDAwMDAwLCJlbnZpcm9ubWVudCI6Imh0dHBzOi8vc2FuZGJveC1hcGkud2l0aGFib3VuZC5jb20vdjIiLCJleHBpcmF0aW9uX3RpbWVzdGFtcCI6MzI1MDM3MDE2MDAwMDAsInN0YXR1cyI6IkFjdGl2ZSIsInVzZXJfaWQiOiJ1c2VySWRfdGVzdDI0YjA1ZDc2MWZmNThiNTkzMWJkMDc3NzhjNjdiNGU4MThlNCIsImlhdCI6MTY1NTEzMDMxM30.dOUIyxTRV0QDmrFiy-GoyhKc8qru3pymIcPS5cGTaNk"
        }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
   private var yourBrandsCustomTextContent = AboundCustomTextContent(
        submitButton:"Complete",
        loadingButton:"In Progress",
        loadingPrompt: "Please Wait",
        errorMessage: "Incorrect"
    );
  
   private var yourBrandsTheme = AboundTheme(
        text:AboundThemeText(size:"16px"),
        color: AboundThemeColor(background: "#FFFF00"),
        shape:AboundThemeShape(componentCornerRadius: "16px"),
        button: AboundThemeButton(colorActiveBackground: "#655BEF")
    )
  
    var body: some View {
        Text("Tax Profile")
        TaxProfile(theme: self.yourBrandsTheme)
    }
}

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

Properties

Rendering the Tax Profile Drop-In Component comes with the following properties:

Property	Description
`onSubmitError` (optional, function)	Callback function executed when the tax profile form errors during submission.
`onSubmitSuccess` (optional, function)	Callback function executed when the tax profile form is successfully submitted.
`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 defintions 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 Tax Profile Drop-In using the content parameter:

Property	Description
`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.
`errorMessage` (optional, string, default: `Invalid`)	The text shown next to the TIN input when the user's information has failed TIN validation (see On Submit Errors section).

On Submit Errors

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

Error Type	Description
Missing Required Fields	This is shown if the form is attempted to be submitted without all the required form fields present.
Invalid TIN	The IRS could not find a match between the submitted `firstName`, `lastName` and `TIN`.
Too Many TIN Verification Attempts	The form has been submitted too many times with an invalid name and TIN combo and the end-user must wait 24 hours to try agian. The limit is 3 tries in 24 hours.
Something Went Wrong	This is a system-failure error and should rarely, if ever, occur.