結帳頁發票欄位設計：統編與載具怎麼問才不卡單
台灣電商結帳頁特有的發票欄位，前端做不好訪客最後一步猶豫，後端做不好每月都在作廢重開。從統編驗證、載具格式到漸進揭露，附上線前檢查清單。
很多台灣的電商官網，結帳流程前面都做得很順：商品選好、運送方式選好、付款方式也選好了，然後畫面往下一滑，出現一整片「發票資訊」——發票類型、公司抬頭、統一編號、載具類別、載具號碼、愛心碼，六、七個欄位一次全部攤開在眼前。
對訪客來說，這一刻的感受很具體：「我只是要買一罐洗髮精，為什麼突然要我填這麼多東西？」對老闆來說，感受也很具體：客服信箱裡每週都有幾封「發票統編打錯可以重開嗎」「載具存錯了要怎麼補」。
發票欄位是台灣電商結帳頁特有的一段，海外的 Shopify 範本、WooCommerce 原生結帳都不會幫你設計好。它同時卡在兩端：前端做不好，訪客在最後一步猶豫；後端做不好，開錯的發票要作廢重開，還可能牽扯到隔月的帳。
Photo by Duskfall Crew on Unsplash
先分清楚：你的客人其實只有兩種
台灣電子發票的選項看起來很多，但站在結帳頁的角度，訪客只會做一個決定：這張發票要不要報公司帳。
- 要報公司帳：需要統一編號與公司抬頭。這類客人通常是採購、行政或工程師在買設備耗材，填統編是必要動作，願意多花三十秒。
- 不報公司帳：這一群裡又分成存手機條碼載具、存自然人憑證、直接捐出去，以及什麼都不想選、希望你幫他決定的人。
很多結帳頁的問題，是把這兩種人塞進同一組欄位，用一個下拉選單列出「二聯式／三聯式／捐贈」，然後把所有相關欄位一次顯示。結果是：九成不需要統編的人，也得先看懂「二聯三聯」是什麼意思。
比較順的做法是先做一次分流。用兩顆明顯的選項按鈕（不是下拉選單）問一句話：「這筆訂單需要開公司統編嗎？」——需要，才展開統編與抬頭；不需要，才進入載具與捐贈的選擇。一個問題換掉一整排欄位，這是投入最小、效果最直接的一刀。
統編欄位：驗證要在前端，不要等送出才說錯
統一編號是 8 位數字，而且有它自己的檢核邏輯，不是隨便 8 個數字都成立。這代表你可以在前端就攔下一大半的打錯。
- 輸入框限制只能打數字、最多 8 碼。手機上記得把鍵盤設成數字鍵盤（
inputmode="numeric"），別讓客人在注音鍵盤上找數字。 - 打滿 8 碼就即時檢核，格式不對立刻在欄位下方出現一行小字，而不是等他按了「送出訂單」才整頁跳回來。
- 抬頭盡量自動帶入。財政部有公開的營業登記資料，若你的系統或加值中心有介接，輸入統編後直接把公司名稱填進抬頭欄，能省掉客人打錯字，也省掉後續核對的時間。沒介接也沒關係，至少把抬頭設成必填並加上提示：「請填寫與統編相符的公司全名」。
- 前端檢核不等於一定開得出來。格式對，不代表這家公司存在或狀態正常，最終仍要以開立時加值中心或財政部平台的回應為準。所以後台要能顯示「開立失敗」的訂單，並且有人負責看。
另外提醒一個台灣特有的坑：B2C 的雲端發票一旦開立，客人事後才說要加統編，正規做法是作廢重開；若已經跨月、跨了申報期別，處理方式更麻煩，多半得走折讓或銷貨退回。這也是為什麼「要不要統編」值得在結帳當下用一句人話問清楚，而不是藏在小字裡。
Photo by Zulfugar Karimov on Unsplash
載具欄位：差一個字元，客人就查不到發票
手機條碼載具是目前最多人用的一種，格式是一個斜線「/」加上 7 碼英數字（可能包含 +、-、.）。自然人憑證條碼則是 2 個大寫英文字母加 14 位數字。
這兩種格式的共同問題是：客人多半從手機相簿的截圖抄過來，很容易少打斜線、把英文 O 打成數字 0、或是大小寫不對。而載具存錯的後果特別難救——發票確實開出去了，只是掛在一個不存在的載具上，客人對獎、查詢都找不到，等到中獎季才來客服問。
- 斜線自動補：偵測到客人沒打斜線但輸入了 7 碼，就自動補上，並顯示補完的完整值讓他確認。
- 自動轉大寫：手機條碼一律大寫，在輸入時直接轉換，少一個錯誤來源。
- 旁邊放一句範例：「手機條碼長這樣：/ABC+123，可在手機發票存摺 App 查看」，比「請輸入正確之共通性載具號碼」有用得多。
- 會員登入後記住載具：回購客人不該每次重打一次。對回購率高的店家，這一項效益最大。
- 送出前驗一次：若加值中心提供載具驗證 API，在成立訂單前先驗；驗不過當場提示，別讓錯誤留到開立那一刻。
捐贈碼與漸進揭露
愛心碼是 3 到 7 位數字，願意捐的人通常已經記得自己常捐的那組號碼。設計原則很簡單：預設收合，選了「捐贈發票」才展開，另外可以放三到五個常見社福團體的愛心碼快選，加一個「其他，我自己輸入」。
這其實就是整段發票區塊該有的邏輯：預設只顯示「發票類型」一個選擇，其餘欄位依選擇動態出現。選「個人（存載具）」只出現載具兩欄；選「公司」才出現統編與抬頭；選「捐贈」才出現愛心碼。訪客滑到結帳頁最下面，如果看到一整片密密麻麻的輸入框，很容易產生「這還要填多久」的念頭——在手機上，那一片可能佔掉兩個螢幕高度。
一個常被忽略的細節：展開時不要讓畫面整個跳動。欄位突然插入導致按鈕位移，客人手指已經往下按了卻按到別的東西，這是實際存在的挫折來源。用固定高度的容器或一段短過場動畫都能緩解。
Photo by Fethi Benattallah on Unsplash
幾個常見但很痛的錯誤
- 把發票欄位放在付款之後。有些串接會在付款完成後才跳回來收發票資訊，這時客人已經覺得「買完了」，關掉分頁的比例很高。發票資訊應該在按下付款之前收齊。
- 統編欄位沒做必填連動。客人選了「公司」卻沒填抬頭，訂單照樣送出，後台只好一筆一筆回頭問。
- 錯誤訊息寫給工程師看。「載具格式驗證失敗（code: 4002）」對客人毫無幫助，該改成「手機條碼要以 / 開頭，共 8 個字元，例如 /ABC+123」。
- 手機版沒測過。桌機上排得整齊的發票欄位，在 375px 寬的手機上可能擠成一團、下拉選單被鍵盤蓋住。台灣電商流量多半超過七成來自手機，這一段一定要實機測。
- 後台看不到發票狀態。開立成功、開立失敗、已作廢這三種狀態若只存在金流商後台、不回寫到自家訂單列表，出問題時就要兩邊對照著找。
上線前的檢查清單
如果你正要改版結帳頁，或準備請廠商調整，可以直接拿這張清單去對：
- 發票類型是否用明顯的選項按鈕分流，而不是一個下拉選單塞全部？
- 統編欄位是否限制 8 碼數字、手機跳數字鍵盤、即時檢核？
- 選了公司統編，抬頭是否自動變必填？能否自動帶入公司名稱？
- 手機條碼是否自動轉大寫、自動補斜線、附範例說明？
- 會員回購時，上次的發票設定會不會自動帶出來？
- 所有錯誤訊息是否都是客人看得懂的人話？
- 在 375px 寬的手機上，整段發票區塊是否仍好按、不被鍵盤擋住？
- 開立失敗的訂單，後台有沒有明顯標示、有沒有人負責處理？
- 客人事後要改統編的 SOP 是否寫好、客服知道怎麼回？
結語：這一段不該是「串完金流就算了」
發票欄位在很多官網專案裡，被歸類在「金流串接」底下順手做掉。但它同時站在轉換率和營運成本的交叉點上：前面幾個欄位決定訪客會不會在最後一步猶豫，後面的狀態回寫決定你每個月要花多少時間處理開錯的發票。
如果官網已經上線一段時間，建議先做一件事：打開後台，數一數過去三個月有幾張發票是作廢重開的，再數一數客服信箱有幾封是問發票的。這兩個數字通常比想像中大，而且大部分可以靠結帳頁上的幾個小設計省下來。
先從最便宜的兩項開始：把發票類型改成選項按鈕分流、把錯誤訊息改寫成人話。這兩件事大多不需要動到金流串接，改版成本低，卻能最快看到客服量的變化。