useSettings

Returns the setting values defined by the merchant for the extension.

import React from 'react';
import {
  render,
  Banner,
  useSettings,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => (
  
));

function Extension() {
  const {banner_title} = useSettings();
  return ;
}

UseSettingsGeneratedType

Returns the setting values defined by the merchant for the extension.

Returns: Partial<Settings extends ExtensionSettings>

export function useSettings< Settings extends ExtensionSettings, >(): Partial<Settings> { const settings = useSubscription(useApi().settings); return settings as Settings; }

ExtensionSettings

The merchant-defined setting values for the extension.

[key: string]

Related

• Configuration
• Settings Definition
• Settings Examples

Examples

Returns the setting values defined by the merchant for the extension.

You can define settings that merchants can edit within the checkout editor. See [settings](/docs/api/checkout-ui-extensions/configuration#settings-definition) for more information on how to define these.

type = "checkout_ui_extension"
name = "my-checkout-extension"

extension_points = [
  'Checkout::Dynamic::Render'
]

[settings]
  [[settings.fields]]
  key = "banner_title"
  type = "single_line_text_field"
  name = "Banner title"
  description = "Enter a title for the banner."
    [[settings.fields.validations]]
    name = "min"
    value = "5"
    [[settings.fields.validations]]
    name = "max"
    value = "20"

type = "checkout_ui_extension"
name = "my-checkout-extension"

extension_points = [
  'Checkout::Dynamic::Render'
]

[settings]
  [[settings.fields]]
  key = "banner_title"
  type = "single_line_text_field"
  name = "Banner title"
  description = "Enter a title for the banner."
    [[settings.fields.validations]]
    name = "min"
    value = "5"
    [[settings.fields.validations]]
    name = "max"
    value = "20"