Usage

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

Use scope="offline" for POS / in-person sales that don't have an online order — receipts, transaction logs, anything where the shop captures the sale outside of an e-commerce checkout.

1. Add the Provider

Wrap your offline order list with the AuthentifiedProvider.

import { AuthentifiedProvider } from "@authentified/react-widget"
import { OfflineOrderListComponent } from "./offlineOrderList"

export const OfflineOrdersPage = ({ orders }) => {
  return (
    <AuthentifiedProvider>
      <OfflineOrderListComponent orders={orders} />
    </AuthentifiedProvider>
  )
}

2. Add the Button

Now that the AuthentifiedProvider is in place, add an AuthentifiedButton next to each offline line item. Pass scope="offline", the orderId (your POS / receipt reference), and the variantId. 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) along with the variant and your POS / receipt reference.

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

export const OfflineOrderListComponent = ({ orders, shop, customer }) => {
  return (
    <section>
      {orders.map((order) => (
        <article key={order.id}>
          <h2>{order.id}</h2>
          {order.items.map((item) => (
            <AuthentifiedButton
              key={item.id}
              scope="offline"
              source="shopify"
              customerId={customer.id}
              orderId={order.id}
              productId={item.product.id}
              shopId={shop.id}
              variantId={item.variant.id}
            />
          ))}
        </article>
      ))}
    </section>
  )
}