Overview
Component to render detailed information about a business. You will need to first create a business via Business API to get the business-id required for this component.
Usage
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
<title>justifi-business-details</title>
<script
type="module"
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.esm.js"
></script>
<script
nomodule
src="https://cdn.jsdelivr.net/npm/@justifi/webcomponents@6.7.3/dist/webcomponents/webcomponents.js"
></script>
<style>
::part(font-family) {
font-family: georgia;
}
::part(color) {
color: darkslategray;
}
::part(background-color) {
background-color: transparent;
}
</style>
</head>
<body>
<justifi-business-details business-id="biz_123" auth-token="authToken" />
</body>
<script>
(function () {
const businessDetails = document.querySelector('justifi-business-details');
businessDetails.addEventListener('error-event', (event) => {
// here is where you would handle the error
console.error('error-event', event.detail);
});
})();
</script>
</html>
Props, Events & Methods
| Name | Type | Required | Default | Description |
|---|
auth-token | string | Yes | — | |
business-id | string | Yes | — | |
Events
error-event: Emits when API requests fail or validation errors occur; payload includes field-level hints.
Theming & Layout
| Part | Description | DOM target |
|---|
::part(skeleton) | | — |
::part(heading1) | | — |
::part(heading2) | | — |
::part(link) | | — |
::part(text) | | — |
Example Usage