本 repo 範例
倉庫根目錄有一份官方風格的 Payment Element 最小實作，對應 PaymentIntent 自訂表單。
| 檔案 | 角色 |
|---|---|
server.py |
Flask：列出 Charge、渲染結帳頁、建立 PaymentIntent |
public/checkout.html |
付款表單骨架 |
public/checkout.js |
載入 Stripe.js、confirmPayment、顯示狀態 |
public/checkout.css |
表單樣式 |
這是「自訂付款流程」，不是 Checkout 託管頁。若你的目標只是賣一項商品，先看 Checkout 託管頁 會比較短。
怎麼跑
- 把
server.py的stripe.api_key與checkout.js的Stripe("pk_...")換成你自己的測試金鑰。現在填的是 Stripe 文件裡的公開示範 key，只能示意，不能對應到你的 Dashboard。 - 安裝依賴並啟動：
- 瀏覽器開啟 http://127.0.0.1:4242/checkout，用
4242 4242 4242 4242測試。
程式在做什麼
calculate_order_amount 回傳固定 1400（USD 14.00）。真實專案應依購物車在伺服器計價，這正是註解所寫、用來防止前端竄改金額。
POST /create-payment-intent 建立 PaymentIntent，把 client_secret JSON 回給 JS。
checkout.js 用 secret 建立 elements，掛上 linkAuthentication 與 payment 兩個 Element，提交時呼叫 confirmPayment。return_url 請改成你自己的網址；repo 裡若仍是 ngrok 範例，本機請改成 http://127.0.0.1:4242/checkout。
根路徑 GET / 呼叫 stripe.Charge.list，方便你在瀏覽器看測試請款。新的收款流程請不要新增 Charge API 寫入，改走 PaymentIntent。
這份範例還沒做的事
- 環境變數（請自行改掉寫死的金鑰）
- webhook 簽章與出貨
- TWD / 零小數幣別
- 成功後寫入自己的訂單資料庫
補上 webhook 之後，才適合接到正式商品。