Checkbox

Examples

• Basic Checkbox

  React

  import {
    reactExtension,
    Checkbox,
  } from '@shopify/ui-extensions-react/checkout';
  
  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );
  
  function Extension() {
    return (
      <Checkbox id="checkbox" name="checkbox">
        Save this information for next time
      </Checkbox>
    );
  }
  

  JS

  import {extension, Checkbox} from '@shopify/ui-extensions/checkout';
  
  export default extension('purchase.checkout.block.render', (root) => {
    const checkbox = root.createComponent(
      Checkbox,
      {id: 'checkbox', name: 'checkbox'},
      'Save this information for next time',
    );
  
    root.appendChild(checkbox);
  });
  

• Embedding links in checkbox components

  Description

  To provide buyers with additional information or references, couple it with link components seamlessly within checkbox components. This can be done by including links as part of the checkbox label in the checkbox. This will provide an easy way to access relevant content that buyers may need.

  React

  import {
    reactExtension,
    Checkbox,
    Link,
  } from '@shopify/ui-extensions-react/checkout';
  
  export default reactExtension(
    'purchase.checkout.block.render',
    () => <CheckBoxLinks />,
  );
  
  export const CheckBoxLinks = () => {
    return (
      <Checkbox
        id="checkbox1"
        name="checkboxchoices"
      >
        I agree to the{' '}
        <Link to="https://www.shopify.com">
          terms and conditions
        </Link>{' '}
        and{' '}
        <Link to="https://www.shopify.com">
          privacy policy
        </Link>{' '}
        of the store related to pricing, payment,
        shipping, returns, and liability set forth
        by Ride Sports
      </Checkbox>
    );
  };
  

  JavaScript

  import {
    extension,
    Checkbox,
    Link,
  } from '@shopify/ui-extensions/checkout';
  
  export default extension(
    'purchase.checkout.block.render',
    (root) => {
      const checkbox = root.createComponent(
        Checkbox,
        {
          id: 'checkbox1',
          name: 'checkboxchoices',
        },
        [
          ' I agree to the ',
          root.createComponent(
            Link,
            {to: 'https://www.shopify.com'},
            'terms and conditions',
          ),
          ' and ',
          root.createComponent(
            Link,
            {to: 'https://www.shopify.com'},
            'privacy policy',
          ),
          ' of the store related to pricing, payment, shipping, returns, and liability set forth by Ride Sports.',
        ],
      );
  
      root.appendChild(checkbox);
    },
  );