Skip to main content

ConsentCheckbox

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

Anchor to consentcheckboxpropsConsentCheckboxProps

"sms-marketing"
required

The policy for which buyer consent is being collected for.

sms-marketing: Represents the policy for SMS marketing consent.

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.

boolean

Whether the checkbox is active.

boolean

Whether the checkbox can be changed.

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.

string

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

string

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

(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.

string

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

Was this section helpful?

Basic ConsentCheckbox

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

Preview

Use buyer consent checkboxes in conjunction with buyer consent phone fields for collecting the buyer's approval for a given policy.

The consent phone field is not required in order to use the consent checkbox component. This example demonstrates how they can be used together.

Anchor to example-consentcheckbox-with-consentphonefieldConsentCheckbox with ConsentPhoneField
Was this section helpful?

ConsentCheckbox with ConsentPhoneField

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

Preview