POSBlock

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.

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

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

POSBlock

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