POSBlockcomponent
component
The provides a surface on the specified extension target as an entry point to an extension. Note that the title displayed on this is dependent on the description of the extension.
Anchor to posblockPOSBlock
- Anchor to actionaction{ title: string; disabled?: boolean; onPress: () => void; }
Sets an optional action button to be displayed on the
.
POSBlockProps
Renders a `POSBlock`. Note that the text displayed on this `POSBlock` is dependent on the description of the extension. A `POSBlock` only accepts `POSBlockRow` as children.
- action
Sets an optional action button to be displayed on the `POSBlock`.
{ title: string; disabled?: boolean; onPress: () => void; }
export interface POSBlockProps {
/**
* Sets an optional action button to be displayed on the `POSBlock`.
*/
action?: {
/**
* The title of the action button.
*/
title: string;
/**
* Whether the action button is disabled.
* @defaultValue false
*/
disabled?: boolean;
/**
* A callback that is called when the action button is pressed.
*/
onPress: () => void;
};
}Was this section helpful?
Render a POSBlock in post purchase
import React from 'react';
import {
reactExtension,
useApi,
POSBlock,
} from '@shopify/ui-extensions-react/point-of-sale';
const PostPurchaseBlock = () => {
const api =
useApi<'pos.purchase.post.block.render'>();
return (
<POSBlock
action={{
title: 'A toast message',
onPress: () => {
api.Toast.show('A toast message');
},
}}
/>
);
};
export default reactExtension(
'pos.purchase.post.block.render',
() => <PostPurchaseBlock />,
);
examples
Render a POSBlock in post purchase
React
import React from 'react'; import { reactExtension, useApi, POSBlock, } from '@shopify/ui-extensions-react/point-of-sale'; const PostPurchaseBlock = () => { const api = useApi<'pos.purchase.post.block.render'>(); return ( <POSBlock action={{ title: 'A toast message', onPress: () => { api.Toast.show('A toast message'); }, }} /> ); }; export default reactExtension( 'pos.purchase.post.block.render', () => <PostPurchaseBlock />, );TS
import { POSBlock, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.purchase.post.block.render', (root, api) => { const posBlock = root.createComponent( POSBlock, { action: { title: 'A toast message', onPress: () => { api.Toast.show('A toast message'); }, }, }, ); root.append(posBlock); }, );
Preview
