iT邦幫忙

2021 iThome 鐵人賽

DAY 23
0
永豐金融APIs

永豐金 API - 豐支付 PHP SDK 設計及 WooCommerce 電商串接實戰系列 第 23

Day 23 - WooCommerce: 建立信用卡付款訂單 (上)

圖 23-1
圖 23-1: 設定頁面

昨天已經完成了永豐金流信用卡收款 API 所需要的設定選項頁面,並填入 Shop No 及四組 Hash key,啟用沙盒模式之後,就要來開始建立信用卡付款的 WooCommerce 訂單囉!

圖 23-2
圖 23-2: 儲存設定

改一下付款方式的標題,順便測試一下儲存。確認設定值儲存成功後,開始寫付款的程式。

處理付款

還記得 Day 20 建立付款閘道的文章嗎?裡頭提到的 Payment Gateway API 有一個方法 (method) 堪稱重點中的重點,它就是 process_payment。用法可以參考文件傳送門

這個方法在 WooCommerce 中被執行於:

[...]/woocommerce/includes/class-wc-checkout.php

檔案內容如下圖。

圖 23-3
圖 23-3: process_over_payment (method)

從 WooCommerce 的核心檔案 class-wc-checkout.php 中,上圖 第 19 行 可以看到,經過處理後取得結果後,再進行轉址。

當顧客在您的商店結帳頁按下結帳按紐,接下來 process_payment 這個方法就會被執行。因此在這裡面寫要和金流串接的相關程式碼來處理付款。

圖 23-4
圖 23-4: process_payment (method)

在 Day 20 時我們建立的程式範例包含了這一段。

第 10 行 使用 wc_get_order 函式取得 WC_Order 類別的實例。
第 13 行 購買了,我們先預扣這個訂單內的商品庫存。
第 16 行 購買了,所以要清空購物車,以免讓顧客誤以為結帳流程沒走完。
第 19-21 行 這個類別方法的制式回傳格式,是一個陣列,包含了 result 及 redirect 兩個欄位。以個這範例來看,會轉址到感謝頁面 (thank-you page)

接下來要開始導入 Sinopac PHP SDK 來幫助我們建立訂單。

導入 Sinopac PHP SDK

在這個流程中,筆者會將Day 15 使用 Pure PHP 建立購物網站一文的範例程式碼直接複製過來,做一點點小修改。

實例化 QPay 類別

圖 23-5
圖 23-5: helper.php

設計一個專門實例化的幫助函式來實例化 QPay 類別。考量到另外一種付款方式「虛擬帳號」ATM 付款也是採用同樣的設定選項,因此拉出來放在 helper.php。

第 17 行 在設定頁面中的 Shop No。
第 21-24 行 在設定頁面中的四個 Hash key 欄位。
第 27 行 在設定頁面中的沙盒模式選項。
第 28 行 在設定頁面中,沙盒模式使用的 Shop No。
第 32-35 行 在設定頁面中,沙盒模式使用的四個 Hash key 欄位。

這樣只要在這個函式的參數注入繼承 WC_Payment_Gateway 的實例,就可以自動取得實例化的 QPay。

改寫 process_payment

圖 23-6
圖 23-6: process_payment (method)

第 9 行 取得 QPay 實例。
第 13-14 行 取得商品名稱。訂單中可能有多筆,取第一筆當代表就好。
第 17-23 行 組成要給永豐金流收款 API 的訊息內文結構。
第 27 行 送出建立信用卡訂單的請求到給永豐 API。
第 28 行 分析永豐 API 的回覆。
第 30-32 行 有錯誤直接丟出 Exception 沒關係,WooCommerce 會補捉它並在 AJAX 跑完後顯示紅色錯誤訊息在頁面上。
第 34-42 行 永豐 API 給我們成功的回覆,先預扣庫存、清空購物車,接著轉址到刷卡頁面。
第 44 行 會走到這一行代表 API 回覆錯誤訊息,存 log,準備偵錯。
第 59-80 行 分析訊息回覆,取得刷卡介面的網址。

流程總結

改寫 process_payment第 22 行,我們要建立一個接收永豐金流收款平台 POST 回來的訊息值,取得 PayToken 才能知道此筆是刷卡成功還是失敗。

明天,就來完成這種個刷卡流程吧。


上一篇
Day 22 - WooCommerce: 信用卡付款設定選項 (下)
下一篇
Day 24 - WooCommerce: 建立信用卡付款訂單 (下)
系列文
永豐金 API - 豐支付 PHP SDK 設計及 WooCommerce 電商串接實戰30

尚未有邦友留言

立即登入留言