ConsentCheckbox

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.

import React from 'react';

import {
  reactExtension,
  ConsentCheckbox,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <ConsentCheckbox policy="sms-marketing">
      Text me with news and offers
    </ConsentCheckbox>
  );
}

import {extension, ConsentCheckbox} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const consentCheckbox = root.createComponent(
    ConsentCheckbox,
    {policy: 'sms-marketing'},
    'Text me with news and promotions',
  );

  root.appendChild(consentCheckbox);
});

ConsentCheckboxProps

ConsentCheckboxProps

accessibilityLabel

A label used for buyers using assistive technologies. When set, any `children` supplied to this component will not be announced to screen reader users.

checked

Whether the checkbox is active.

disabled

Whether the checkbox can be changed.

error

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

id

A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.

name

An identifier for the field that is unique within the nearest containing `Form` component.

onChange

A callback that is run whenever the checkbox is changed. This callback is called with a boolean indicating whether the checkbox should now be active or inactive. This component is [controlled](https://reactjs.org/docs/forms.html#controlled-components), so you must store this value in state and reflect it back in the `checked` or `value` props.

policy

The policy for which buyer consent is being collected for. `sms-marketing`: Represents the policy for SMS marketing consent.

toggles

The component's identifier whose visibility will be toggled when this component is actioned.

Related

• ConsentCheckbox

Examples

Use buyer consent checkboxes for collecting the buyer's approval for a given policy.

import React from 'react';

import {
  reactExtension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <BlockStack>
      <ConsentCheckbox policy="sms-marketing">
        Text me with news and offers
      </ConsentCheckbox>
      <InlineStack
        inlineAlignment="start"
        padding={[
          'none',
          'none',
          'none',
          'tight',
        ]}
      >
        <InlineSpacer spacing="extraTight" />
        <ConsentPhoneField
          label="Phone"
          policy="sms-marketing"
        />
      </InlineStack>
    </BlockStack>
  );
}

import {
  extension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const consentCheckbox = root.createComponent(
    ConsentCheckbox,
    {
      policy: 'sms-marketing',
    },
    'Text me with news and offers',
  );

  const inlineSpacer = root.createComponent(InlineSpacer, {
    spacing: 'extraTight',
  });

  const consentPhoneField = root.createComponent(ConsentPhoneField, {
    label: 'Phone',
    policy: 'sms-marketing',
  });

  const inlineStack = root.createComponent(
    InlineStack,
    {
      inlineAlignment: 'start',
      padding: ['none', 'none', 'none', 'tight'],
    },
    [inlineSpacer, consentPhoneField],
  );

  const layout = root.createComponent(BlockStack, undefined, [
    consentCheckbox,
    inlineStack,
  ]);

  root.appendChild(layout);
});

import React from 'react';

import {
  reactExtension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  return (
    <BlockStack>
      <ConsentCheckbox policy="sms-marketing">
        Text me with news and offers
      </ConsentCheckbox>
      <InlineStack
        inlineAlignment="start"
        padding={[
          'none',
          'none',
          'none',
          'tight',
        ]}
      >
        <InlineSpacer spacing="extraTight" />
        <ConsentPhoneField
          label="Phone"
          policy="sms-marketing"
        />
      </InlineStack>
    </BlockStack>
  );
}

import {
  extension,
  BlockStack,
  ConsentCheckbox,
  ConsentPhoneField,
  InlineStack,
  InlineSpacer,
} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
  const consentCheckbox = root.createComponent(
    ConsentCheckbox,
    {
      policy: 'sms-marketing',
    },
    'Text me with news and offers',
  );

  const inlineSpacer = root.createComponent(InlineSpacer, {
    spacing: 'extraTight',
  });

  const consentPhoneField = root.createComponent(ConsentPhoneField, {
    label: 'Phone',
    policy: 'sms-marketing',
  });

  const inlineStack = root.createComponent(
    InlineStack,
    {
      inlineAlignment: 'start',
      padding: ['none', 'none', 'none', 'tight'],
    },
    [inlineSpacer, consentPhoneField],
  );

  const layout = root.createComponent(BlockStack, undefined, [
    consentCheckbox,
    inlineStack,
  ]);

  root.appendChild(layout);
});