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

policy

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

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.

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.

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.

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.

toggles

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

Related

• ConsentCheckbox