Adding a Tax Documents Drop-In

Prerequisites

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

Rendering and Styling the Tax Documents Drop-In Component

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

<html>
    <head>
        <title>My App</title>
    </head>
    <body>
        <!-- target parent node to render UI -->
        <h2>2022</h2>
        <div id="abound-ui-wrapper-2022"></div>
        <h2>2021</h2>
        <div id="abound-ui-wrapper-2021"></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",
                    weight: "bold",
                },
            };

            // render drop-in component
            abound.renderTaxDocuments({
               year: "2022",
               targetId: "abound-ui-wrapper-2022",
               theme: customTheme,
            });

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

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

const abound = new Abound({
  accessToken: "<<testAccessToken>>"
});

const { TaxDocuments } = abound;

const customTheme = {
  color: {
    text: "#000000",
  },
};

const MyApp = () => {

  return (
    <div className="my_app">
        <h2>2022</h2>
      <TaxDocuments
            theme={customTheme}
                year="2022"
      />
      <h2>2021</h2>
      <TaxDocuments
        theme={customTheme}
                year="2021"
      />
    </div>
  );
};

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

const abound = new Abound({
  accessToken: "<<testAccessToken>>"
});

const { TaxDocuments } = abound;

const customTheme = {
  text: {
    fontColor: "#000000",
  },
};

const MyApp = () => {
  return (
    <View>
        <Text>2022</Text>
      <TaxDocuments
        theme={customTheme}
                year="2022"
      />
      <Text>2021</Text>
            <TaxDocuments
        theme={customTheme}
                year="2021"
      />
    </View>
  );
};

import SwiftUI
import Abound

@main
struct MyApp: App {
    
    public static func main() {
        Abound.accessToken = "<<testAccessToken>>"
    }

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    
    private var theme = AboundThemeConfig( color: AboundThemeColor(text:"#000000", borderColor: "#AAAAAA"))
    private func onSuccess() {
        //do on success logic
    }
  
    private func onError(error: TaxDocumentError) {
        //do on error logic
    }
  
    var body: some View {
        Text("Tax Document")
        AboundTaxDocuments(year: '2022', theme: self.theme, onSuccess: self.onSuccess, onError: self.onError)
    }
}

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

Properties

Rendering the Tax Documents Drop-in Component comes with the following properties:

Property	Description
`targetId` (string, required for js)	The value of a node's `id` attribute where the UI will be rendered.
`theme` (object, optional)	Override default styling defintions with your own brand's styling.
`year` (string, required)	A parameter to filter Tax Documents for a specific tax year.