Shopify Post-Purchase Extensionでレジ前販売を実装する　コンポーネント紹介編 ① 〜見た目・入力〜

エンジニアの茄子です。

前回は公式のチュートリアルに基づいてサンプルアプリを作成しました。（ https://techlab.q-co.jp/articles/77/ ）
今回はPost-Purchase Checkout Extensionで利用可能なコンポーネントを紹介します。
利用可能なコンポーネントは公式ドキュメントに掲載されていますが、Propsを変えた見た目などがわかるといいなと思う場合が多々あったためここで紹介したいと思います。

remote-ui

(Github: https://github.com/Shopify/remote-ui )
(Shopifyによる解説: https://shopify.engineering/remote-rendering-ui-extensibility )

コンポーネント紹介に入る前に remote-ui の仕組みについて触れておきます。
Post-Purchase Checkout Extension で使用できるコンポーネントは、Shopify が提供する remote-ui という仕組みで制限されています。
remote-uiは独自のコンポーネントAPI（コンポーネント集）を定義するための仕組みで、UIの定義とレンダリングを切り離し、3rd party (開発者)のコードを安全にShopifyのUIに組み込むことができます。迎え入れる側のUI（Shopifyストア）側からするとiframeのような役割となります。

通常、React等のコンポーネントはバンドル後のコードに（当然ながら）レンダリングも含まれていて、ブラウザがそれを実行してレンダリングされますが、remote-uiでは開発者側はUIの構成のみを行い、実際のレンダリングをするコードはそれを受け取ったremote-uiが行います。
Post-Purchase Checkout Extension で利用可能なコンポーネントを定義したものが冒頭に貼ったリンクですが、逆にここに定義されていないものは一切使えません。<div> 一つでもエラーになります。また、スタイルの変更も余白や位置関係含め、Propsとしてコンポーネントに定義されている選択肢のみです。

Shopifyはチェックアウト周りのカスタマイズについては特に慎重であり、Post-Purchaseについても自由なものを許してしまうと、品質を保ちづらくなるという側面もあると思われます。

コンポーネント

利用可能なコンポーネントを紹介していきます。コンポーネントとそのオプションによる違いを画像で載せつつ、注意点があれば説明を加えます。
あくまで紹介目的で見た目がメインとなりますので、すべてのパラメータ(Props)を確認したい場合は公式ドキュメントをご覧ください。
公式ドキュメント： https://shopify.dev/api/checkout-extensions/components

表示・強調

Banner

BuyerConsent

文章は固定です。

CalloutBanner

Heading

HeadingGroup

Image

Link

Spinner

Tiles（次回紹介）で囲むとおかしくなるので注意。

Separator

Text

TextBlock

TextContainer

アクセシビリティ

HiddenForAccessibility

このコンポーネントで囲ったコンポーネントは、音声読み上げなどのアシスト機能（ユーザー補助機能）の対象から除外されます。

VisuallyHidden

このコンポーネントで囲ったコンポーネントは、アシスト機能がオンの時にのみ表示されます。

アクション・インプット

Button

ButtonGroup

Buttonの例をまるごと括るとこのようになります

Checkbox

Radio

Select

options

TextField

Form

onSubmit イベントハンドラを提供するためのラッパーです。加えて、Enterキーによるsubmitの挙動を変更できます。

FormLayout（+ FormLayoutGroup）

配置、行・列の割り方などは後に紹介するレイアウト系コンポーネントで基本的に行いますが、Form内ではこのコンポーネントと、同時に提供されるFormLayoutGroupでTiles無しで等間隔に配置してくれます。

終わりに

次回はレイアウト系コンポーネントをコードも交えて紹介します。