Usage — Line item level

At line-item level, you place a marker element next to each item in a customer's order. The widget mounts a "Resell with Authentified" button into each one and lights it up as "Resold with Authentified" once the resale completes.

1. Load the widget script

Add the script once per page. It auto-initialises on DOMContentLoaded and scans the page for any element marked with data-authentified-widget.

<script src="https://unpkg.com/@authentified/js-widget@alpha/dist/umd/index.js" async></script>

2. Add a marker per line item

Drop a <div data-authentified-widget> next to each item with data-scope="lineItem", the data-order-id, and the data-line-item-id. Pick the tab below that matches how your shop integrates with Authentified — the attributes are the same, only data-source changes.

For shops that have installed the Authentified Shopify App, set data-source="shopify" (the default) and use the Shopify data-line-item-id to identify the item.

<ul>
  {% for line_item in order.line_items %}
    <li>
      <h3>{{ line_item.product.title }}</h3>
      <div
        data-authentified-widget
        data-scope="lineItem"
        data-source="shopify"
        data-product-id="{{ line_item.product.id }}"
        data-line-item-id="{{ line_item.id }}"
        data-order-id="{{ order.id }}"
        data-customer-id="{{ customer.id }}"
        data-shop-id="{{ shop.id }}"
      ></div>
    </li>
  {% endfor %}
</ul>

NOTE

If you're rendering orders via the Shopify Storefront API, you won't have a Shopify line item ID. You'll need to fetch line items from the Admin API (or your backend) before rendering the marker.

See the Props page for the full list of required and optional attributes.