Skip to main content

POSBlock
component

The POSBlock provides a surface on the specified extension target as an entry point to an extension. Note that the title displayed on this POSBlock is dependent on the description of the extension.

Anchor to posblockPOSBlock

Anchor to action
action
{ title: string; disabled?: boolean; onPress: () => void; }

Sets an optional action button to be displayed on the POSBlock.

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 />,
);

Preview