購物便發票・會員・支付 一站整合
標準
實體消費整合平台・產品規劃書

結帳時,
只要打開一個 App

購物便把「發票載具、通路會員卡、電子支付」收進同一個畫面。不用在排隊時翻找好幾個 App,也不再錯過該集的點數與該對的發票。

載具+會員 一次出示 支付 App 一鍵喚起 離線也能出示條碼
手機中的購物便整合了發票、會員卡與支付,周圍漂浮著發票、會員卡、硬幣與微笑購物袋 購物便 一碼結帳 載具・會員・支付 MEMBER •••• 2046

排隊結帳,前後對比

以前:開 3–4 個 App

  • 1打開發票 App 找載具條碼切換
  • 2打開通路 App 找會員條碼切換
  • 3再打開支付 App 準備付款切換
  • 4事後才發現點數沒集到遺漏

現在:購物便一個畫面

一碼結帳頁載具條碼+本店會員條碼同頁出示,付款一鍵跳轉
目標 3 秒內出示 點數不漏集 自動記帳

一碼結帳,三個步驟

01

走進門市

依定位辨識所在通路,桌面小工具與通知自動顯示本店卡片。

02

出示一碼頁

螢幕自動調亮,店員依序掃描載具與會員條碼。

03

付款後自動彙整

點選偏好支付完成付款;發票、點數、付款紀錄合併成一筆消費。

Product Spec

功能規劃

四大模組各自獨立、彼此串接。每個模組皆列出核心功能,技術細節收合於下方,需要時再展開。

發票歸戶:所有發票,自動回到你身邊

以財政部「手機條碼」為主載具,引導使用者把散落在各通路的會員載具、信用卡載具、電子票證載具歸戶整合,之後所有發票自動同步、自動對獎。

手機條碼載具歸戶自動對獎消費分析
  • 一鍵綁定手機條碼:輸入條碼與驗證碼即可完成,未申請者引導至官方申請流程。
  • 歸戶精靈:逐步引導將常用通路載具歸戶,顯示完成度進度條。
  • 自動對獎與中獎推播:開獎日自動比對,中獎即通知並提示領獎方式。
  • 消費分析:依通路、類別、月份自動分類,搭配溫和的視覺化圖表。
技術與介接規格資料來源、同步策略、資料保護

資料來源為財政部電子發票整合服務平台,需以公司名義申請 API 介接資格(取得 App ID 等憑證),並依平台規範呼叫載具驗證、發票查詢、中獎清冊等介面。

同步採「登入即時拉取+每日排程增量同步」雙軌;開獎日另設批次任務比對中獎。載具驗證碼經 KMS 加密後存放,嚴禁明文落地,並提供使用者隨時解除綁定與刪除資料。

平台介面規格與申請流程可能調整,實作前請以平台最新公告為準。

UX 重點讓歸戶不再是苦差事

歸戶流程拆成小步驟,每步只問一件事;完成後以插圖與小動畫給予正向回饋。中獎通知使用溫暖的文案與慶祝動效,未中獎則低調不打擾。

會員卡包:所有會員卡,收成一疊

不必安裝每一家通路的 App。透過條碼掃描、手機號碼綁定或官方授權連結,把便利商店、量販、藥妝、百貨、連鎖餐飲的會員卡收進同一個卡包。

多種加卡方式點數總覽到期提醒依門市推薦
  • 三種加卡方式:掃描實體卡條碼(最通用)、手機號碼綁定、通路開放的帳號授權連結。
  • 點數與等級總覽:有開放介面者自動更新,其餘支援手動記錄。
  • 優惠券到期提醒:到期前 3 天與當天早上溫和提醒。
  • 卡片排序智慧化:依使用頻率與目前位置自動置頂最可能用到的卡。
技術與介接規格Adapter 模式、資料同步

每個通路以獨立的「通路 Adapter」封裝,統一輸出卡號、條碼格式(Code128 / QR / EAN)、點數、等級等標準欄位。新增通路只需新增 Adapter,不影響核心服務。

未開放介面的通路,以「條碼卡」形式保存:僅存條碼內容與格式,於本機產生條碼圖。點數同步以 webhook 優先、輪詢為輔,並設定每通路速率上限。

通路合作策略BD 洽談優先順序

優先洽談來客數最高的便利商店與量販通路,其次藥妝與連鎖餐飲。合作分三級:L1 條碼收納(無需合作)、L2 點數查詢 API、L3 POS 整合碼(一次掃描完成載具+會員)。

支付中心:常用支付,一鍵就到

集中管理 LINE Pay、悠遊付、街口支付、全支付、icash Pay 以及 Apple Pay / Google Pay 等常用支付方式。第一階段以「一鍵喚起」為主,不經手金流,上線快、合規風險低。

一鍵喚起門市偏好回饋比較不存支付憑證
  • 支付捷徑:使用者自選常用支付並排序,點擊即跳轉至該支付 App 的付款碼頁。
  • 門市偏好記憶:記住「在這家店通常用哪一個」,下次自動置頂。
  • 回饋小幫手:整理各支付在該通路的公開回饋活動,結帳前一眼比較。
  • 付款後回流:從支付 App 返回時,提示記錄此筆消費並與發票自動配對。
技術與合規規格分階段整合策略

階段一(喚起):透過各支付業者公開或授權的 App Link / Universal Link 喚起,未安裝時導向官方商店頁。購物便不接觸任何卡號或付款憑證。

階段二(合作):與支付業者簽約,取得交易結果回傳(僅交易摘要),用於自動記帳與發票配對。

若未來規劃代收代付或儲值,即屬電子支付相關法規規範範圍,須取得主管機關許可或與持牌業者合作,務必於法務評估後再推進。喚起方式需依各業者規範並取得同意。

門市模式:走進店裡,它就準備好了

以定位(地理圍欄)辨識使用者所在通路,自動準備好該店的會員卡、載具與偏好支付。結帳畫面專為「店員掃描」設計:大條碼、高亮度、零干擾。

地理圍欄桌面小工具離線可用自動記帳
  • 進店自動切換:經使用者同意後使用定位,僅在門市範圍內觸發,不做背景軌跡記錄。
  • 一碼結帳頁:載具與會員條碼上下排列,自動調高亮度、防止螢幕休眠。
  • 離線可用:條碼於本機加密快取,地下街、賣場收訊差也能出示。
  • 小工具與錶面:桌面小工具、鎖定畫面與手錶一點即開。
技術規格定位、快取、效能指標

門市 POI 資料庫由後端維護,App 端僅下載使用者所在區域的圍欄(每次最多數十個),使用系統原生地理圍欄 API 以降低耗電。

效能目標:冷啟動到一碼頁 ≤ 1.5 秒、小工具開啟 ≤ 0.8 秒、條碼本機渲染 ≤ 100 毫秒。

System Architecture

系統架構

採「微服務+整合轉接層(Adapter)」架構:外部夥伴的變動被隔離在整合層,核心服務保持穩定,新增通路或支付只需擴充 Adapter。

用戶端層CLIENT
iOS AppAndroid App平板版面PWA 網頁版桌面小工具手錶
接入層EDGE
CDNWAF 防火牆API GatewayOAuth 2.0 / OIDC流量限制
業務服務層SERVICES
帳號身分發票載具會員卡包支付編排門市定位通知推播優惠推薦消費分析
整合轉接層ADAPTERS
電子發票平台 Adapter通路會員 Adapter × N電子支付 Adapter × N地圖 / POI簡訊 OTP
資料層DATA
PostgreSQLRedis 快取事件匯流排物件儲存資料倉儲
技術選型建議依團隊規模可調整
層級建議方案選擇理由
行動端Flutter(或 Swift + Kotlin 原生)一套程式碼涵蓋手機與平板;小工具、手錶仍需原生模組
網頁版PWA + 本說明書同風格設計系統電腦使用者查帳、管理卡包;可離線
後端Go 或 Kotlin(Spring Boot)微服務高併發、型別安全,團隊招募容易
資料庫PostgreSQL+Redis交易一致性+條碼與會話快取
事件Kafka 或雲端 Pub/Sub發票同步、對獎、推播解耦
雲端GCP / AWS / Azure 台灣或鄰近區域低延遲、資料在地化考量
資安與合規個資、金鑰、裝置安全
  • 遵循《個人資料保護法》:最小蒐集、明確告知、可隨時查詢、刪除與匯出。
  • 敏感欄位(載具驗證碼、會員號)以 KMS 信封加密,存取全程留稽核紀錄。
  • 不儲存任何卡號或支付憑證;支付僅以跳轉或業者回傳的交易摘要處理。
  • App 支援生物辨識解鎖、裝置綁定、越獄 / Root 偵測、截圖保護(結帳頁除外)。
  • 規劃取得 ISO 27001 驗證,並定期委外滲透測試。
效能與載入策略App 與網站
指標目標手段
App 冷啟動≤ 1.5 秒延遲載入非首屏模組、預熱條碼快取
API 回應 p95≤ 200 毫秒Redis 快取、讀寫分離
網站首屏LCP ≤ 2.0 秒單檔內嵌、SVG 圖示、無外部字型、CDN 快取
可用性99.9%多可用區部署、外部夥伴斷線降級
Workflows

工作流程

使用者旅程與研發流程。每個步驟標註負責角色,方便產品、設計、工程對齊。

使用者App後端外部夥伴
  1. 1
    手機號碼註冊

    輸入手機號碼並以簡訊 OTP 驗證,同步閱讀並同意隱私權政策。

    使用者簡訊服務
  2. 2
    設定解鎖方式

    生物辨識或 6 位數 PIN 碼,保護載具與會員資料。

    App
  3. 3
    綁定手機條碼

    輸入手機條碼與驗證碼;尚未申請者引導至官方申請。

    使用者App
  4. 4
    驗證並加密保存

    後端呼叫電子發票平台驗證載具,成功後以 KMS 加密保存。

    後端電子發票平台
  5. 5
    同步近期發票

    背景拉取近期發票並分類,首頁顯示「歡迎回來」摘要卡。

    後端
  6. 6
    歸戶精靈

    建議使用者歸戶常用通路載具,顯示完成度並給予小獎勵。

    App使用者
  1. 1
    選擇通路

    依熱門度與附近門市排序,支援搜尋。

    使用者
  2. 2
    選擇加卡方式

    掃描實體卡條碼 / 手機號碼綁定 / 官方帳號授權,依通路支援程度顯示。

    App
  3. 3
    驗證與取得卡片資料

    經對應通路 Adapter 驗證,取得卡號、條碼格式與點數。

    後端通路系統
  4. 4
    設定門市自動顯示

    詢問是否在該通路門市自動顯示此卡(需定位授權)。

    使用者
  5. 5
    完成並加入卡包

    卡片以翻轉動畫落入卡包,本機加密快取供離線使用。

    App
  1. 1
    進入門市範圍

    地理圍欄觸發,判斷所在通路。

    App
  2. 2
    預先準備

    通知與小工具顯示本店卡片,條碼已預先渲染。

    App
  3. 3
    出示一碼結帳頁

    螢幕調亮;店員依序掃描載具與會員條碼。

    使用者門市 POS
  4. 4
    選擇支付

    點擊偏好支付,跳轉至該支付 App 付款碼頁完成付款。

    使用者支付業者
  5. 5
    回流記帳

    返回購物便時提示記錄此筆消費(金額、通路、支付)。

    App
  6. 6
    自動配對

    發票同步後依時間、金額、通路自動合併為一筆完整消費。

    後端

採兩週一個 Sprint 的敏捷流程,搭配設計系統與自動化測試,確保「改得快、也改得穩」。

  1. 1
    需求與假設

    PM 撰寫 PRD,定義成功指標;每個需求都要回答「為使用者省下了什麼」。

  2. 2
    UX 與原型

    流程圖、低保真原型、5 人可用性測試;通過後進入高保真設計。

  3. 3
    設計系統落地

    元件、色彩、字級、深色模式於設計檔與程式碼元件庫同步維護。

  4. 4
    開發與 Code Review

    主幹開發+Feature Flag;每個 PR 至少一位審查者,附測試。

  5. 5
    QA 與自動化測試

    單元、整合、端到端測試;整合層以模擬夥伴環境做契約測試。

  6. 6
    分階段發布

    內部 → 1% → 10% → 全量,崩潰率或錯誤率異常時自動回滾。

  7. 7
    監控與回饋

    儀表板追蹤 KPI 與客服回饋,進入下一輪 Sprint 規劃。

Roadmap & Guidelines

里程碑與規範

12 個月產品藍圖、團隊配置、成功指標與設計系統。細節皆可收合。

產品藍圖

第 1 個月

探索與驗證

  • 使用者訪談 20 人
  • 法規與平台介接評估
  • 通路、支付業者初步洽談
  • 可點擊原型
第 2–4 個月

MVP 上線

  • 手機條碼綁定與發票同步
  • 條碼卡包(掃描加卡)
  • 支付一鍵喚起
  • 深色模式、字級調整
第 5–8 個月

體驗升級

  • 門市模式與地理圍欄
  • 自動對獎、中獎推播
  • 小工具與手錶
  • 首批通路點數 API
第 9–12 個月

生態整合

  • POS 整合碼試點
  • 支付交易回傳與自動記帳
  • 個人化優惠推薦
  • 商家合作後台

成功指標(KPI)

≥ 60%新用戶 7 日內完成載具綁定
≤ 3 秒開啟 App 到出示一碼頁
≥ 3 張每位活躍用戶平均綁定卡片
≥ 99.8%無崩潰工作階段比例

團隊配置(MVP)

產品經理 1UX / UI 設計 2行動端工程 4後端工程 4QA 2DevOps / SRE 1資安 1通路 BD 1
設計系統色彩、字級、圓角、動效

設計關鍵字:溫暖、可信賴、不打擾。以珊瑚橘為主色傳遞溫度,青綠代表完成與安心,蜂蜜黃用於獎勵與點數。

珊瑚橘 主色
青綠 成功
蜂蜜 獎勵
梅紫 門市
米白 背景
深棕 文字
項目規範
字級基準 16px,提供 5 段調整(14–19px),所有尺寸以 rem 計算
圓角12 / 18 / 26px 三階;按鈕與標籤為全圓角
圖示24px 格線、1.8 線寬、圓角端點,雙色調填色 14% 透明度
動效0.25–0.45 秒,緩出曲線;尊重系統「減少動態效果」設定
深色模式暖黑底色而非純黑,降低對比刺眼感;跟隨系統並可手動切換
無障礙文字對比 ≥ 4.5:1、觸控目標 ≥ 44px、完整鍵盤操作
風險與對策外部依賴是最大變數
風險影響對策
通路不開放會員 API無法自動同步點數以條碼卡收納為基本盤,點數改為手動記錄
支付業者限制喚起方式無法直達付款碼導向該 App 首頁並顯示操作提示;洽談正式合作
法規認定涉及金流需取得執照MVP 不經手任何資金;新功能上線前法務審查
使用者擔心隱私綁定意願低透明的隱私說明頁、一鍵刪除、定位僅限門市範圍
平台介面異動同步中斷Adapter 隔離、契約測試、異常告警與降級提示
常見問題:購物便會保存我的支付資料嗎?

不會。購物便只負責「喚起」你選擇的支付 App,付款全程在支付業者的 App 內完成,我們不接觸卡號、密碼或付款憑證。

常見問題:沒有網路時還能結帳嗎?

可以出示載具與會員條碼(本機加密快取);但電子支付本身通常需要網路,屬於支付業者端的限制。

常見問題:本網站如何部署?

本頁為單一 HTML 檔,所有樣式、圖示、插圖與程式皆內嵌、無外部相依。可直接上傳至任何靜態主機(GitHub Pages、Netlify、Vercel、Cloudflare Pages 或自有主機),建議開啟 gzip / brotli 壓縮與 HTTPS。