Appearance
Props
Every <div data-authentified-widget> reads its configuration from data-* attributes. The required attributes depend on data-scope — line item, order, or offline.
data-source is independent of data-scope: it tells Authentified how the shop integrates so the right backend tables are scanned. A Shopify App shop can still sell offline; a REST API shop can still consign a whole order.
Common attributes
These are required on every widget marker, regardless of data-scope.
| Attribute | Values | Default | Description |
|---|---|---|---|
data-scope | "lineItem" | "order" | "offline" | — | Required. What's being consigned: "lineItem" for one item per marker, "order" for the whole order, "offline" for a POS / in-person sale. |
data-shop-id | string | — | The Authentified shop ID that owns the order. |
data-customer-id | string | — | The ID of the customer associated with the order. |
data-source | "shopify" | "api" | — | Required. How the shop integrates with Authentified. "shopify" for shops that have installed the Authentified Shopify App, "api" for shops integrating directly with the Authentified REST API. |
When data-scope="lineItem"
Line-item markers require data-order-id and data-line-item-id. data-product-id is optional. The rules are the same for data-source="shopify" and data-source="api".
| Attribute | Required | Description |
|---|---|---|
data-order-id | yes | The ID of the order containing the item. |
data-line-item-id | yes | The line item ID for the item being consigned. |
data-product-id | no | The ID of the product associated with the line item. |
When data-scope="order"
Order-level markers require data-order-id. The customer picks which items to consign on the Authentified flow. Any item-level attributes are ignored.
| Attribute | Required | Description |
|---|---|---|
data-order-id | yes | The ID of the order being consigned. |
data-product-id | — | Ignored at order scope. |
data-line-item-id | — | Ignored at order scope. |
data-variant-id | — | Ignored at order scope. |
When data-scope="offline"
Offline markers cover POS / in-person sales that have no online order. They require data-order-id (your POS / receipt reference) and data-variant-id. data-product-id is optional.
| Attribute | Required | Description |
|---|---|---|
data-order-id | yes | Your POS / receipt reference (receipt number, transaction ID, etc.). |
data-variant-id | yes | Variant ID for the purchased item. |
data-product-id | no | The ID of the product associated with the line item. |
data-line-item-id | — | Ignored at offline scope. |
Rendering attributes
These optional attributes control how the widget renders.
| Attribute | Values | Default | Description |
|---|---|---|---|
data-shadow-dom | "true" | "false" | false | Render the button inside a shadow DOM root for full style isolation. Defaults to light DOM so host-page CSS variables apply. |
data-base-url | URL | production Authentified URL | Override the base URL the button links to. Useful for staging environments. |