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
.
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
