[WebTask.io x Stripe]係靜態網站上建立Stripe 收款頁面。,b,

Posted on Fri, Nov 2, 2018 科技趣聞

近日孤單寂寞冷,想係自己嘅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都可以做到。

Stripe

官方網站: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?

webtask.io

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

準備

  1. Stripe 帳號及其API key
  2. webtask.io 帳號
  3. 你嘅Editor(例如Atom)

付款頁面

建立付款掣

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

<form action="loading.html">
<input name="price" id="stripeValueInput" value=10 min="10" type="number" onchange="onValueChangeCallback()"/>
<div style="padding-left: 8px; padding-top: 8px;" id="payButtonHolder" style="height:300px;"></div>
</form>

請注意務必要以

包覆所有參數,否則最後有關資料無法提交進行下一步。而係該範例中,我會每當更改價錢就會重新生成付款按鈕(會不同價格),所以我亦需要一個去承載付款按鈕。此外,亦需要注意仿照上面,爲放置付款掣嘅手動設置高度(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>' 方式去建立