mcpField
C
commercetools-checkout

commercetools-checkout

github.com/commercetools開発659 回インストール1 日前に更新
リポジトリ

commercetools-checkout について

commercetools-checkoutは、commercetools Browser SDKでホスト型のチェックアウトと決済体験を実装するスキルです。決済のみ、全体ホスト型、エクスプレス決済の選択と、ドキュメントやスキーマの参照手順を案内します。

主な機能

  1. 013種類のチェックアウト連携モード
  2. 02決済のみのウィジェット連携
  3. 03住所・配送・決済を含むホスト型フロー
  4. 04Apple PayとGoogle Payのエクスプレスボタン
  5. 05ドキュメントとAPIスキーマの参照スクリプト

活用シーン

  1. 01既存チェックアウトの決済ステップだけを置き換え
  2. 02複数段階のチェックアウトをホスト型ページに移行
  3. 03カートや商品ページにエクスプレス決済ボタンを追加
  4. 04commercetoolsのGraphQLまたはRESTリソーススキーマを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/commercetools/commercetools-ai-plugins --skill commercetools-checkout

インストール後、Claude Code で/commercetools-checkoutを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
payment-only-mode.md
scripts/
docs-search.mjs
graphql-schemata.mjs
openApi-schemata.mjs

詳細

チェックアウト

Checkout は、Browser SDK を通じてホスト型の決済およびチェックアウト体験を提供します。

統合モード

3 つのモードがあります。Checkout にチェックアウトフローをどの程度任せるかに基づいて選択してください。

  • paymentFlow（決済のみ）— 既存の住所／配送 UI はそのままにし、決済ステップのみを Checkout ウィジェットに置き換えます。最も影響の少ない方法です。
  • checkoutFlow（フルホスト型）— 複数ステップのチェックアウト全体を、住所、配送、決済を含む commercetools ホストの単一ページに置き換えます。
  • expressPayment — カートまたは PDP に Apple Pay／Google Pay のエクスプレスボタンを追加します。上記のいずれのモードとも併用できます。

ワークフロー

このスキルが呼び出されたときは、必ず次の手順に従ってください。

  1. ドキュメント検索（必須、最初に実行） — セッション中にこのスキルを初めて使用するときは、回答する前に必ずこれを実行してください。このスキルが対象とする製品に絞り込んだ、最新かつ検証済みのドキュメントを収集し、回答の主な根拠とします。このスキルの作業中は、ドキュメント検索にこのスクリプトを使用してください。それ以外の内容は Knowledge MCP が対象とします。スキルの記述だけに頼らず、取得したドキュメントで詳細を必ず確認してください。

    node "<this skill's directory>/scripts/docs-search.mjs" \
  --query "<extract key terms from user's question>" \
  --app-name "<host app: claude-code, claude-chat, cursor, codex, copilot — or the host's own name>" \
  --model "<current-model>" \
  --commercetools-project-key "<if known>" \
  --commercetools-region "<if known>" \
  --limit 20

    commercetools のプロジェクトキーとリージョン（api.{region}.commercetools.com の形式）は、すでにコンテキストにある場合にのみ渡してください。それ以外の場合は、どちらも省略してください。ファイルを検索したり、ユーザーに尋ねたりしないでください。

  2. スキルのリファレンスと組み合わせる — 分析結果を ./references/ 内のローカルリファレンスと照合し、全体像を把握してください。

  3. 実装ガイダンスを提供する — ドキュメントと、ユーザーが対象としている具体的な統合モードを組み合わせて説明してください。

オプションのスクリプト

GraphQL スキーマを取得する — commercetools の GraphQL クエリまたはミューテーションについての情報が必要なときに実行します。たとえば、クエリを作成する前にリソースのフィールド、型、利用可能な操作を確認する場合や、生成した GraphQL クエリ／ミューテーションを実際のスキーマに照らして検証する場合です。単一の commercetools リソースについて、部分的な GraphQL SDL を取得します。

node scripts/graphql-schemata.mjs \
  --resource-name "<commercetools resource, e.g. Cart, Product, Order>" \
  --app-name "<host app: claude-code, claude-chat, cursor, codex, copilot — or the host's own name>" \
  --model "<current-model>"

出力は、そのリソースの GraphQL SDL です。リソース名が認識されない場合、スクリプトは有効なリソース名の一覧を表示します。正しいものを選び、再実行してください。注： SDL には スタブ型 が含まれる場合があります。これは、参照先のリソースをスタブとして表したもので、実際の型名はコメントに記載されています。必要なものがあれば、その型名を --resource-name として指定し、このスクリプトを再実行して個別に取得してください。

OpenAPI（REST）スキーマを取得する — commercetools の REST エンドポイント、リクエスト／レスポンスのペイロード、または更新アクションについての情報が必要なときに実行します。たとえば、リクエストを作成する前にリソースの REST 操作を確認する場合や、生成した REST リクエスト／ペイロードを実際の仕様に照らして検証する場合です。単一の commercetools リソースについて、部分的な OpenAPI 仕様を取得します。

node scripts/openApi-schemata.mjs \
  --resource-name "<commercetools resource, e.g. api-Cart-write, api-Customer-read, checkout-Application>" \
  --app-name "<host app: claude-code, claude-chat, cursor, codex, copilot — or the host's own name>" \
  --model "<current-model>"

出力は、そのリソースの OpenAPI 仕様（YAML）です。REST リソース名は、読み取り／書き込みを分けた形式（例：api-Cart-read、api-Cart-write）を使用します。リソース名が認識されない場合、スクリプトは有効なリソース名の一覧を表示します。正しいものを選び、再実行してください。注： 仕様には参照展開スキーマが含まれていません。参照先リソースのスキーマが必要な場合は、そのリソースを --resource-name として指定し、このスクリプトを再実行して個別に取得してください。

リファレンス

次を参照してください：payment-only-mode.md：

  • 全体のアーキテクチャ図（Browser SDK → Checkout service → PSP）
  • セッションの作成（/<api>/checkout/session → commercetools Sessions API）
  • paymentFlow、checkoutFlow、expressPayment の実装パターン
  • PSP コネクターのセットアップ（Stripe、Adyen、Mollie）
  • Webhook の処理と注文確認

コメント

Markdown 対応