2026年9月28日、Shopify のチェックアウトが WebMCP に対応しました。8月から商品検索やカート操作は WebMCP で公開されていましたが、これで「商品を探す」から「注文を確定する」までが、ブラウザで動く AI エージェントから操作できるようになります。この記事では、日本のストア（1ページのチェックアウト・日本語）で、エージェントに実際に注文確定まで進めてもらった結果をまとめます。
検証は自社の検証用ストアで、決済をテストモードにして行いました。図版の画面はすべて再現図で、ストア名・商品・氏名・住所はサンプルです。
先に結論
・日本のストアでも、エージェントが注文確定まで進められました。ゲストの場合、連絡先・住所の入力から注文確定までをツールで操作でき、人が操作したのはカード番号の入力だけです。
・Shop Pay にログインしている購入者なら、画面の操作はゼロでした。保存済みのカードと住所が使われ、エージェントがチェックアウトへの移動と注文確定を呼ぶだけで、購入者は承認するだけです。
・ただし 普段使いの Chrome では、チェックアウトのツールはまだ現れません。WebMCP を有効にしたブラウザ（試験機能をオンにした Chrome など）が必要でした。
・チェックアウトのツールが返す中身は、UCP のチェックアウトそのものでした。WebMCP は、UCP をブラウザの中から使うための経路という位置づけです。
・日本語のストアでは、WebMCP の商品検索が0件になる状態が続いています。コレクションをたどれば商品にはたどり着けます。
WebMCP のおさらい
WebMCP（Web Model Context Protocol）は、ブラウザで開いているページが、自分の機能を AI エージェント向けの「ツール」（呼び出せる関数）として登録しておく仕組みです。エージェントは画面のボタンを探してクリックする代わりに、ページが用意したツールを呼んで操作します。仕組みの全体像は以前の記事にまとめています。
押さえておきたいのは、画面（ページ）は必要だという点です。ツールはページの中で動き、操作した結果はそのまま画面にも反映されます。画面を使わずにサーバーへ直接つなぐ仕組み（Shopify の Checkout MCP など）とは、つなぎ方が違います。
チェックアウトで使えるようになった4つのツール
| ツール | できること |
|---|---|
get_checkout |
チェックアウトの状態を読む（中身・合計・配送・支払い・足りない入力・注文が完了したか）。読み取りのみ |
update_checkout |
注文はせずに内容を書き換える（連絡先・配送先と配送方法・割引コード・支払い・ストアが求める追加の入力欄） |
complete_checkout |
注文確定に進める。購入者が購入を承認したあとにだけ使うことが求められている |
navigate_to_storefront |
チェックアウトを離れてストアに戻る。注文もカートも変えない |
マーチャント側の設定は不要で、対象のチェックアウトに自動で組み込まれます。対象外とされているのは、3ページに分かれた旧来のチェックアウト（Shop Pay で払う場合を除く）、B2B、他サイトへの埋め込みやモバイルアプリ向けのチェックアウト、下書き注文・注文編集・支払い回収です。
普段の Chrome では、チェックアウトのツールが現れない
最初に、設定を変えていない Chrome 154 でチェックアウトを開き、ツールを取得してみました。結果は、商品ページやカートではツールが11個取れるのに、チェックアウトでは0個。ツールの入口である document.modelContext 自体がありませんでした。日本語のストア5店・海外のストア4店で同じ確認をしても、チェックアウトに進めたストアはすべて同じ結果です。
違いは、オリジントライアルのトークンにありました。オリジントライアルは、Chrome が正式公開前の機能を、トークンを埋め込んだページでだけ先に動かせるようにする仕組みです。Shopify は商品ページなどに WebMCP 用のトークンを埋め込んでいますが、チェックアウトのページには入っていませんでした。仕組みは用意されているものの、普段使いの Chrome ではまだ動かない、という段階です。
そこで、Chrome の試験機能を有効にして試しました。
- アドレスバーに
chrome://flags/#enable-webmcp-testingと入力する - 「WebMCP for testing」を Enabled にする
- 画面下の［再起動］で Chrome を再起動する
再起動後にもう一度チェックアウトを開くと、4つのツールが現れました。検証が終わったら、同じ画面で Default に戻しておくとよいでしょう。
注文確定までの流れ
ここからは、WebMCP を有効にした Chrome で、商品選びから注文確定までを通して操作した流れです。
エージェントには Claude in Chrome（Chrome の拡張機能として動き、ユーザーのブラウザを操作する Claude）を使いました。購入者が普段使っているブラウザの中で AI が操作するという点で、エージェント機能を持つブラウザと似た環境です。Claude in Chrome がページの中でツールを呼び出し、その結果を読みながら次の操作を決めています。
1. 商品を選んでチェックアウトへ
商品ページを開いた状態で、browse_store（コレクションをたどる）→ get_product（商品の詳細）→ add_to_cart（カートに入れる）→ proceed_to_checkout の順に呼ぶと、ブラウザがチェックアウトに移動します。
const mc = document.modelContext;
const tools = await mc.getTools();
const tool = (name) => tools.find((t) => t.name === name);
// Chrome 154 では、引数を JSON 文字列で渡す
await mc.executeTool(tool('add_to_cart'), JSON.stringify({
cart: { line_items: [{ item: { id: 'gid://shopify/ProductVariant/…' }, quantity: 1 }] }
}));
await mc.executeTool(tool('proceed_to_checkout'), '{}');2. 足りない入力を get_checkout で確かめる
チェックアウトに移ったら、まず get_checkout で状態を読みます。何も入力していない状態では、足りない項目が日本語のメッセージで返ってきました。
- 有効な連絡方法がありません。
- 郵便番号を入力してください／姓を入力してください／名を入力してください／住所を入力してください／市区町村を入力してください
エージェントは、このメッセージを読めば購入者に何を聞けばよいかがわかります。
3. 連絡先と住所を update_checkout で入れる
メールアドレスと配送先を update_checkout で入れると、住所が入った時点で通常配送（¥880）が自動で選ばれ、合計が更新されました。1回目は「この配信方法を使用するには電話番号を入力してください」が残ったので、電話番号を足してもう一度送ると、メッセージは0件になり、状態が ready_for_complete（注文確定に進める状態）に変わりました。請求先住所にも同じ住所が自動で入っています。
await mc.executeTool(tool('update_checkout'), JSON.stringify({
checkout: {
buyer: { email: 'buyer@example.com' },
fulfillment: { methods: [{
type: 'shipping',
destinations: [{
last_name: 'テスト', first_name: '太郎',
postal_code: '100-0001', address_region: 'JP-13',
address_locality: '千代田区', street_address: '千代田1-1',
address_country: 'JP', phone_number: '+81312345678'
}]
}]}
}
}));ツールの説明には「省略したデータが保持されるとは限らない」とあります。2回目は電話番号だけでなく、1回目の内容もすべて含めて送りました。
入れた内容は、チェックアウト画面の入力欄にもそのまま表示されます。エージェントの操作が、購入者が見ている画面と同じ状態に反映されるのが WebMCP の特徴です。
4. カード番号は購入者が入れる
カード番号だけは、エージェントからは入力できません。update_checkout の説明にも、新しいカード情報は受け付けないと書かれています。Shopify のカード入力欄は決済専用の別ドメインの枠の中にあり、ページの外からは読み書きできない作りです。
今回は画面のカード欄にテストカードを手で入力しました。入力後に get_checkout を呼んでも、返ってくる支払いの情報は請求先住所だけで、カード番号は一切見えません。
Shop Pay にカードを保存している購入者なら、エージェントは保存済みのカードを ID で選べます。この場合はカード入力で止まらずに進められます。
5. complete_checkout で注文を確定する
complete_checkout を呼ぶと、状態が complete_in_progress（確定処理中）になり、数秒後に画面がサンクスページへ切り替わりました。get_checkout の状態は completed で、画面で入れたテストカードで決済されています。注文が確定すると、使えるツールは get_checkout と navigate_to_storefront の2つに減りました。
購入者に戻る場面
ツールの説明では、次の場合は操作が購入者に戻るとされています。
・3Dセキュア認証などの本人確認が必要なとき（requires_buyer_input）。日本では、ネットショップでの3Dセキュアが原則必須とされています
・確認画面を挟む設定のとき。最初の complete_checkout では注文されず（requires_buyer_review）、購入者が画面で確認したあとに、もう一度呼んで確定する
・入力が必須のアプリの欄があるとき
ログインしているかどうかで、購入者の手間が変わる
ここまではログインしていない状態（ゲスト）の流れです。続けて、購入者がログインしている場合も試しました。結果は、ログインの種類によってはっきり分かれました。
ストアのアカウントでログイン（Shop Pay なし）
ストアの顧客アカウントでログインしてチェックアウトに進むと、連絡先と配送先がはじめから入っていて、get_checkout の時点で状態は ready_for_complete、メッセージは0件でした。エージェントが住所を入れる必要はありません。
ただし、カード欄は空のままです。この状態で complete_checkout を呼ぶと、completion_failed（確定を確認できなかった）というエラーが返り、注文は確定しませんでした。画面にはカード欄の下に「カード番号を入力してください」と表示されますが、エラーの返り値には理由が含まれず、直後の get_checkout も ready_for_complete・メッセージ0件のままでした。カードが入っていないことを、エージェントは返り値からは知ることができない状態です。エージェントに任せる場合は、カード入力を購入者に促す流れを用意しておく必要がありそうです。
Shop Pay でログイン
次に、ストアで Shop Pay を有効にし、購入者が Shop Pay にログインした状態で試しました。proceed_to_checkout を呼ぶと、ブラウザは Shop Pay の画面（shop.app のドメイン）に自動で移動しました。そこでもチェックアウトの4つのツールが https://shop.app のツールとして登録されていて、エージェントは同じツールで操作を続けられます。
get_checkout を呼ぶと、配送先と配送方法は入力済みで、支払いには保存済みのカードが選択された状態で返ってきました。カードには ID・種類・カードブランド・下4桁が付いていて、カード番号そのものは含まれません。複数のカードを保存していれば、エージェントは ID を指定して選び直すこともできます。
ここで購入者が承認し、エージェントが complete_checkout を呼ぶと、ストアのサンクスページに戻り、状態は completed になりました。エージェントが呼んだのは proceed_to_checkout と complete_checkout の2つだけで、購入者が画面で操作したことは何もありません。Shop Pay にカードと住所を保存しているお客様なら、エージェントに頼んで承認するだけで買い物が終わる、ということになります。
中身は UCP だった
get_checkout の返り値を見ると、UCP（Universal Commerce Protocol。AI エージェントがストアで買い物をするための共通の取り決め）の情報が含まれていました。dev.ucp.shopping の経路（transport）が webmcp になっています。
つまり、チェックアウトの WebMCP は UCP と別の仕組みではなく、UCP のチェックアウトを、ブラウザの中から使えるようにした経路です。以前の記事では「UCP とは別物」と書きましたが、少なくともチェックアウトについては、中身は同じで、つなぎ方が違うと整理し直すのが正確です。
| Checkout MCP（サーバー側） | Checkout WebMCP（ブラウザ側） | |
|---|---|---|
| エージェントが動く場所 | エージェント自身のサーバー（ストアの外） | 購入者のブラウザの中（ストアのページを開いた状態） |
| ストアの画面 | 不要 | 必要（操作は画面にも反映される） |
| Shopify の位置づけ | 基本はこちらを推奨 | エージェントがすでに購入者のブラウザで動いている場合に使う |
Shopify のチェックアウトは、どのストアでも Shopify が提供している共通の仕組みです。だからこそ、UCP のチェックアウトを WebMCP のツールとして、マーチャントの設定なしに全ストアへ一斉に載せられたのだと思われます。
日本のストアで気をつけたいこと：商品検索が0件
チェックアウトとは別に、日本語のストアでは WebMCP の商品検索（search_catalog）が0件になる状態が続いています。日本語のストア5店すべてで、「財布」のような一般名詞、「wallet」のような英語、商品名の一部のどれを入れても0件でした。サイトの検索窓（通常の検索）では、同じ言葉で商品が出ます。英語・ドイツ語・フランス語のストアでは結果が返りました。
search_catalog は、Shopify の予測検索（検索窓に入力した途中から候補を出す機能）を使っています。同じストアの予測検索を日本語のページで直接呼ぶと「Unsupported buyer locale」（購入者の言語に対応していない）というエラーが返り、WebMCP 経由では結果が空になっていました。原因の細部は確定できていませんが、日本語を基本言語にしているストアでは、WebMCP の検索が使えない状態と考えてよさそうです。
一方、browse_store でコレクションをたどれば、商品の特定からカート追加まで問題なく進みます。検索だけに頼るエージェントは「見つからない」で止まってしまうので、コレクションの名前と分け方を整えておくことが、エージェントの入口にもなると感じています。
マーチャントとして確認しておきたいこと
- 設定は不要：チェックアウトのツールは自動で組み込まれます
- チェックアウトの形式：3ページの旧来のチェックアウトは、Shop Pay で払う場合を除いて対象外です。1ページのチェックアウトなら対象になります
- 支払い方法：エージェントが選べるのは Shop Pay に保存済みのカードだけです。コンビニ払い・スマホ決済・代金引換などは購入者が画面で選ぶことになります
- チェックアウトに追加した入力欄：アプリで追加した必須の入力欄は、エージェントでは扱えず購入者に戻ります。WebMCP 経由の購入で止まりやすい場所になります
- コレクションの整理：日本語のストアでは検索が使えないため、コレクションがエージェントの主な入口になります
まとめ
WebMCP は、画面を使わずにストアを操作する仕組みではなく、購入者が見ている画面の上で、エージェントがより正確に操作するための仕組みです。ブラウザを操作できるエージェントであれば、チェックアウトの入力から注文確定まで任せられ、人が受け持つのはカード番号の入力と購入の承認だけになります。購入者が Shop Pay にログインしていれば、カード番号の入力も要らず、承認だけで済みます。
現時点では、チェックアウトのツールが普段使いの Chrome で動かないこと、日本語のストアで検索が0件になることなど、まだ途中の部分もあります。ただ、日本のストアでも注文確定まで通ることは確認できました。対応ブラウザが広がる前に、チェックアウトとコレクションの状態を一度見直しておくとよさそうです。
参考リンク
- Shopify Developer Changelog：WebMCP support for checkout
- Shopify Dev Docs：Carts and checkout
- Shopify Dev Docs：Checkout WebMCP
- Chrome for Developers：WebMCP
※ 2026年10月5日時点、Chrome 154 での検証結果です。ブラウザやShopifyのアップデートで挙動は変わる可能性があります。