Migrate to the Polaris consent phone field component

The Polaris consent phone field component renders a phone number input tied to a customer consent policy. It replaces the previous ConsentPhoneField component and is available as <s-consent-phone-field> in API versions 2025-10 and newer.

The consent phone field shares the same property changes as the phone field component (readonly, accessory, removed and new properties). Refer to the phone field migration guide for details on those changes. This guide covers only the consent-specific differences.

Anchor to Updated propertiesUpdated properties

Anchor to policypolicy

The policy prop works the same as before. Set it to the consent policy this phone field is tied to (for example, "sms-marketing").

import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-consent-phone-field label="Phone" policy="sms-marketing" />
  );
}

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

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

function Extension() {
  return (
    <ConsentPhoneField
      label="Phone"
      policy="sms-marketing"
    />
  );
}

Anchor to New propertiesNew properties

The previous ConsentPhoneField was uncontrolled — it didn't accept a value prop, so apps couldn't drive the input from external state. The Polaris consent phone field adds controlled support through value. In addition to the new properties listed in the phone field migration guide, the consent phone field also introduces: