Working with Check Components

What is a Component?

Check Components are embeddable flows that let you layer payroll building blocks into your product. You can pick and choose from a variety of Components that allow you to easily onboard employees, run payroll, generate reports, and set up third-party integrations such as Quickbooks Online. The full list of live Components can be found in the Components section of our API.

You will need an API key to use Components. If you don't have one already, request one here.

How should Components be used?

Components are a great way to speed up your time to market and can save your team weeks of R&D and engineering effort. With Components, your team can focus the bulk of your engineering cycles on building the differentiating factors of your product and leverage Check to fill in the remaining gaps. We’ve built compliant, well-tested, and user-friendly Components of elements that are common to most payroll products.

Components are a great stepping stone on your path to payroll. If you require more customization down the line, Components are easy to swap out for custom UI as your product evolves.

How can Components be embedded?

Components can be embedded in a number of places in your app, such as a sidebar, a modal, or on the app page itself. We're going to walk through two design patterns with suggestions on when to use them.

Design Pattern #1: Embed in a modal

In the example below, basic bank account information is displayed for quick access. However, when the user needs to change their payment method (which doesn't happen often), the Update Payment Method button will trigger the Payment Setup Component to load inside a modal.

📘

We suggest embedding Components that are not used regularly by your customers inside a modal.

1. User clicks on Update Payment Method

2. Payment Setup Component loads in a modal

Design Pattern #2: Embed directly onto an app’s page

In the example below, the Paystub Component contains useful information about an employee's pay. This kind of information should be surfaced directly on a page and not hidden in a modal for a user to find.

📘

For Components that your users will interact with frequently, we suggest embedding them directly onto your app's page.