先前分享過 WordPress 目前積極在推動的 WooCommerce Blocks 區塊編輯器，裡面甚至包含了結帳頁的區塊，可以同步購物車的商品數量以及直接在編輯器中管理結帳欄位，但很可惜的是這個結帳區塊支援的金流外掛有限，更不用說是台灣的金流，因此決定自己先跳坑踩個雷來試著整合一下，實作效果如下：

如果你也想體驗看看的話可以依照以下步驟：

1. 安裝 WooCommerce 6.4.0 版以上
2. 安裝 WooCommerce Blocks 7.4.0 版以上
3. 安裝 RY WooCommerce Tools 最新版
4. 下載 WooCommerce 台灣金流結帳區塊 taiwan-payments-for-wc-block.zip ​
5. 啟用以上四支外掛
6. 啟用 RY Tools 綠界金流模組
7. WooCommerce 付款方式啟用綠界信用卡
8. 將結帳頁面的短代碼移除，改用 checkout 區塊

順利的話就可以在 4. Payment Options 的地方看到綠界信用卡的選項：

目前這支外掛只支援綠界信用卡的選項，其他付款方式都還沒整合，所以就先幫我玩玩就好，如果你想用在正式環境的話建議是不要，我接下來會陸續整合其他的台灣金流外掛，有任何想法再跟我說吧，以下是寫給開發者看的內容：

整合 WooCommerce Blocks payment method 心得

心得一句話：「真是天殺的難搞！」

可能東西還很新吧，相關的教學都還只有官方的 Github 說明，而裡面的範例給的是 WooCommerce Stripe Plugin 帶有 52 個檔案變動的 Pull Request，還需要自己爬哪裡用到關鍵的 Hook 跟 Class，然後因為 Stripe 這支外掛結構滿大的，研究起來花了不少時間，後來索性去看 WooCommerce 內建的付款方式是如何整合。

但下場也沒好到哪裡去，woocommerce-gutenberg-products-block 裡面東西更多，引入 block 的方式跟官方文件又有些許不同，於是去抓目前已經有支援結帳區塊的金流外掛，最後找到 woocommerce-gateway-eway 這支，它的結構相對單純好理解得多。

整合過程中踩到以下幾個雷：

1. 找不到抽象類別 AbstractPaymentMethodType

整合的方式跟建立金流很像，也是需要繼承一支類別來給定對應的方法，但不管是用 autoload 還是 require 的方式載入，都無法抓到 WooCommerce Blocks 裡面 AbstractPaymentMethodType 這個類別：

我是直接複製貼上文件裡面的 namespace，想說都完全照貼了怎麼可能還會有錯，搞了好久想說從別的外掛複製看看，才驚覺文件裡面的路徑寫錯，Integration 少了一個 s…

這告訴我官方文件不一定是 100% 正確的…

2. 缺少類別判斷

發現上述問題後以為接下來就海闊天空了，但事情沒那麼簡單，我習慣用 autoload 來載入 PHP 檔案，但發現如果直接在外掛的主檔案做載入的話，依舊抓不到 AbstractPaymentMethodType，後來文件裡面有寫因為載入順序的話，必須要先判斷該類別是否存在，有存在的話才進行載入，實驗過正確的寫法如下：

3. Webpack 編譯環境

本來想打算用官方的 @wordpress/create-block 來做，但知道他是根據 create-react-app 而來的所以應該很肥，因此想說自己來配置 Webpack 環境，無奈東西太多且相關的知識還遠遠不足，目前第一版外掛 JS 的編譯部分我完全沒處理，我是作弊直接拿 WooCommerce 內建的 BankTransfer 編譯過的 JavaScript 來改XD，關鍵在 name 的這個地方要改成跟金流類別裡面同樣的 id 名稱：

詳細的外掛結構可以參考 Github 存放庫，我會繼續把 Webpack 的環境配置給搞懂，到時候再把它開源出來，希望透過這樣的拋磚可以讓開發者大大們願意嘗試整合 WooCommerce Blocks，重點是可以一起交流研究，不然光是少了 s 的那一關我就快被逼瘋了，我們下週見！