UI

The API for interacting with the extension’s UI.

import {
  reactExtension,
  useApi,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const {ui} = useApi();

  return (
    <Link
      overlay={
        <Modal
          id="my-modal"
          padding
          title="Return policy"
        >
          <TextBlock>
            We have a 30-day return policy.
          </TextBlock>
          <Button
            onPress={() =>
              ui.overlay.close('my-modal')
            }
          >
            Close
          </Button>
        </Modal>
      }
    >
      Return policy
    </Link>
  );
}

StandardApi

The base API object provided to `purchase` extension targets.

Docs_Standard_Ui

ui

Methods to interact with the extension’s UI.

Ui

overlay

Allows the extension to close an overlay programmatically. Supported overlay components are [Modal](/docs/api/checkout-ui-extensions/2024-10/components/overlays/modal), [Sheet](/docs/api/checkout-ui-extensions/2024-10/components/overlays/sheet) and [Popover](/docs/api/checkout-ui-extensions/2024-10/components/overlays/popover).

Overlay

close

Closes the overlay with the given ID.

Related

Targets
Components
Configuration
Tutorials

Examples

The API for interacting with the extension’s UI.

import {
  reactExtension,
  useApi,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const {ui} = useApi();

  return (
    <Link
      overlay={
        <Modal
          id="my-modal"
          padding
          title="Return policy"
        >
          <TextBlock>
            We have a 30-day return policy.
          </TextBlock>
          <Button
            onPress={() =>
              ui.overlay.close('my-modal')
            }
          >
            Close
          </Button>
        </Modal>
      }
    >
      Return policy
    </Link>
  );
}

import {
  extension,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root, {ui}) => {
    const modalFragment = root.createFragment();
    const modal = root.createComponent(
      Modal,
      {
        id: 'my-modal',
        padding: true,
        title: 'Return policy',
      },
      root.createComponent(
        TextBlock,
        {},
        'We have a 30-day return policy.',
      ),
      root.createComponent(
        Button,
        {
          onPress: () =>
            ui.overlay.close('my-modal'),
        },
        'Close',
      ),
    );
    modalFragment.appendChild(modal);

    const link = root.createComponent(
      Link,
      {
        overlay: modalFragment,
      },
      'Return policy',
    );

    root.appendChild(link);
  },
);

import {
  reactExtension,
  useApi,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const {ui} = useApi();

  return (
    <Link
      overlay={
        <Modal
          id="my-modal"
          padding
          title="Return policy"
        >
          <TextBlock>
            We have a 30-day return policy.
          </TextBlock>
          <Button
            onPress={() =>
              ui.overlay.close('my-modal')
            }
          >
            Close
          </Button>
        </Modal>
      }
    >
      Return policy
    </Link>
  );
}

import {
  extension,
  Button,
  Link,
  Modal,
  TextBlock,
} from '@shopify/ui-extensions/checkout';

export default extension(
  'purchase.checkout.block.render',
  (root, {ui}) => {
    const modalFragment = root.createFragment();
    const modal = root.createComponent(
      Modal,
      {
        id: 'my-modal',
        padding: true,
        title: 'Return policy',
      },
      root.createComponent(
        TextBlock,
        {},
        'We have a 30-day return policy.',
      ),
      root.createComponent(
        Button,
        {
          onPress: () =>
            ui.overlay.close('my-modal'),
        },
        'Close',
      ),
    );
    modalFragment.appendChild(modal);

    const link = root.createComponent(
      Link,
      {
        overlay: modalFragment,
      },
      'Return policy',
    );

    root.appendChild(link);
  },
);