WooCommerce 台灣金流結帳區塊

目錄

先前分享過 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,後來文件裡面有寫因為載入順序的話,必須要先判斷該類別是否存在,有存在的話才進行載入,實驗過正確的寫法如下:

/**
 * Autoload
 */
require_once TWPAYMENT_PLUGIN_DIR . 'vendor/autoload.php';

add_action( 'woocommerce_blocks_loaded', 'woocommerce_ecpay_credit_woocommerce_blocks_support' );
function woocommerce_ecpay_credit_woocommerce_blocks_support() {
    if ( class_exists( 'Automattic\WooCommerce\Blocks\Payments\Integrations\AbstractPaymentMethodType' ) ) {
        \A7\autoload( TWPAYMENT_PLUGIN_DIR . 'src' );
        add_action(
            'woocommerce_blocks_payment_method_type_registration',
            function( Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry $payment_method_registry ) {
                $payment_method_registry->register( new TWPAYMENT\Blocks\Payments\ECPayCredit() );
            }
        );
    }
}

3. Webpack 編譯環境

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

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

目錄

賴俊吾 / Oberon Lai
賴俊吾 / Oberon Lai

現為全職 WordPress 工程師,網站開發經歷 11 年,專攻前端工程與 WordPress 佈景主題、外掛客製化開發

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!

覺得文章對你有幫助再幫我鼓個掌吧!

相關文章

WooCommerce Notify 支援 Fluent Form 表單發送通知

很開心終於有客戶跟我許願新功能了,第一次加入的完整功能是讓使用 Fluent Forms 表單外掛的站長,能在表單送出後以手機簡訊...

WooCommerce 結帳頁自訂信用卡欄位

最近在接一家有站內付功能的金流商,因此需要在結帳頁整合信用卡資訊欄位,為了避免使用者輸入錯誤,會需要驗證卡號長度、到期日格式、安全...

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料

專注於分享 WordPress 開發、接案技巧、專案管理等自由工作者必備知識與心得

© 2023 想點創意科技有限公司

想點創意科技有限公司 | 統一編號 90516823
Designed by Hend Design | 隱私權政策

訂閱電子報

Hi,我是 Oberon,我會固定在每週五早上發送接案心得以及與 WordPress 相關的電子報,同時也會分享一些實用的開發知識,讓你在 WordPress 的接案路上不孤單!