Portaly
Portaly
登入免費註冊
Portaly Blog

繁體中文 | EN

文章總覽使用教學精選範例內容經營新手推薦訂閱

Portaly Payment Agent 完整教學 | 為你 vibe coding 產品串接交易系統:金流、訂閱、發票、申報一次搞定

2026-06-12

如果你正在用 vibe coding(用 AI agent 像 Claude Code、Cursor、Windsurf 直接生成程式碼)打造自己的產品,遲早會遇到「怎麼讓用戶付錢」這一關。Portaly Payment 就是設計給這群開發者的付款串接方案,讓 AI 直接幫你接好整套金流系統。

金流系統涉及處理金流、刷卡服務,還包含訂閱管理、發票開立、稅務申報等流程。這些過去是 Portaly 系統的核心功能,現在有了 Portaly Payment agent,你只需要幾個步驟,就能讓 AI agent 協助你將這套系統串接到你的 vibe coding 產品上!

這篇文章會帶你:

  1. 了解 Portaly Payment Agent 能做什麼
  2. 安裝 Portaly Payment Skill,讓你的 AI 工具學會操作 Portaly
  3. 取得 API Key,讓 AI 幫你把 Portaly Payment 接進自己的產品

內容目錄

內容目錄

Portaly Payment Agent 是什麼?

Portaly Payment Agent 是 Portaly 提供的交易系統服務,讓 vibe coder 和 AI 開發者不用自己刻金流系統,一鍵串接就能收款。

具體來說,你不需要直接對接信用卡收款商、自己建結帳頁面,也不需要分別處理 Email 驗證、發票開立、或訂閱週期管理……這些都由 Portaly Payment Agent 這套交易系統統一處理(如下表所示)。

一筆完整的交易會包含這些環節

環節 自己串接 Portaly Payment
金流串接 自己對接收款商 ✓ Portaly 負責
結帳頁面 自己建 UI、處理卡號輸入 ✓ Portaly 代管結帳頁
Email 驗證 自己實作 ✓ Portaly 負責
信用卡加密 自己符合 PCI 規範 ✓ Portaly 負責
交易管理
單筆交易 自己建購買與付款流程 ✓ Portaly 負責
訂閱管理開始訂閱、取消訂閱 自己建狀態機與 API ✓ Portaly 負責
協助退款 自己對接收款商退款 API ✓ Portaly 負責
折扣碼設定 自己建折扣邏輯與驗證 ✓ Portaly 負責
合規與文件
發票開立 自己串接電子發票系統 ✓ Portaly 自動處理
Webhook 驗證 自己實作 HMAC ✓ Portaly 提供標準實作

雖然背後牽涉這麼多環節,但你實際要做的事情很簡單,AI 裝了 Portaly Payment Skill 之後,會幫你把整套系統串起來,你只需要確認三件事:

  • 你的系統要能「建立結帳 Session」,跟 Portaly 要一個結帳頁面的網址
  • 把用戶導向這個網址,讓他在 Portaly 的頁面完成付款
  • 收到 Portaly 的付款完成通知後,更新自己的資料庫(例如開通訂閱)

至於方案設定、Webhook 驗證這些比較底層的實作細節,你不用自己寫,跟 AI 說你的需求,它會照著 Portaly Payment Skill 直接幫你完成。

你可以用 Portaly Payment Agent 幫你的產品用戶設定以下三種付款方式:

計費模式說明適合用途
one-time單次付款,不自動續費課程、電子書、數位商品
monthly每月自動續扣訂閱制服務、會員制
yearly每年自動續扣訂閱制服務、會員制

開始使用:3 步驟讓 AI 幫你串接 vibe coding 產品

Step 1:安裝 Portaly Payment Skill

Skill 是一包給 AI 用的說明書,告訴 AI 怎麼呼叫 Portaly API、怎麼幫你建立方案、怎麼產生串接程式碼。裝好之後,你只要用自然語言跟 AI 說你想做什麼,它就能協助你完成。

以下 AI coding 工具都支援 Skill 安裝:

  • Cursor
  • Claude Code
  • Windsurf
  • GitHub Copilot(agent
  • Codex
  • 其他支援執行 npx skills 指令的 AI 工具

安裝步驟

1. 複製 Skills 安裝指令

首先進到 Portaly Payment 後台(變現工具 > Payment),在「安装 Portaly 付款 Skill」區塊,點擊「複製 Prompt」。

到 Portaly Payment 後台點擊安裝skills 的指令
Portaly Payment 後台

也可以直接在此複製指令:

npx skills add portaly-ai/portaly-skills --skill portaly-payment
2. 安裝 skills

複製完指令之後,可以選擇請 coding agent 協助安裝或是使用終端機(Terminal)安裝。

範例一:使用 Claude 安裝
  1. 選擇你的專案資料夾
  2. 貼上剛剛複製的安裝 Prompt
  3. Agent 會執行(第一次安裝的話可能會詢問是否同意執行安裝指令,點擊允許即可)
  4. 看到完成訊息,Skill 就裝好了!
使用 Claude 安裝的對話內容範例
範例二:終端機(Terminal)安裝
  1. 在你的專案根目錄打開終端機(Terminal),貼上並執行執行剛剛複製的指令。
  2. 指令跑起來後,會出現互動式選單,可選擇要安裝到哪些 AI 工具。如果你用的工具都在預設清單裡,直接按 Enter 就好。如果想新增或取消某個工具,可用上下鍵移動游標、空白鍵切換勾選,再按 Enter 確認。
  3. 接著會顯示安裝摘要和安全掃描結果,確認沒問題後選 Yes 繼續。
  4. 看到完成訊息,Skill 就裝好了!
第二步:選擇 agent 的畫面
第二步:選擇 agent 的畫面
3. 安裝完成

安裝完成後,你的專案裡會出現 .agents/skills/portaly-payment/ 資料夾。重新開啟你的 AI 工具(或重啟對話),它就能使用這個 Skill 了。

之後要更新 Skill 版本時,執行以下指令即可:

npx skills update portaly-payment

Step 2:申請 API Key

Portaly Payment 後台(變現工具 > Payment),在「建立 API Key 管理」區塊,點擊「建立新 API Key」建立一組 API Key。

建立時可以選擇不同模式的 API Key:

  • Test 模式:測試用,不會真的扣款
  • Live 模式:正式上線用,會觸發真實付款

建議先用 Test 模式開發,測試完成後再換 Live 模式。

建立時會有兩種 API Key 可以選擇

PORTALY_API_KEY 只在建立當下顯示一次,記得在瀏覽後記錄下來。

建立完成後會拿到兩個值:

PORTALY_API_KEY=pcs_test_xxxxxxxxxxxxxxxx
PORTALY_CALLBACK_SECRET=xxxxxxxxxxxxxxxx

在專案目錄(通常在編輯器的左側)中可以找到 .env 檔,像是下張圖的專案架構中所示。把這兩個值直接貼到 .env 檔。如果使用 Git 管理程式碼的話,可一併確認 .gitignore 有包含到 .env,避免機密資料被推上 Git。

*特別留意:如果尚未通過「金流審核」,僅能使用「測試 API Key」。這時,確定串接測試成功,就趕快進行審核吧!

專案目錄與檔案所在位置示意

Step 3:讓 AI 幫你串接

Skill 裝好、API Key 存好之後,直接開口跟你的 AI agent 說你想做什麼就好。

以下是一些可以直接使用的提示語範例:

月費訂閱制

幫我用 Portaly Payment 建立一個月費 299 元的方案,然後在我的專案裡加上結帳流程,包含建立 checkout session 的 API 和處理付款完成 callback 的邏輯。

建立完成後,可以將自己專案中的商品透過 Portaly 頁面進行付款,例如以下付款畫面:

月訂閱付款頁面範例

單次購買

我想賣一堂課程,定價 1980 元,一次付清。幫我用 Portaly Payment 串接,用戶按下購買後導到 Portaly 結帳,付完款後更新我資料庫的訂單狀態。

AI 裝了 Skill 之後,會知道怎麼呼叫 Portaly API 建立方案、在你的專案產生建立 checkout session 的程式碼、提醒你把 API Key 放進 .env 等。

單次付款頁面範例

月費訂閱管理

月費方案還支援取消、恢復訂閱,以及讓訂閱者自己管理的功能。這些都可以在已安裝 Portaly Payment Skills 的情況下,請 AI 幫你串接,例如:

幫我加一個「取消訂閱」的功能,用戶按下後停止下次自動扣款,但保留到當期結束。

AI 會幫你產生對應的程式碼,包含呼叫 Portaly API 和串接到你的網站流程。

折扣碼

想辦早鳥優惠或行銷活動?可以建立折扣碼,讓用戶結帳時輸入代碼享有優惠。例如:

幫我建立一個折扣碼「EARLYBIRD2026」,前 3 個月打五折,每個人只能用一次,截止日是今年底。

AI 會直接呼叫 Portaly API 建立折扣碼,也會幫你在結帳流程裡加上套用折扣的邏輯。

發票設定確認

Portaly Payment 會在每筆付款完成後自動處理發票,不需要你這邊另外串接電子發票系統。如果想確認設定是否正確,可以這樣請 AI 幫你:

幫我確認 Portaly Payment 的發票設定是否已啟用,確保用戶付款後能正確收到發票,不需要我們這邊另外處理。


串接流程總覽

AI 幫你串接完成後,整個交易流程如下:

運用 Portaly Payment 開發專案之流程示意圖
運用 Portaly Payment 開發專案流程示意圖

你的系統只需要負責建立 Session、接收通知、更新自己的資料庫。其餘環節,包含從結帳介面到信用卡安全、從 Email 驗證到發票、從訂閱扣款到週期管理,都由 Portaly Payment 這套交易系統統一處理。

常見問題

Q:不會寫程式,可以用 Portaly Payment 嗎?
只要你的 AI coding 工具支援 Skill 安裝,直接用自然語言描述需求,AI 會協助產生串接程式碼,不需要自己寫底層邏輯。

Q:Portaly Payment 支援哪些 AI coding 工具?
目前支援 Cursor、Claude Code、Windsurf、GitHub Copilot(agent)、Codex,以及其他支援 npx skills 指令的工具。

Q:使用 Portaly Payment 要花多少錢?

費用主要看交易抽成比例,依方案不同:

方案月費交易抽成適合對象
基本方案NT$0(免費)12%剛開始、交易量還不大的開發者
頂級方案NT$219/月6%交易量較大、想壓低抽成比例的產品

詳細費率與方案比較,可以看 Portaly 詳細方案比較

Q:測試完成,要怎麼切換到正式收款?

回到 Portaly Payment Agent 後台 建立一組 Live 模式的 API Key(會是 pcs_live_... 開頭),換掉 .env 裡的值就好,其他程式碼不需要改,方案也不需要重新建立。

Q:API Key 忘記存了,找不到原本的值怎麼辦?

回到 Portaly 後台重新建立一組新的 API Key 就好。不過要注意,建立每一組 API Key 時都會包含兩個搭配好的值:API Key(pcs_test_...pcs_live_...)和 Callback Secret,這兩個是一對的,記得一起換掉 .env 裡的兩個值,不能只換其中一個。

總結

Portaly Payment Agent 是一套代管的交易系統,把一筆交易所需的所有環節統一處理。透過 Portaly Payment Skill,AI 可以替你完成大部分的串接工作。

透過 Portaly Payment,你可以:

  • 一行指令,就能把同一套 Skill 裝進 Cursor、Claude Code、Windsurf 等你正在用的 AI 工具
  • 用中文跟 AI 說你想怎麼收費,AI 就能幫你把付款功能寫好,還能先用測試模式跑一次確認沒問題
  • 把訂閱管理、發票開立這些原本要自己處理的環節,統一交給 Portaly Payment
  • 專注在產品本身,不需要自己把交易系統的每個零件拼起來

作者介紹

Portaly 台灣團隊開發的創作者商務平台,提供 Link-in-Bio 個人頁面、數位商品銷售與品牌合作媒合工具,幫助創作者將內容影響力轉化為收入。

官方社群Discord 官方群 | Instagram
用戶精選創作者精選KOL精選品牌精選

打造你的傳送門

Portaly 傳送門迄今超過 200,000 個創作者、品牌、商家使用。30 秒完成註冊,即可打造專屬自己的品牌首頁。

立即註冊