Appearance
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 order component with the AuthentifiedProvider.
tsx
import { AuthentifiedProvider } from "@authentified/react-widget"
import { OrderComponent } from "./order"
export const OrderPage = ({ order }) => {
return (
<AuthentifiedProvider>
<OrderComponent order={order} />
</AuthentifiedProvider>
)
}1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2. Add the Button
Now that the AuthentifiedProvider is in place, you can add the button above or below the order details.
tsx
import { AuthentifiedProvider } from "@authentified/react-widget"
import { OrderList } from "./orderList"
export const OrderPage = ({ order, customer, shop }) => {
return (
<AuthentifiedProvider>
<AuthentifiedButton scope="order" orderId={order.id} shopId={shop.id} customerId={customer.id}>
<OrderComponent order={order} />
</AuthentifiedProvider>
)
}1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
Offline Orders
Offline orders are not supported when scope="order".