近日孤單寂寞冷，想係自己嘅blog放個位方便經Stripe收錢。不過因爲係用hexo gen嘅靜態網頁，而Stripe要求一定要用server去做charge先真正過到數……雖然可以直接係javascript到過……但係應該，唔會有人愚蠢到會咁做吧（會暴露secrect key）？但就咁爲咗一個function而開一個NodeJS Project又有少少秦……。之後經過一番搜尋之後發現WebTask.io呢個服務十分好，可以以NodeJS 寫 micro webservice，官方嘅講法係FaaS(Function as a Service)……啫係你只需要寫一個function，唔需要做太多conf都可以做到。

官方網站：https://stripe.com/Stripe係個支付方式，可以經Visa、MasterCard、American Express等嘅信用卡/扣款卡，Apple Pay，Android Pay，WeChat Pay，AliPay等方式都可以，不過似乎要聯絡CS先有得搞……所以唔好咁複雜啦.png。而Stripe最大優點係佢專注於開發者角度，即係佢提供整套APIs，可以讓開發者便利地開發各種收款應用及網上商店，能一站式做到貨品存貨及售價管理、收款及傳送收據等一連串動作，基本上用Stripe做後臺做e-shop嘅話唔需要其他服務架啦。而且支援NodeJS、Python、Go、Java、Ruby甚至乎就咁用curl做API Call亦到可以。而且支援咁多Language之餘手續費仲要平過PayPal……PayPal，what7u doing？

官方網站https://webtask.io/而webtask.io線上即時撰寫、測試、部署HTTP endpoint webservice於一身嘅服務。佢特色係你唔需要整理好整個webservice系統係點，你可以只寫一個function，亦只需要寫function嘅部分，佢就可以直接生成一條公開嘅webservice url供你去呼喚佢。佢免費版本唯一限制係1秒1個request，作爲大公司可以會難啲，但作爲微企業或者個人使用已經十分足夠。

首先第一步梗係開個html file，建立付款掣。

請注意務必要以

包覆所有參數，否則最後有關資料無法提交進行下一步。而係該範例中，我會每當更改價錢就會重新生成付款按鈕（會不同價格），所以我亦需要一個去承載付款按鈕。此外，亦需要注意仿照上面，爲放置付款掣嘅手動設置高度(style="height:300px;")，否則高度係0嘅話就會變成隱藏咗……此外，嘅 action=""請設置到另一版靜態畫面用以等待處理付款過程。 更新付款掣 在此你亦需要創建一個callback function for 嘅數值改變時候去呼喚。 function renderStripePayButton(price){ let payButton = document.getElementById('payButtonHolder') payButton.innerHTML = "" payButton.appendChild(strHtmlPayButton(price)) } function strHtmlPayButton(price){ let newPrice = parseFloat(price) * 100 var s = document.createElement('script'); s.src = "https://checkout.stripe.com/v2/checkout.js" s.setAttribute("class","stripe-button") s.setAttribute("data-key",publishableKey) s.setAttribute("data-locale","auto") s.setAttribute("data-currency","HKD") s.setAttribute("data-description","TTO.MOE 網上支付") s.setAttribute("data-amount","newPrice") return s } 請注意：請勿直接使用 div.innerHTML = '<script>...</script>' 方式去建立