チェックアウトUI拡張のための新APIとコンポーネント

Checkout UI 拡張機能の新APIとコンポーネントについて

ShopifyのCheckout UI拡張機能は、チェックアウトプロセスをカスタマイズし、ユーザー体験を最適化するための重要なツールです。しかし、これまでのAPIは、Storefront APIへのアクセスが制限されていたり、ディスカウントコードやギフトカードの編集ができなかったりと、開発者にとっていくつかの制約がありました。また、UIコンポーネントの種類やスタイルが限定されていたため、ユーザーインターフェースの自由度が低くなっていました。

新APIの利用で技術的課題を解決

新しいAPIリリースにより、これらの課題が解決され、より柔軟で高機能なCheckout UI拡張機能の開発が可能になりました。

Buyer journey and order hooks

これにより、購入者の旅行APIを使用して、顧客の旅行の目的のステップに基づいて注文ステータスページ上で異なる拡張機能をレンダリングすることができます。詳細はこちらをご覧ください。

Storefront Direct Access API

拡張機能は、店舗のStorefront APIをクエリして、製品タグ、製品推奨、通貨変換などの追加情報を取得できます。認証はShopifyが処理するため、拡張機能はクエリのみを渡す必要があります。

Rendered in editor API

拡張機能は、チェックアウトエディタ内でレンダリングされているかどうかを検出できます。購入者に対してのみ条件付きでレンダリングする拡張機能は、常にこれを使用してエクステンションを設定する商人のためのコンテンツをレンダリングするべきです。

Discount Code APIとGift Card API

これらのAPIを使用して、拡張機能はチェックアウト内のディスカウント割り当てとディスカウントコードを読み取り、ディスカウントコードを追加または削除できます。また、ギフトカードコードとその金額を読み取り、ギフトカードコードを追加または削除することもできます。

Session Token API

Shopifyは、アプリの秘密で署名されたトークンを拡張機能に提供します。このトークンは、外部呼び出しでアプリサーバーに渡すことができ、アプリはトークンの内容がShopifyによって作成されたものであると信頼することができます。

新UIコンポーネントの導入

次に、新しいUIコンポーネントを紹介します。これらのコンポーネントを使用することで、購入者がオプトインできる情報を段階的に表示することが可能になります。

Pressable

この汎用的な対話型コンポーネントを使用すると、ボタンやリンクに付属するスタイルなしで使用できます。

Component Overlays

拡張機能は、ボタン、リンク、またはPressableコンポーネントからの対話による追加情報を提供する、アクセシブルなUIコンポーネントオーバーレイのセットにアクセスできます。

Conditional style additions

Button、GridItem、Imageに条件付きスタイルが追加されました。

これらの新APIとUIコンポーネントの導入により、より自由度の高いカスタマイズと機能強化が可能になりました。これにより、ショップのブランドイメージを強化し、顧客満足度を向上させることが期待できます。

参考記事: New APIs and components for Checkout UI extensions