Draft Order APIAPIs
APIs
The Draft Order API provides an extension with data about the current draft order.
Supporting targets
Anchor to draftorderapiDraftOrderApi
- numberrequired
The unique identifier for the draft order
- Anchor to namenamestringrequired
The name of the draft order
- Anchor to customerIdcustomerIdnumber
The unique identifier of the customer associated with the draft order
DraftOrderApiContent
- customerId
The unique identifier of the customer associated with the draft order
number - id
The unique identifier for the draft order
number - name
The name of the draft order
string
export interface DraftOrderApiContent {
/**
* The unique identifier for the draft order
*/
id: number;
/**
* The name of the draft order
*/
name: string;
/**
* The unique identifier of the customer associated with the draft order
*/
customerId?: number;
}Was this section helpful?
Anchor to examplesExamples
Examples of using the Draft Order API.
Anchor to example-retrieve-the-id-of-the-draft-order.Retrieve the ID of the draft order.
Was this section helpful?
Retrieve the ID of the draft order.
import React from 'react';
import {
Text,
Screen,
ScrollView,
Navigator,
reactExtension,
useApi,
} from '@shopify/ui-extensions-react/point-of-sale';
const Modal = () => {
const api = useApi<'pos.draft-order-details.action.render'>();
return (
<Navigator>
<Screen name="DraftOrderDetailsAction" title="Draft Order Details Action">
<ScrollView>
<Text>{`Order ID: ${api.draftOrder.id}`}</Text>
</ScrollView>
</Screen>
</Navigator>
);
};
export default reactExtension('pos.draft-order-details.action.render', () => (
<Modal />
));
examples
Retrieve the ID of the draft order.
React
import React from 'react'; import { Text, Screen, ScrollView, Navigator, reactExtension, useApi, } from '@shopify/ui-extensions-react/point-of-sale'; const Modal = () => { const api = useApi<'pos.draft-order-details.action.render'>(); return ( <Navigator> <Screen name="DraftOrderDetailsAction" title="Draft Order Details Action"> <ScrollView> <Text>{`Order ID: ${api.draftOrder.id}`}</Text> </ScrollView> </Screen> </Navigator> ); }; export default reactExtension('pos.draft-order-details.action.render', () => ( <Modal /> ));TS
import { Navigator, Screen, ScrollView, Text, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.draft-order-details.action.render', (root, api) => { const navigator = root.createComponent(Navigator); const screen = root.createComponent(Screen, { name: 'DraftOrderDetailsAction', title: 'Draft Order Details Action', }); const scrollView = root.createComponent(ScrollView); const text = root.createComponent(Text); text.append(`ID for current draft order screen: ${api.draftOrder.id}`); scrollView.append(text); screen.append(scrollView); navigator.append(screen); root.append(navigator); }, );