Choose a version:

ConsentCheckbox

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

Anchor to consentcheckboxpropsConsentCheckboxProps

Anchor to policy policy "sms-marketing" required: The policy for which buyer consent is being collected for.

sms-marketing: Represents the policy for SMS marketing consent.
Anchor to id id string: A unique identifier for the field. When no id is set, a globally unique value will be used instead.
Anchor to name name string: An identifier for the field that is unique within the nearest containing Form component.
Anchor to checked checked boolean: Whether the checkbox is active.
Anchor to disabled disabled boolean: Whether the checkbox can be changed.
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to accessibilityLabel accessibilityLabel string: A label used for buyers using assistive technologies. When set, any children supplied to this component will not be announced to screen reader users.
Anchor to onChange onChange (value: boolean) => void: 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, so you must store this value in state and reflect it back in the checked or value props.
Anchor to toggles toggles string: The component's identifier whose visibility will be toggled when this component is actioned.

ConsentCheckboxProps

policy
The policy for which buyer consent is being collected for. `sms-marketing`: Represents the policy for SMS marketing consent.
```
"sms-marketing"
```
id
A unique identifier for the field. When no `id` is set, a globally unique value will be used instead.
```
string
```
name
An identifier for the field that is unique within the nearest containing `Form` component.
```
string
```
checked
Whether the checkbox is active.
```
boolean
```
disabled
Whether the checkbox can be changed.
```
boolean
```
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.
```
string
```
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.
```
string
```
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.
```
(value: boolean) => void
```
toggles
The component's identifier whose visibility will be toggled when this component is actioned.
```
string
```

export interface ConsentCheckboxProps extends Omit<CheckboxProps, 'value'> {
  /**
   * The policy for which buyer consent is being collected for.
   *
   * `sms-marketing`: Represents the policy for SMS marketing consent.
   */
  policy: 'sms-marketing';
}

Was this section helpful?

Basic ConsentCheckbox

import React from 'react';

import {

reactExtension,

ConsentCheckbox,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

return (

Text me with news and offers

</ConsentCheckbox>

);

}

examples

Basic ConsentCheckbox

React

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

JS

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

Preview

Anchor to relatedRelated

ComponentConsentCheckbox