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.
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>
);
}
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>
);
}
