以下內容以 Google Apps Script（GAS）為核心，示範如何從 0 到 1 打造「付費版 HTML 應用」的典型做法，並附上範例程式碼與商業化管道。你可以依產品定位，把〈A〉純 Web App 收費 或 〈B〉Marketplace 付費 Add-on 擇一（或混合）採用。
1 前置規劃：決定商業化路徑
| 路徑 | 收費機制 | 優點 | 可能限制 |
|---|---|---|---|
| A. 純 Web App + 第三方金流（Stripe／PayPal／Google Pay） | 你自行串接金流，下單→Webhook→GAS 驗證 | 開發彈性最大、可對外網使用 | 金流合規、自己維護授權資料庫 |
| B. Google Workspace Marketplace 付費 Add-on | 透過 Google 結帳/授權 API，自動幫你處理付款與授權 | 原生授權檢查、企業採用門檻低 | 必須完成 Marketplace 上架審查，部分國家/地區需先成為 Google Cloud Partner |
何時選 B？ 目標客群以 Google Workspace 使用者/企業為主，且希望 Google 代管收費與 License。
何時選 A？ 面向一般網路使用者、或需要一次性／訂閱收費邏輯更彈性時。
2 建立 Apps Script 專案
-
建立獨立腳本：script.new → 在 Deploy > New deployment 選 Web app。
-
Google Cloud API 與 OAuth：若串第三方金流，需在 Cloud Console → 啟用
UrlFetch、OAuth 同意畫面。 -
權限範圍：建議只要
https://www.googleapis.com/auth/userinfo.email及必要服務。 -
配額概念：付費流量一多，Apps Script 每分鐘執行次數與
UrlFetchApp都有上限，可考慮
把金流 Callback 移到 Cloud Run / Cloud Functions。 (Quotas for Google Services | Apps Script)
3 範例架構（路徑 A：Web App + Stripe）
3-1 前端檔 index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://js.stripe.com/v3/"></script>
</head>
<body>
<h2>升級為專業版</h2>
<button id="payBtn">立即付款 NT$199/月</button>
<script>
const stripe = Stripe('pk_test_xxxxxxxxx'); // Stripe 公鑰
document.getElementById('payBtn').onclick = async () => {
const {sessionId} = await google.script.run
.withSuccessHandler(async ({sessionId})=>{
await stripe.redirectToCheckout({sessionId});
})
.createCheckoutSession(); // 伺服器端產生 Session
};
</script>
</body>
</html>
3-2 伺服器端 Code.gs
const STRIPE_SK = 'sk_live_xxxxxxxxxxxxxxxxxxx';
/** 首頁 */
function doGet() {
return HtmlService.createHtmlOutputFromFile('index')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
/** 產生 Stripe Checkout Session */
function createCheckoutSession() {
const payload = {
payment_method_types: ['card'],
mode: 'subscription',
line_items: [{price: 'price_123456', quantity: 1}],
customer_email: Session.getActiveUser().getEmail(),
success_url: ScriptApp.getService().getUrl() + '?success=1',
cancel_url: ScriptApp.getService().getUrl() + '?canceled=1',
};
const resp = UrlFetchApp.fetch('https://api.stripe.com/v1/checkout/sessions', {
method: 'post',
payload,
headers: {'Authorization': 'Bearer ' + STRIPE_SK}
});
return JSON.parse(resp.getContentText()); // 回傳 sessionId 給前端
}
/** Stripe Webhook（建議搬到 Cloud Run）*/
function doPost(e) {
// 1. 驗證 Stripe 簽章
// 2. event.type === 'checkout.session.completed' → 將 e.customer_email 記錄為付費用戶
}
參考 ：Apps Script + Stripe v3 整合社群範例 (Stripe payment system - client version v3 - Apps Script integration)、Stripe → Sheets 同步教學 (Use Google Apps Script to import Stripe data to Google Sheets)。
4 授權資料管理
| 方法 | 說明 |
|---|---|
| Google Sheets | 最快上手，建立 license 工作表存 email / 到期日 |
| PropertiesService | 把授權資訊寫進「腳本屬性」；查詢速度快但不易人工檢查 |
| Cloud SQL / Firestore | 使用戶數 > 5,000 時建議用，結合 Cloud Functions Webhook |
授權檢查放在 onOpen()（如 Spreadsheet Add-on）或每次 doGet() 開頭：
function isPaidUser(email){
const sheet = SpreadsheetApp.openById('xxxx').getSheetByName('license');
return sheet.getRange('A:A').getValues().flat().includes(email);
}
5 路徑 B：上架 Google Workspace Marketplace（官方付費）
-
Manifest 加入
"addOns": { ... }，並在oauthScopes列 whitelist。 -
License 機制：Marketplace 會在 request header 帶
X-Google-WorkSpace-Add-On-Authorization-Mode，或你可直接呼叫 License Manager API 取license.state == ACTIVE判斷。 -
設定付費：在 Google Cloud Partner Portal 定價，支援「一次性」「訂閱」與「域內批量授權」。 (Add-ons overview - Google Workspace, Add-on types | Google Workspace add-ons)
-
審核：須提供隱私權政策、功能錄影、退款機制。
6 部署與版本控管
| 階段 | 動作 |
|---|---|
| α 測 | Deploy > Test deployments 指定測試者 email |
| β 版 | 發 Deployment #2，Execute as: Me、Who has access: Anyone with Google 帳戶 |
| 正式版 | New version → Web app, 或 Marketplace「Production」通道 |
⚠️ 提醒：切換新版本後，舊版 URL 不變；若要強制所有既有使用者更新，需在程式中判斷 @version 或用中的 scriptId 發佈邏輯。
7 定價、稅務、法規小抄
-
GST/VAT：Google Marketplace 上架付費 Add-on 時，Google 會代收稅；自行串金流須確認各地消費稅負。
-
隱私權條款：GAS 存取任何 PII 時，Marketplace 審核必須附 Data-Privacy Policy URL。
-
配額溢出：高付費用戶量時，用 Triggers 叫 Cloud Run 才不會被 Apps Script 日額度限縮。
8 延伸強化
-
使用 Apps Script Web-App 做「管理後台」：讓你在同一 GAS 專案，快速查詢訂閱名單、手動停權。
-
導入 Google Chat / Gmail Add-on：同一碼庫多平台，Marketplace 一次上架，多處收費。
-
分析：把 Stripe Webhook 打到 BigQuery → Looker Studio 監看 MRR。
小結
-
純 Web App：彈性大、快速上線，金流自己顧。
-
Marketplace Add-on：授權內建、信任度高，但需通過審核。
依你的目標客群與維運能力選路徑，再按本文範例改寫程式，即可在 GAS 上推出真正的「付費版 HTML 應用」。祝開發順利🚀