ShopifyのCheckout UI Extensionsで開発を進めているとき、サンキューページで注文IDが取れずにしばらくハマった。顧客アンケートの結果を注文と紐づけたいのに、必要なデータにアクセスできないのは開発者として致命的だ。
※この記事は、個人技術ブログ CodeArchPedia.com の技術メモ（要約）です。
何が起きたか（課題）
サンキューページ（拡張ポイントpurchase.thank-you.block.render）で、localStorageからチェックアウトトークンや注文IDを取得しようとしたが、全く取れなかった。この現象は、ShopifyのCheckout UI ExtensionsがWeb Worker内で動作しているために発生する、セキュリティ上の制限が原因だった。
- 画面表示はできるが、注文IDやチェックアウトトークンを取得できない。
-
windowオブジェクトやlocalStorageへのアクセスがWeb Workerによって制限されている。 - 顧客アンケートの回答と注文を紐づけることができず、データ連携が不可能だった。
この問題はStack Overflowでもよく話題になっており、多くの開発者が同じ壁にぶつかっている状況だった。
どう解決したか（概要）
このサンキューページでのデータアクセス制限を回避する、Shopify公式の推奨アプローチは、useApiフックを利用することだった。このフックを使うと、Web Worker内からでも拡張ポイント固有のコンテキストデータに安全にアクセスできる。
解決の鍵となったのは、useApiに拡張ポイント名（'purchase.thank-you.block.render'）を渡すこと。これにより得られるデータオブジェクトから、注文確認情報を通じて注文IDを取り出す。
以下がその基本的な実装の骨子だ。
const { useApi } = require('@shopify/checkout-ui-extensions-react');
function MyComponent() {
const api = useApi('purchase.thank-you.block.render');
const orderId = api?.orderConfirmation?.current?.order?.id;
// orderId を使った処理...
return (
// ... JSX ...
);
}
このorderId（例: gid://shopify/Order/1234567890）をサーバーサイドに送信することで、フォームの回答と注文の紐付けが確実にできるようになった。
効果（Before/After）
useApiの適用により、これまで取得不可能だったサンキューページ上の注文IDへのアクセスが可能になった。これにより、カスタムフォームやアンケートの回答を、実際の注文レコードと完全に紐づけることができるようになり、データ収集の信頼性が向上した。
- Before: 注文IDが取得できず、アンケート回答がどの注文に紐づくか不明瞭だった。
-
After:
useApiを利用し、注文完了直後に注文IDを安全に取得、サーバーへのデータ送信と注文メタフィールドへの保存が可能になった。
ただし、サンキューページはリロードされる可能性があるので、データ重複送信を防ぐためのフラグ管理が次の重要なステップになる。
🚀 詳細な設定とコードはこちら
具体的なWAFのルール設定や、より詳細なログ解析データは元のブログで公開しています。