POSBlockRow

Render a POSBlockRow in a POSBlock

import React from 'react';
import {
  reactExtension,
  useApi,
  POSBlock,
  POSBlockRow,
  Text,
} from '@shopify/ui-extensions-react/point-of-sale';

const PostPurchaseBlock = () => {
  const api =
    useApi<'pos.purchase.post.block.render'>();

  return (
    <POSBlock>
      <POSBlockRow>
        <Text>Hello, world!</Text>
      </POSBlockRow>
    </POSBlock>
  );
};

export default reactExtension(
  'pos.purchase.post.block.render',
  () => <PostPurchaseBlock />,
);

import {
  POSBlock,
  POSBlockRow,
  extension,
} from '@shopify/ui-extensions/point-of-sale';

export default extension(
  'pos.purchase.post.block.render',
  (root, api) => {
    const posBlock =
      root.createComponent(POSBlock);

    const posBlockRow =
      root.createComponent(POSBlockRow);

    const text = root.createText('Hello, world!');

    posBlockRow.append(text);
    posBlock.append(posBlockRow);
    root.append(posBlock);
  },
);