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


2018-11-02
IT及Linux綜合 > NodeJS／Deno

share

近日孤單寂寞冷，想係自己嘅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>' 方式去建立

expand_less