WooCommerce 結帳頁自訂信用卡欄位

最近在接一家有站內付功能的金流商,因此需要在結帳頁整合信用卡資訊欄位,為了避免使用者輸入錯誤,會需要驗證卡號長度、到期日格式、安全碼等等,我找了一些現成的套件來處理,但在整合上發生一些問題。

1. 結帳頁只能有一個 <form> 標籤

我第一個嘗試的套件是 Card,它有純 JS 以及 jQuery 版本,考量到 WooCommerce 的環境我優先採用 jQuery 版本。它的 DOM 結構很簡單,分為上半部的信用卡圖示與下半部實際讓使用者輸入卡號的表單:

<div class='card-wrapper'></div>
<form id="cc-form">
    <input type="text" name="number">
    <input type="text" name="name"/>
    <input type="text" name="expiry"/>
    <input type="text" name="cvc"/>
</form>

之後再引入套件的 JS 檔案即可,但當完成前端的樣式後,我在 WC_Payment_Gateway 裡面的 process_payment() 一直拿不到信用卡的相關欄位,從結帳完成後的輸出參數發現到根本就沒有傳,但我之前新增的結帳頁欄位像是電子發票都有正確傳送。

反覆觀察 WooCommerce 結帳頁才發現到這個套件用了 <form> 標籤,也就是除了 WooCommerce 結帳頁本身的 <form> 以外,還多了套件的這一個,因此我把 <form> 改寫成 <div> 後,就能正確 POST 資料,但這個套件不用 <form> 的話整個 UI 會爆炸,因此只能換其他套件處理了。

2. WooCommerce 結帳頁的載入順序

第二個套件我是在 Codepen 上面找到的,它用了很多 SVG 來顯示各家信用卡的 Logo,而且卡面顏色還可以自訂,於是就決定使用它:

但它沒有 jQuery 版本,另外還引入了 imask 來做輸入欄位的格式驗證,因此整體來說要載入的資源比較多。介面的部分它並沒有使用 <form> 標籤,因此就不會有上述的問題,但想不到卻有另一個棘手的狀況。

該狀況主要發生在 imask 完全沒有作用,卡號、到期日、安全碼的欄位理論上只能輸入數字,但整合到結帳頁後完全沒作用,確認過 imask 有正確引入並有呼叫到該物件,但依舊無法限制使用者所輸入的文字。

於是在想是否跟 JS 的事件觸發 addEventListener 有關,果然測試後發現所有的點擊、文字輸入事件都不會觸發,正當以為是瀏覽器的問題時,才想到 WooCommerce 結帳頁區塊也就是帳單資訊、運送方式、付款方式不是一次全部載入的。

我先使用 setTimeout 在頁面載入後五秒才執行點擊事件,果然就生效了,由於該套件原始的寫法是在 window.onload 來執行所有程式碼,但因為結帳頁是用 Ajax 依序載入,所以當頁面載入後選擇付款方式、信用卡相關欄位都還沒有載入,因此 addEventListener 沒有作用,正確的作法要改用 WooCommerce 的事件。

由於 WooCommerce 的 Ajax 事件是用 jQuery 寫的,因此必須把整段程式碼包在 jQuery 裡面再去執行原生的 JS,這樣才能正確觸發 imask 的欄位驗證功能,程式碼架構如下:

jQuery(function($){
	$(document.body).on('updated_checkout', function () {
        
		const cardnumber = document.getElementById('cardnumber');
		const expirationdate = document.getElementById('expirationdate');

        //...
	});
})

目錄

發佈留言

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

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

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

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

訂閱電子報

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

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

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

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

訂閱電子報

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