iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
永豐金融APIs

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

Day 19 - WooCommerce: 初始化付款外掛

雖然在 WordPress 中擴充功能有很多方式,例如在佈景主題上使用子佈景主題 (child theme) 並在其 function.php 中寫擴充功能。不過那是糟糕的作法。考量很多原因,例如載入順序較後,可使用的 Hook 受限,二是遇到出錯時無法像停用外掛般,停用子佈景主題,因此採用編寫外掛程式的方式在 WordPress 的生態圈中是比較正統的方式,維護較簡單,萬一外掛受歡迎的話,還有商業化營利的機會。

這一系列的 WooCommerce 電商串接實戰,就是採用設計外掛的方式進行串接實作。

外掛命名

這邊的命名指的是外掛的網址 slug,也是外掛的識別字串。

根據 WordPress 的外掛規則,不能把商標放在 slug 的第一位,因此命名會先加個前輟 wc

wc-sinopac-payment

是筆者為這次的外掛命名。在寫這篇文章的同時,也以該名稱建立了 GitHub 的儲存庫

原始碼都會放在上面。

初始化外掛

在 WordPress 的 wp-content/plugins 目錄下建立我們這次要設計的永豐金流收款外掛的目錄 wc-sinopac-shipment。並開建立一個同名的 PHP 檔案。

註:不一定要同名檔案,只是筆者習慣這麼做。在去年的鐵人賽提到 WordPress 外掛的初始化,有比較詳細的介紹,有興趣可以看看該篇文章。

圖 19-1
圖 19-1: wc-sinopac-payment.php 外掛識別區塊

在 WordPres 後台的外掛列表頁時,會掃描 PHP 檔案的識別用的文字區塊,來判定是不是外掛檔案。因此在檔頭放進 WordPress 外掛識別用的字串,如下。

<?php
/**
 * Plugin Name: WooCommerce SinoPac Payment
 * Plugin URI:  https://github.com/terrylinooo/wc-sinopac-payment
 * Description: Credit card and virtual account (ATM) payment methods powered by SinoPac bank.
 * Version:     1.0.0
 * Author:      Terry Lin
 * Author URI:  https://terryl.in/zh/
 * License:     GPL 3.0
 * License URI: http://www.gnu.org/licenses/gpl-3.0.txt
 * Text Domain: wc-sinopac-payment
 * Domain Path: /languages
 */

雖然這支外掛的主要使用者會是在台灣,不過筆者依然以英文為主,再利用 WordPress 的多國語系機制來支援不同國家的使用者。外掛在釋出的時候也會夾帶繁體中文及簡體中文的多語檔案。

圖 19-2
圖 19-2: WordPress 後台 - 外掛列表

一旦完成初始化檔案,進到 WordPress 的後台,外掛列表的頁面,會看到 WooCommerce SinoPac Payment 這支外掛已經在列表上了。

按下「啟用」,就會載入該支檔案。

目錄規劃

這支外掛的目錄結構會是這樣的。

wc-sinopac-payment
   ├── controllers
   ├── includes
   ├── services
   ├── vendor
   ├── views
   ├── LICENSE
   ├── README.txt
   └── wc-sinopac-payment.php

WordPress 外掛的開發者通常會把 Hook 使用和邏輯通通寫在一起。由於筆者受到 PHP 框架常用的 MVC 架構影響較深,也覺得邏輯入口和實際處理邏輯的地方切分出來會比較好維護。

目錄說明

如上目錄樹狀結構所示,筆者會把 Hook 的入口寫在 controllers 目錄中,而像是建立訂單、改變訂單狀態等邏輯放在 services 中,在 HTML 輸出的部分放在 views 目錄中。

初始化檔案

圖 19-3
圖 19-3: wc-sinopac-payment.php

這支用來初始化外掛的檔案,只要啟用後,就會被載入執行。

第 47-54 行 筆者習慣的起手式,會定義常用和路徑的常數。
第 61 行 由於程式語法有版本上的限制,沒達此版本以上不執行。
第 63 行 引入本次會用的一些幫助函式。
第 64 行 引入 Composer 自動載入器。
第 66 行 Todo 事項,準備開始進行。

總結

啟用後,外掛已經開始執行了。Day 20 會介紹的是,定義信用卡付款閘道 (payment gateway),先整合永豐金流的信用卡付款到 WooCommerce 中。歡迎有興趣的朋友繼續鎖定本專欄喔。^^"


上一篇
Day 18 - WooCommerce 測試環境建立 (下)
下一篇
Day 20 - WooCommerce: 定義信用卡付款閘道
系列文
永豐金 API - 豐支付 PHP SDK 設計及 WooCommerce 電商串接實戰30

尚未有邦友留言

立即登入留言