UI

Examples

• React

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

• React

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

  JavaScript

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