Checkout Page MCP
官方讓 AI 客戶端為您的網站新增支付功能。在幾分鐘內建立結帳頁面、活動和表單,並將其嵌入您的網站。
你可以用 Checkout Page MCP 做什麼?
- 建立結帳頁面 — 透過
create_checkout_page和update_checkout_page建立、編輯及列出結帳頁面,並設定價格、說明和優惠券欄位。 - 設定活動和票券 — 建立包含票券群組、票種和價格的活動,並隨銷售情況變化更新或封存活動。
- 建立表單和問題 — 透過
create_form和create_field建立報名表單,並新增、編輯或移除問題。 - 新增訂單加購項目和優惠券 — 提供停車證等加購項目並重新排序,也可建立折扣碼,例如八折優惠券。
- 設定頁面樣式並嵌入 — 將品牌主題套用至頁面,並透過
add_to_website取得可直接貼上的嵌入、彈出視窗或連結程式碼。 - 查詢銷售和客戶資料 — 查找付款、訂閱、預訂、表單提交內容和客戶記錄,以回答帳單相關問題。
文件
使用官方 Checkout Page MCP 伺服器,透過 AI 工具建立結帳頁面、活動和表單
Checkout Page MCP 伺服器可讓 Claude、ChatGPT 和 Cursor 等 AI 工具,在你的 Checkout Page 帳戶中建立結帳頁面、活動和表單。用白話描述你販售的商品。你的 AI 會建立頁面、依照你的要求編輯頁面,並將頁面加入你的網站。
它以 Model Context Protocol 為基礎,這是一項開放標準,可將 AI 助理連接到所需的工具和資料。
正在使用 AI 建立網站?請參閱Checkout Page 如何為 AI 建立的網站加入付款功能。
伺服器 URL:
Checkout Page MCP 可以做什麼?
連線後,你可以要求 AI 工具執行以下操作:
- 「建立一個名為『春季工作坊』、價格為 $99 的結帳頁面。」
- 「為我們五月的晚宴活動建立活動頁面,提供 $40 的早鳥票和 $60 的標準票,名額上限為 200 人。」
- 「為五月的網路研討會建立報名表單。收集姓名、電子郵件,以及他們想參加的場次。」
- 「在晚宴活動中新增『飲食需求』問題。」
- 「在晚宴活動中提供 $15 的停車證加購項目。」
- 「建立一張名為 SPRING20、於 5 月 31 日到期的 8 折優惠券。」
- 「讓春季工作坊頁面符合我們的品牌風格:深綠色按鈕和襯線標題字型。」
- 「將春季工作坊結帳功能以彈出式按鈕的形式,加入我們正在建置網站的價格區塊。」
- 「顯示五月網路研討會最近 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 工具都有自己的設定畫面,可用來新增連接器。請在下方選擇你使用的工具。設定步驟約需一分鐘。連線後,試試每個區段末尾的測試提示詞,確認連線正常。
ChatGPT
Checkout Page 已上架於 ChatGPT 外掛目錄:
- 開啟 ChatGPT 中的 Checkout Page 外掛。
- 點選 Connect,然後登入 Checkout Page。
或者在 Developer mode 中將它新增為自訂連接器:
- 開啟 ChatGPT.com,前往 Settings → Security and login。啟用 Developer mode。
- 關閉設定,然後前往 chatgpt.com/plugins。
- 點選右上角的 +。
- 輸入:
- Name:Checkout Page
- MCP server URL:https://mcp.checkoutpage.com
- Authentication:OAuth
- Name:Checkout Page
- 開啟 I understand and want to continue。
- 點選 Create,然後依照 Checkout Page OAuth 流程完成連線。
- 開啟一個新的對話。
- 點選 +,搜尋 Checkout Page。
**測試方式:**詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
Claude
- 開啟 Claude,前往 Settings → Connectors。
- 點選 Add custom connector。
- 輸入:
- Name:Checkout Page
- MCP server URL:https://mcp.checkoutpage.com
- Name:Checkout Page
- 點選 Add,然後在 Checkout Page 連接器上點選 Connect 並登入。
**測試方式:**詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
Cursor
最快的方式是一鍵安裝:
或者手動新增:
- 開啟 Cursor,前往 Settings → MCP。
- 點選 Add new MCP server。
- 輸入:
- Name:checkoutpage
- 點選 Save,然後依照 OAuth 提示登入。
**測試方式:**在 Cursor 聊天中詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
VS Code
GitHub Copilot Chat 和官方 MCP 擴充功能都支援我們的伺服器。
- 開啟 VS Code,並從命令選擇區執行 MCP: Add Server 命令(
Cmd/Ctrl + Shift + P)。 - 選擇 HTTP。
- 輸入 URL:https://mcp.checkoutpage.com
- 命名為:checkoutpage
- 依照瀏覽器中開啟的 OAuth 提示登入。
**測試方式:**在 Copilot Chat 中詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
Codex
在 Codex CLI 中,執行一個命令即可新增伺服器並開始登入:
codex mcp add checkoutpage --url https://mcp.checkoutpage.com
或者在 Codex 應用程式中新增:
- 開啟 Codex,前往 Settings → MCP servers。
- 點選 + Add server。
- 選擇 Streamable HTTP 作為傳輸方式。
- 輸入:
- Name:Checkout Page
- 點選 Save,然後依照 OAuth 提示登入。
**測試方式:**詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
Claude Code
分兩個步驟:新增伺服器,然後在 Claude Code 中登入。
claude mcp add --transport http checkoutpage https://mcp.checkoutpage.com
接著開始工作階段:
claude
在工作階段中:
- 輸入
/mcp。 - 使用方向鍵反白選取
checkoutpage,然後按 Enter。 - 選擇 authenticate,並依照 OAuth 提示操作。
**測試方式:**詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
Lovable
- 在 Lovable 中開啟 Connectors,然後選取 + 按鈕。
- 選擇 MCP server。
- 輸入:
- Server name:Checkout Page
- Server URL:https://mcp.checkoutpage.com
- Server name:Checkout Page
- 保留 OAuth,點選 Add & authorize,然後登入 Checkout Page。
**測試方式:**詢問 「列出我在 Checkout Page 中的結帳頁面、活動和表單。」
Cline
- 在 Cline 面板中,點選頂端工具列的 MCP Servers 圖示。
- 開啟 Remote Servers 索引標籤。
- 輸入:
- Server Name:checkoutpage
- Server URL:https://mcp.checkoutpage.com
- Transport Type:Streamable HTTP
- Server Name:checkoutpage
- 點選 Add Server。Cline 會開啟 Configure 索引標籤。
- 在 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 和折扣碼。
你可以用相同方式推出任何新優惠:課程上線、Beta 版報名頁,或限時促銷。
設定含票券的活動
你正在籌辦晚宴,希望今天就開始售票,提供早鳥價,並向每位賓客詢問一個問題。
將以下內容貼到你的 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 工具連線時,伺服器也會提供一份簡短的測試模式說明給助理,因此你可以直接用白話提出要求。
測試提示
兩個提示會執行完整的測試流程。它們會以斜線命令或提示的形式,出現在支援 MCP 提示的 AI 工具中。例如,在 Claude Code 中,輸入 /mcp__checkoutpage__ 並選擇其中一個。
| 提示 | 功能 | 引數 |
|---|---|---|
test_checkout | 將結帳頁面、活動或表單切換至測試模式,在瀏覽器中進行測試購買、檢查記錄,然後將測試模式還原為原本的狀態。 | pageId,以及選填的 pageType:checkout(預設)、event 或 form |
test_upsell_funnel | 將現有單擊加購漏斗的兩個頁面都切換至測試模式,分別執行一次接受和拒絕優惠的流程、檢查記錄,然後將測試模式還原為原本的狀態。此提示不會建立頁面。 | initialPageId,以及選填的 upsellPageId |
例如,若要在 Claude Code 中測試活動,請輸入提示名稱、活動的 ID 和頁面類型:
/mcp__checkoutpage__test_checkout {eventId} event
如需漏斗相關資訊,請參閱測試加購漏斗。
若要付款,助理需要瀏覽器工具,例如 Claude in Chrome、Playwright MCP server 或 ChatGPT agent mode。若沒有這類工具,助理會提供付款連結讓你自行付款,然後繼續檢查記錄。
疑難排解
安全性與隱私權
- MCP server 只會在你透過 OAuth 登入後代表你執行操作。
- 權杖的權限範圍僅限於你的帳戶。你可以隨時在 Checkout Page 設定中撤銷存取權。
- 讀取工具(
list_*、get_*)不會變更資料。寫入工具(create_*、update_*、upload_*、archive_*、reorder_*)和破壞性工具(delete_*)的名稱都很明確,助理可以在變更資料前先詢問你。刪除操作無法復原,因此請在助理執行delete_*工具前先確認。 - 助理查詢的資料(客戶詳細資料、付款資訊)會傳送至你的 AI 工具以產生回應,與其他連接器的運作方式相同。請選擇資料處理政策符合你需求的 AI 工具。