ktyr report

Checkout.jsx

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

export default reactExtension("purchase.checkout.block.render", () => (
    <Extension />
));
function Extension() {
    const { title,desc,banner_status } = useSettings();
    const _title = title ? title : '';
    const _desc = desc ? desc : '';
    const _banner_status = banner_status ? banner_status : 'warning';
    const descs = _desc.split("\n").map((item,i)=>{
    return <TextBlock size="base" appearance={_banner_status}>{item}</TextBlock>
    });
    return (
    <Banner title={_title} status={_banner_status}>
        {descs}
    </Banner>
    );
}

shopify.extension.tomlに追記

[extensions.settings]
[[extensions.settings.fields]]
key = "title"
type = "single_line_text_field"
name = "表示するタイトル"
description = "表示するタイトルを入力してください"
[[extensions.settings.fields]]
key = "desc"
type = "multi_line_text_field"
name = "表示する文言"
description = "表示する文言を入力してください"
[[extensions.settings.fields]]
key = "banner_status"
type = "single_line_text_field"
name = "バナーの状態"
[[extensions.settings.fields.validations]]
name = "choices"
value = '["info", "success","warning","critical"]'