Checkout Page MCP

公式

AIクライアントがウェブサイトに支払いを追加できるようにします。チェックアウトページ、イベント、フォームを作成し、数分でサイトに埋め込めます。

checkoutpage.com で表示

Checkout Page MCPで何ができますか？

  • チェックアウトページを構築 — create_checkout_page と update_checkout_page を使って、価格、説明、クーポンフィールドを備えたチェックアウトページを作成、編集、一覧表示します。
  • イベントとチケットを設定 — チケットグループ、チケットタイプ、価格を指定してイベントを作成し、販売状況の変化に応じて更新またはアーカイブします。
  • フォームと質問を構築 — create_form と create_field を使って登録フォームを作成し、質問の追加、編集、削除を行います。
  • 注文バンプとクーポンを追加 — 駐車券などのアドオンを提供して並べ替えたり、20%オフクーポンなどの割引コードを作成したりします。
  • ページをスタイリングして埋め込み — ブランドテーマをページに適用し、add_to_website で貼り付けるだけで使える埋め込み、ポップアップ、リンクのコードを取得します。
  • 売上と顧客を検索 — 支払い、サブスクリプション、予約、フォーム送信、顧客レコードを検索して、請求に関する質問に回答します。

ドキュメント

AIツールで公式Checkout Page MCPサーバーを使ってチェックアウトページ、イベント、フォームを構築しましょう

Checkout Page MCPサーバーを使うと、Claude、ChatGPT、CursorなどのAIツールが、お客様のCheckout Pageアカウント内でチェックアウトページ、イベント、フォームを構築できます。販売したいものを平易な言葉で説明するだけで、AIがページを作成し、依頼に応じて編集し、サイトに追加します。

これはModel Context Protocolに基づいて構築されています。これはAIアシスタントを必要なツールやデータに接続するためのオープンスタンダードです。

AIでウェブサイトを構築していますか？Checkout PageがAIで構築されたサイトに決済を追加する方法をご覧ください。

サーバーURLは次のとおりです:

https://mcp.checkoutpage.com

Checkout Page MCPでできること

接続すると、AIツールに次のようなことを依頼できます:

  • 「『春のワークショップ』という名前で、価格$99のチェックアウトページを作成して。」
  • 「5月のガラのイベントを設定して。アーリーバードチケットは$40、通常チケットは$60で、上限は200席にして。」
  • 「5月のウェビナーの登録フォームを構築して。名前、メールアドレス、参加したいセッションを収集して。」
  • 「ガラのイベントに『食事に関する要望』の質問を追加して。」
  • 「ガラのイベントに$15の駐車パスをアドオンとして提供して。」
  • 「5月31日に期限切れになるSPRING20という名前の20%オフクーポンを作成して。」
  • 「春のワークショップのページをブランドに合わせて。ボタンは濃い緑、見出しフォントはセリフ体にして。」
  • 「構築中のサイトの料金セクションに、春のワークショップのチェックアウトをポップアップボタンとして追加して。」
  • 「5月のウェビナーの最新10件の登録を表示して。」

AIは以下のツールを使って、チェックアウトページ、イベント、フォームを構築・変更します。

利用可能なツール

できることツール
チェックアウトページを構築するcreate_checkout_page, update_checkout_page, get_checkout_page, list_checkout_pages
イベントとチケットを構築するcreate_event, update_event, get_event, list_events, create_ticket_group, update_ticket_group, archive_ticket_group, create_ticket_type, update_ticket_type, archive_ticket_type
フォームを構築するcreate_form, update_form, get_form, list_forms
ページに質問を追加するcreate_field, update_field, delete_field
商品を設定するcreate_product, update_product, delete_product, get_product, list_products
オーダーバンプとアドオンを提供するcreate_order_bump, update_order_bump, delete_order_bump, reorder_order_bumps, list_order_bumps
クーポンを作成するcreate_coupon, update_coupon, list_coupons
税金を請求するcreate_tax_rate, list_tax_rates
テーマでページをスタイリングするcreate_theme, update_theme, delete_theme, get_theme, list_themes, list_theme_properties
画像とファイルをアップロードするupload_file
ページをウェブサイトに配置するadd_to_website: 埋め込み、ポップアップボタン、リンク用の貼り付け可能なコード
支払いとサブスクリプションを検索するlist_payments, get_payment, list_subscriptions, get_subscription, list_subscription_payments, get_subscription_payment, prepare_subscription_cancellation
予約と参加者を検索するlist_bookings, get_booking, create_booking, list_tickets, update_ticket
フォーム送信を検索するlist_submissions, get_submission
顧客と請求書を検索するlist_customers, get_customer, update_customer, list_invoices, get_invoice, regenerate_invoice
イベントを独自のサーバーに送信するcreate_webhook, update_webhook, delete_webhook, get_webhook, list_webhooks

prepare_subscription_cancellation は何もキャンセルしません。サブスクリプションを確認し、ご自身でキャンセルできるダッシュボードのリンクを提供します。create_booking はカード決済を受け付けずに、実際のチケットを発行し確認メールを送信します。

始める前に

Checkout Pageアカウントが必要です。MCPサーバーはOAuthを使用するため、コピー＆ペーストするAPIキーはありません。初回接続時に、AIツールがワンクリックのサインインを案内します。

AIツールを接続する

各AIツールには、コネクタを追加するための独自の設定画面があります。以下からお使いのものを選んでください。手順は約1分で完了します。接続したら、各セクションの最後にあるテストプロンプトを試して、動作を確認してください。

ChatGPT

Checkout PageはChatGPTのプラグインディレクトリにあります:

  1. ChatGPTのCheckout Pageプラグインを開きます。
  2. Connectをクリックし、Checkout Pageにサインインします。

または、開発者モードでカスタムコネクタとして追加します:

  1. ChatGPT.comを開き、Settings → Security and loginに移動します。Developer modeを有効にします。
  2. 設定を閉じ、chatgpt.com/pluginsに移動します。
  3. 右上の**+**をクリックします。
  4. 次を入力します:
  5. I understand and want to continueをオンにします。
  6. Createをクリックし、Checkout PageのOAuthフローに従って接続します。
  7. 新しいチャットを開始します。
  8. **+**をクリックし、Checkout Pageを検索します。

テスト: *「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

Claude

  1. Claudeを開き、Settings → Connectorsに移動します。
  2. Add custom connectorをクリックします。
  3. 次を入力します:
  4. Addをクリックし、Checkout PageコネクタのConnectをクリックしてサインインします。

テスト: *「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

Cursor

最も速い方法はワンクリックインストールです:

または手動で追加します:

  1. Cursorを開き、Settings → MCPに移動します。
  2. Add new MCP serverをクリックします。
  3. 次を入力します:
  4. Saveをクリックし、OAuthプロンプトでサインインします。

テスト: Cursorのチャットで、*「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

VS Code

GitHub Copilot Chatと公式MCP拡張機能の両方が当社のサーバーをサポートしています。

  1. VS Codeを開き、コマンドパレット(Cmd/Ctrl + Shift + P)からMCP: Add Serverコマンドを実行します。
  2. HTTPを選択します。
  3. URLを入力します: https://mcp.checkoutpage.com
  4. 名前を付けます: checkoutpage
  5. ブラウザで開くOAuthプロンプトでサインインします。

テスト: Copilot Chatで、*「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

Codex

Codex CLIでは、1つのコマンドでサーバーを追加し、サインインを開始できます:

codex mcp add checkoutpage --url https://mcp.checkoutpage.com

またはCodexアプリで追加します:

  1. Codexを開き、Settings → MCP serversに移動します。
  2. + Add serverをクリックします。
  3. トランスポートとしてStreamable HTTPを選択します。
  4. 次を入力します:
  5. Saveをクリックし、OAuthプロンプトでサインインします。

テスト: *「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

Claude Code

2つのステップ: サーバーを追加し、Claude Code内からサインインします。

claude mcp add --transport http checkoutpage https://mcp.checkoutpage.com

次にセッションを開始します:

claude

セッション内で:

  1. /mcp と入力します。
  2. 矢印キーで checkoutpage をハイライトし、Enterを押します。
  3. authenticateを選択し、OAuthプロンプトに従います。

テスト: *「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

Lovable

  1. LovableでConnectorsを開き、**+**ボタンを選択します。
  2. MCP serverを選択します。
  3. 次を入力します:
  4. OAuthのままにして、Add & authorizeをクリックし、Checkout Pageにサインインします。

テスト: *「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

Cline

  1. Clineパネルで、上部ツールバーのMCP Serversアイコンをクリックします。
  2. Remote Serversタブを開きます。
  3. 次を入力します:
  4. Add Serverをクリックします。ClineがConfigureタブを開きます。
  5. checkoutpageサーバーのAuthenticateをクリックし、ブラウザでCheckout Pageにサインインします。

テスト: Clineで、*「Checkout Pageのチェックアウトページ、イベント、フォームを一覧表示して。」*と尋ねてください。

その他のAIツール

MCPをサポートするクライアントであれば、OAuthを使って https://mcp.checkoutpage.com に接続できます。ツールがトランスポートを要求する場合は、Streamable HTTPを選択してください。ほとんどのクライアントはこの設定を受け入れます:

{
  "mcpServers": {
    "checkoutpage": {
      "url": "https://mcp.checkoutpage.com"
    }
  }
}

プロンプトの例

新製品をローンチする

新しいワークショップの準備をしていて、チェックアウトページとアーリーバード割引を数分で公開したいとします。

これをAIツールに貼り付けてください:

Create a checkout page called "Pricing Strategy Workshop" priced at $199. Write a confident product description (3–4 sentences) that pitches a half-day workshop for founders and product leaders who want to raise prices without losing customers. Turn on the coupon code field so customers can apply discounts. Then create a coupon code EARLYBIRD that takes 20% off and expires May 15. Send me both the checkout URL and the coupon code when you're done.

アシスタントは create_checkout_page を呼び出し(説明文とクーポンフィールドを有効にして)、次に create_coupon を呼び出し、公開されたチェックアウトURLと割引コードを返します。

コースのローンチ、ベータ登録ページ、期間限定プロモーションなど、あらゆる新しいオファーに同じパターンを使えます。

チケット付きのイベントを設定する

ガラを開催し、今日からチケット販売を開始したいとします。アーリーバード価格と各ゲスト向けの質問も必要です。

これをAIツールに貼り付けてください:

Create an event called "Spring Gala" on May 16 at 7:00 PM at the Riverside Hall. Add two ticket types: "Early bird" at $40 and "Standard" at $60, with 200 tickets in total. Ask each guest for their dietary needs. Write a short, warm description of the evening, then send me the event link.

アシスタントはチケットグループ、両方のチケットタイプ、食事に関する要望の質問を指定して create_event を呼び出し、公開されたイベントリンクを返します。後でチケットタイプの追加、価格の変更、アーリーバード販売の終了を依頼すると、update_event または update_ticket_type を呼び出します。

構築中のウェブサイトにチェックアウトを追加する

Lovable、Bolt、v0、Cursor、Claude CodeなどのAIツールでサイトを構築していて、ページ上で直接購入できるようにしたいとします。

これをAIツールに貼り付けてください:

Create a checkout page called "Pricing Strategy Workshop" priced at $199, then add it to the pricing section of this website as an inline embed.

アシスタントは create_checkout_page を呼び出し、次に add_to_website を呼び出して、埋め込みコードをサイトに配置します。サイトがReactで構築されている場合はReactコンポーネントを使用し、それ以外の場合はプレーンHTMLを使用します。顧客をクリックするまでページに留めておきたい場合は、代わりにポップアップボタンを依頼してください。

チェックアウトをテストする

ローンチ前に、支払いをせずに自分のチェックアウトから購入し、顧客が何を受け取るかを正確に確認したいとします。

これをAIツールに貼り付けてください:

Test my "Pricing Strategy Workshop" checkout page in Checkout Page test mode. Put the page in test mode, open it in the browser and buy it with the test card 4242 4242 4242 4242 and a new email address. Then find the test payment it created and check that it's marked livemode false. Switch test mode back off when you're done, and tell me what you bought and what you found.

アシスタントは list_checkout_pages を呼び出してページを見つけ、testmode: true を指定して update_checkout_page を呼び出し、ブラウザで支払いを行い、livemode: false を指定して list_payments を呼び出してテスト支払いを見つけ、再度 update_checkout_page を呼び出してテストモードをオフにします。

イベントやフォームでも同じパターンを使えます。また、Webhookや連携が発火するかを依存する前に確認するのにも使えます。

顧客の請求に関する質問に答える

顧客から、次回の支払いがいつになるかを尋ねるメールが届き、すぐに返信できる下書きを作りたいとします。

その質問をAIツールに貼り付けてください:

A customer named Jane Smith (jane@example.com) just emailed asking: "When is my next payment, and how much will I be charged?" Look up her account in Checkout Page, find her active subscription, and draft a friendly reply I can send back. Include the next billing date and the amount.

アシスタントは list_customers を呼び出してメールでJaneを見つけ、次に list_subscriptions を呼び出して彼女の有効なプランを取得し、次回の請求日と金額を含む、すぐに送信できる返信を下書きします。

返金リクエスト、領収書の再送、アカウントの状況が必要な一回限りのサポート質問などにも同じパターンを使えます。

より良い結果を得るためのヒント

  • AIにコピーを書いてもらいましょう: 商品タイトル、説明、確認メッセージなど。そうしないと、ページが空白または一般的な内容になります。
  • AIが推測できない設定については明確に伝えてください(例: 「クーポンコードフィールドをオンにして」)。
  • 具体的なレコードと作成タスクに限定してください。AIアシスタントは合計やランキング(「売上上位5ページ」など)については信頼性が低くなります。それはすべての支払いを読み取る必要があるためです。そのような数値には、ダッシュボードの分析ビューを使用してください。
  • 一部の設定はまだMCPでは利用できません。リクエストが反映されない場合は、ダッシュボードでページを開いて変更を完了してください。

テストモード

アシスタントは、チェックアウトページ、イベント、フォームで支払いをせずにテスト購入を行い、作成した内容を確認できます。仕組みについてはテストモードをご覧ください。

  • オンとオフを切り替える。 create_checkout_page、create_event、create_form、および対応する update_* ツールは、testmode: true または testmode: false を受け取ります。list_checkout_pages、list_events、list_forms は、テストモードのままのページを見つけるために testmode: true を受け取ります。
  • テストレコードを読み取る。 支払い、予約、サブスクリプション、サブスクリプション支払い、請求書、送信の一覧取得・取得ツール、および list_tickets は、livemode: false を受け取ります。これがない場合、ライブのレコードのみを返します。

AIツールが接続すると、サーバーはアシスタントにテストモードに関する短い説明も提供するため、平易な言葉で尋ねることができます。

テストプロンプト

2つのプロンプトが完全なテスト実行をスクリプト化します。MCPプロンプトをサポートするAIツールでは、スラッシュコマンドまたはプロンプトとして表示されます。たとえばClaude Codeでは、/mcp__checkoutpage__ と入力して1つを選択します。

プロンプト動作引数
test_checkoutチェックアウトページ、イベント、またはフォームをテストモードに切り替え、ブラウザでテスト購入を行い、記録を確認してから、テストモードを元の状態に戻します。pageId、および任意で pageType: checkout（デフォルト）、event または form
test_upsell_funnel既存のワンクリックアップセルファネルの両方のページをテストモードにし、オファーを承諾する場合と拒否する場合で1回ずつ実行し、記録を確認してから、テストモードを元の状態に戻します。ページは作成しません。initialPageId、および任意で upsellPageId

たとえば、Claude Codeでイベントをテストするには、プロンプト名、イベントのid、およびそのページタイプを入力します:

/mcp__checkoutpage__test_checkout {eventId} event

ファネルについては、アップセルファネルをテストするを参照してください。

支払いを行うには、アシスタントにブラウザツール（Claude in Chrome、Playwright MCPサーバー、ChatGPTエージェントモードなど）が必要です。ブラウザツールがない場合、アシスタントは自分で支払うためのリンクを提示し、その後も記録の確認を続けます。

トラブルシューティング

セキュリティとプライバシー

  • MCPサーバーは、OAuthでサインインした後にのみ、あなたに代わって動作します。
  • トークンはあなたのアカウントにスコープされます。Checkout Pageの設定からいつでもアクセスを取り消せます。
  • 読み取りツール（list_*、get_*）はデータを変更しません。書き込みツール（create_*、update_*、upload_*、archive_*、reorder_*）と破壊的ツール（delete_*）は明確に命名されているため、アシスタントは変更を加える前に確認できます。削除は元に戻せないため、アシスタントが delete_* ツールを実行する前に確認してください。
  • アシスタントが参照するデータ（顧客の詳細、支払い情報）は、他のコネクタと同様に、応答を生成するためにAIツールへ送信されます。データ処理ポリシーがあなたのニーズに合ったAIツールを選択してください。