Private preview
Product tax code selector Private preview
Allow connected accounts to classify products with a tax code.
The product tax code selector component lets your connected accounts classify their products. Connected accounts typically interact with this component on the product page within your platform. This component suits both software platforms and marketplaces for integration into their user interfaces. Connected accounts can use the product tax code selector to choose the appropriate tax code for each product. Either the platform or the connected accounts can be liable for tax collection.
If you’re a platform integrating Stripe Tax, you must specify the tax code of a product for Stripe Tax to calculate taxes correctly.
The Product tax code selector component uses the Tax codes API to display all available tax codes. When a connected account selects a new product tax code, an event handler is called that you can listen to. Use this to update the tax code of a product within your platform. All tax codes in this component are translated into all languages that Connect embedded components support.
Integrate the product tax code selector component
When creating an Account Session, enable the product tax code selector component by specifying product_tax_code_selector in the components parameter.
Command Line
Select a language
cURL
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
After creating the account session and initializing Connect.js, render the product tax code selector component in the front end:
productPage.jsx
Select a language
React
HTML + JavaScript
No results
// Include this React component
import {
ConnectProductTaxCodeSelector,
ConnectComponentsProvider,
} from "@stripe/react-connect-js";
return (
<ConnectComponentsProvider connectInstance={stripeConnectInstance}>
<div>
<h2>Tax code</h2>
<ConnectProductTaxCodeSelector
// Optional
// onTaxCodeSelect={(id: string | null, {analyticsName: string} | null) => {console.log({id, analyticsName})}}
// hideDescription={false}
// disabled={false}
// initialTaxCode={"txcd_99999999"}
/>
</div>
</ConnectComponentsProvider>
);
| Method | Type | Description | Default | Required or optional |
|---|---|---|---|---|
setOnTaxCodeSelect | (id: string | null, {analyticsName: string} | null) => void | A callback function that accepts the ID and the name of the tax code when the user selects one, or null if the user clears their selction. Use the analyticsName field for analytics purposes only, as its value is subject to change or removal. Call Retrieve a tax code for details about the tax code. | undefined | Optional |
setHideDescription | boolean | Set to true to hide the tax code description in the product tax code selector. | false | Optional |
setDisabled | boolean | Set to true to disable the dropdown of the product tax code selector. | false | Optional |
setInitialTaxCode | string | Set to one of Stripe’s supported tax codes such as txcd_10000000 to auto-select an initial tax code. | undefined | Optional |
Request early access Private preview
Sign in or register for Stripe to request access to this Connect embedded component preview.