今天是示範使用 Pure PHP 建立購物網站的下集,本來想要錄影片,不過發現這裡沒辦法直接播影片,所以製作了 GIF 示範圖,展示整個購物流程。

圖 15-1
圖 15-1: Terry's 商店 - 實際購買

由於在本機的虛擬網域 sinopac.php.sdk,並沒有 SSL,因此在後段填完卡號送出後,從收款平台轉頁到本機的虛擬網域時,瀏覽器有問一下是否繼續,是瀏覽器的安全機制哦。

示範網站

圖 15-1 的示範網站可經由以下方法安裝。

安裝

這個示範網站以非常簡易的語法編寫,讀者們可以直接從 Composer 安裝,或直接到 GitHub 下載實際操作看看。

Composer 安裝指令:

composer create-project terrylinooo/sinopac-php-demo demo

設定

由於鐵人賽後,筆者的測試帳號會失效,屆時會無法成功送單,因此在您申請了永豐金收款平台的帳號後,請修改成自己的資料喔。這些資料包括 ShopNo 還有四組 Hash Key,設定以下檔案。

app/config.php

圖 15-2
圖 15-2: config.php 內容

QPAY_RETURN_URL 一欄請把 sinopac.php.sdk 修改成您自己的測試網域即可。

流程說明

我們接續 Day 14 的流程,開始進行填單結帳。

結帳

圖 15-3
圖 15-3: 結帳頁面

在這個結帳頁面的填寫收件人表單,以及送出建立訂單的邏輯都寫在這支 controller 中。

app/controllers/checkout_controller.php

第 8-23 行 是結帳網頁。其中第 11 行checkout_handler() 處理送出表單後的動作。

圖 15-4
圖 15-4: checkout_controller.php

第 39-41 行 讀取商品資料,帶出要送給 API 建單的欄位。
第 44-46 行 收貨人資訊是屬於物流的部分,和收款的 API 無關。
第 48-55 行 準備要建立付款訂單,餵給 API 的資料,回顧 Day 8 建立訂單一文,有更詳細的說明。

第 57 行 把訂單資料存成 JSON 檔案放到 storage/orders 目錄中。
第 58 行 取得 QPay 物件。
第 61 行 傳送 API 請求,建立付款訂單。
第 62 行 把 API 回傳的結果分析,取得 第 78 行CardPayURL,然後轉址到永豐金收款平台的刷卡頁面。
第 63 行 當 PHP SDK 在遇到資料丟到 API 一定會回錯建單失敗的情況下,預設丟出 QPayException,可以 try-catch 起來做錯誤處理。

購買完成

刷卡完成會轉回到購買完成頁面 (thank-you page)。

圖 15-5
圖 15-5: 購買完成

在永豐金收款平台填寫完卡號進行付款後,會 POST 資料回來,為兩個欄位,分別是 ShopNo 以及 PayToken。我們收到 Token 之後,用它來查詢訂單,查看看訂單的付款狀況是成功還是失敗。這一整個邏輯都在以下這個 controller 中。

app/controllers/order_controller.php

第 10 行 從全域變數 $_POST 取得 ShopNo。
第 11 行 從全域變數 $_POST 取得 PayToken。

圖 15-6
圖 15-6: order_controller.php

第 16-18 行 驗證 ShopNo 是我們在 config.php 設定的那組以及有 Token,使用 PHP SDK 的 queryOrderByToken 方法來查詢訂單付款狀態。

第 23 行 比較要注意的是,詳細資料是在 TSResultContent 中,而不是直接在 Message 下。

第 25-28 行 就是我們在購買完成頁顯示的交易編號、訂單編號、付款時間以及付款金額了。比較要注意的地方在金額,必須除以 100 才是真正金額,還記得 API 文件的說明吧?那兩個位數是小數兩位,因此我們送單要乘以 100,顯示結果要除以 100。

流程總結

以上就是使用 Pure PHP 做一個簡易的示範網站,藉著 Sinopac PHP SDK,輕鬆就完成刷卡付款的動作囉。

接著,正式進入 WooCommerce 電商的世界,我們明天見 ^^

註:示範網站的原始碼可能會再改善,而讓程式碼和本篇文章不同。以上網址為鐵人賽文章的進度程式碼可以參考。

最後修改日期: 2022-02-15

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。