iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
永豐金融APIs

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

Day 28 - WooCommerce: 顯示虛擬帳號付款資訊

昨天雖然完成了以永豐銀行虛擬帳號付款方式進行結帳,但如果沒有找個地方顯示帳號,顧客也不知道要匯錢到那裡,因此我們必須好好的規劃一下顯示這重要資訊的地方。

顯示虛擬帳號付款資訊

就電商大部分的購物流程來說,會出現在兩個地方。

  • 訂單完成頁面
  • 訂單詳細頁面

圖 28-1
圖 28-1: SinoPac_Payment controller

來到 SinoPac_Payment 的 init 區塊。在這裡新增兩個 Hook。

第 13 行 這個 Hook woocommerce_thankyou 出現在訂單完成頁的底部,我們要將匯款資訊插入該頁的底部。
第 14 行 woocommerce_after_order_details 顧名思義,這個 Hook 的位置在訂單詳細資料的下方。

訂單完成頁面

圖 28-2
圖 28-2: display_transation_info (method)

第 12 行 讀取交易資訊,如果有存在的話,且有 ATM 資訊,才顯示。
第 18 行 載入網頁樣板,是一個顯示虛擬帳號資訊的區塊。

流程展示

圖 28-3
*圖 28-3: 匯款資訊於訂單完成頁

在購買完商品之後,顧客已經可以在訂單完成頁看到匯款的帳號資訊。

訂單詳細頁面

圖 28-4
圖 28-4: display_payment_info_for_va (method)

第 11 行 如果付款方式是 sinopac-va,才顯示這整個區塊。
第 23 行 我們送出的帳號過期時間為 7 天。
第 25 行 樣板檔案的內容。

圖 28-5
圖 28-5: views/order_detial.php

網頁樣板,和結帳完成頁面一樣是一個顯示虛擬帳號資訊的區塊,多了該虛擬帳號的過期時間。

流程展示

圖 28-6
*圖 28-6: 匯款資訊於訂單詳細頁

由以上 GIF 展示從完成結帳再點選進我的帳號,再進到訂單列表頁面,點選剛剛完成的訂單,可以看到匯款的資訊已經在訂單詳細頁面的下方囉!

圖 28-7
*圖 28-7: 匯款資訊於訂單詳細頁

流程總結

以上就是虛擬帳號付款的一些細節,它的好處是不跳轉到其它的網站(例如信用卡付款會跳轉到永豐銀行收款平台的刷卡頁面)。但缺點是要被動地等待顧客付款。

明天鐵人賽的倒數第二天,要和大家分享的是,永豐銀行收款平台收到匯款後通知我們關於顧客已付款的細節,我們明天見。

註:Day 28 的範例程式碼可在這裡瀏覽


上一篇
Day 27 - WooCommerce: 建立虛擬帳號付款訂單
下一篇
Day 29 - WooCommerce: 接收虛擬帳號付款成功通知
系列文
永豐金 API - 豐支付 PHP SDK 設計及 WooCommerce 電商串接實戰30

尚未有邦友留言

立即登入留言