UIAPI
API
The API for interacting with the extension’s UI.
Anchor to standardapiStandardApi
The base API object provided to purchase extension targets.
- required
Methods to interact with the extension’s UI.
Docs_Standard_Ui
- ui
Methods to interact with the extension’s UI.
Ui
export interface Docs_Standard_Ui extends Pick<StandardApi, 'ui'> {}Ui
- overlay
Allows the extension to close an overlay programmatically. Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/unstable/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/unstable/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/unstable/components/overlays/popover).
Overlay
export interface Ui {
/**
* Allows the extension to close an overlay programmatically.
*
* Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/unstable/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/unstable/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/unstable/components/overlays/popover).
*/
overlay: Overlay;
}Overlay
- close
Closes the overlay with the given ID.
(overlayId: string) => void
interface Overlay {
/**
* Closes the overlay with the given ID.
*/
close(overlayId: string): void;
}Was this section helpful?
React
import {
reactExtension,
useApi,
Button,
Link,
Modal,
TextBlock,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {ui} = useApi();
return (
<Link
overlay={
<Modal
id="my-modal"
padding
title="Return policy"
>
<TextBlock>
We have a 30-day return policy.
</TextBlock>
<Button
onPress={() =>
ui.overlay.close('my-modal')
}
>
Close
</Button>
</Modal>
}
>
Return policy
</Link>
);
}
examples
React
import { reactExtension, useApi, Button, Link, Modal, TextBlock, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const {ui} = useApi(); return ( <Link overlay={ <Modal id="my-modal" padding title="Return policy" > <TextBlock> We have a 30-day return policy. </TextBlock> <Button onPress={() => ui.overlay.close('my-modal') } > Close </Button> </Modal> } > Return policy </Link> ); }
Anchor to examplesExamples
Examples
Was this section helpful?
import {
reactExtension,
useApi,
Button,
Link,
Modal,
TextBlock,
} from '@shopify/ui-extensions-react/checkout';
export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);
function Extension() {
const {ui} = useApi();
return (
<Link
overlay={
<Modal
id="my-modal"
padding
title="Return policy"
>
<TextBlock>
We have a 30-day return policy.
</TextBlock>
<Button
onPress={() =>
ui.overlay.close('my-modal')
}
>
Close
</Button>
</Modal>
}
>
Return policy
</Link>
);
}
examples
React
import { reactExtension, useApi, Button, Link, Modal, TextBlock, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => <Extension />, ); function Extension() { const {ui} = useApi(); return ( <Link overlay={ <Modal id="my-modal" padding title="Return policy" > <TextBlock> We have a 30-day return policy. </TextBlock> <Button onPress={() => ui.overlay.close('my-modal') } > Close </Button> </Modal> } > Return policy </Link> ); }JavaScript
import { extension, Button, Link, Modal, TextBlock, } from '@shopify/ui-extensions/checkout'; export default extension( 'purchase.checkout.block.render', (root, {ui}) => { const modalFragment = root.createFragment(); const modal = root.createComponent( Modal, { id: 'my-modal', padding: true, title: 'Return policy', }, root.createComponent( TextBlock, {}, 'We have a 30-day return policy.', ), root.createComponent( Button, { onPress: () => ui.overlay.close('my-modal'), }, 'Close', ), ); modalFragment.appendChild(modal); const link = root.createComponent( Link, { overlay: modalFragment, }, 'Return policy', ); root.appendChild(link); }, );
