Usage

The Authentified React Widget comes with 2 components: A provider, and a button. The provider wraps your order list, and provides the ability to check the resale status of items within it.

1. Add the Provider

Wrap your line items with the AuthentifiedProvider.

import { AuthentifiedProvider } from "@authentified/react-widget"
import { OrderListComponent } from "./orderList"

export const OrdersPage = ({ orders }) => {
  return (
    <AuthentifiedProvider>
      <OrderListComponent orders={orders} />
    </AuthentifiedProvider>
  )
}

2. Add the button

Now that the AuthentifiedProvider is in place, add an AuthentifiedButton next to each line item. Pass scope="lineItem", the orderId, and the lineItemId. Pick the tab below that matches how your shop integrates with Authentified — the props are the same, only source changes.

For shops that have installed the Authentified Shopify App, pass source="shopify" (the default) and supply the Shopify lineItemId for each item.

import { AuthentifiedProvider, AuthentifiedButton } from "@authentified/react-widget"

export const OrderListComponent = ({ orders, shop, customer }) => {
  return (
    <section>
      {orders.map((order) => (
        <article key={order.id}>
          <h2>{order.id}</h2>
          {order.lineItems.map((lineItem) => (
            <AuthentifiedButton
              key={lineItem.id}
              scope="lineItem"
              source="shopify"
              customerId={customer.id}
              lineItemId={lineItem.id}
              orderId={order.id}
              productId={lineItem.product.id}
              shopId={shop.id}
            />
          ))}
        </article>
      ))}
    </section>
  )
}

NOTE

If you're rendering orders via the Shopify Storefront API, OrderLineItem doesn't expose a Shopify line item id. You'll need to fetch line items from the Admin API (or your backend) before rendering the button.