Order
This API object is provided to extensions registered for the extension targets that appear exclusively on the Order status page.
It extends the StandardApi and provides access to an order object.
Anchor to propertiesProperties
See the StandardApi examples for more information on how to use the API.
- Anchor to orderorderStatefulRemoteSubscribable< | undefined>required
Order information that's available post-checkout.
OrderStatusApi
- order
Order information that's available post-checkout.
StatefulRemoteSubscribable<Order | undefined>
export interface OrderStatusApi {
/**
* Order information that's available post-checkout.
*/
order: StatefulRemoteSubscribable<Order | undefined>;
}Order
Information about an order that was placed.
- id
A globally-unique identifier.
string - name
Unique identifier for the order that appears on the order.
string - cancelledAt
If cancelled, the time at which the order was cancelled.
string
export interface Order {
/**
* A globally-unique identifier.
* @example 'gid://shopify/Order/1'
*/
id: string;
/**
* Unique identifier for the order that appears on the order.
* @example '#1000'
*/
name: string;
/**
* If cancelled, the time at which the order was cancelled.
*/
cancelledAt?: string;
}Was this section helpful?
import {
reactExtension,
Banner,
useOrder,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'customer-account.order-status.customer-information.render-after',
() => <Extension />,
);
function Extension() {
const order = useOrder();
if (order) {
return (
<Banner>
Please include your order ID ({order.id})
in support requests
</Banner>
);
}
return null;
}
examples
React
import { reactExtension, Banner, useOrder, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'customer-account.order-status.customer-information.render-after', () => <Extension />, ); function Extension() { const order = useOrder(); if (order) { return ( <Banner> Please include your order ID ({order.id}) in support requests </Banner> ); } return null; }JavaScript
import { Banner, extension, } from '@shopify/ui-extensions/checkout'; export default extension( 'customer-account.order-status.customer-information.render-after', (root, {order}) => { let bannerShown = false; order.subscribe((order) => { if (order && !bannerShown) { root.appendChild( root.createComponent( Banner, undefined, `Please include your order ID (${order.id}) in support requests`, ), ); bannerShown = true; } }); }, );
