用 n8n 建立匯豐刷卡明細 Google Sheets

最近被推坑辦了匯豐的信用卡，他們線上開戶的流程做的還滿順的，客服速度也很快，所以我一直以為他們的網銀 UX 會還不錯。

直到我用了一個星期，到了我固定記帳的週日早上，我發現我錯了。

首先，他們沒有信用卡專用的 APP，如果想看信用卡明細，必須用他們的網頁版。他們的 APP 是給匯豐銀行帳戶的，信用卡的網路登入是登入不了的。我還因此想說，那我就也申請一個他們的帳戶好了，可以登入的話，他總會也把信用卡資訊一起整合進去吧！

不過稍微上網查了一下大家的討論，發現不是這樣。

我目前用過中國信託、玉山、國泰、星展、富邦、華南，星展的算是我很不喜歡的，但他至少有我要的資訊，現在看來我跟這位老兄想的一樣。

匯豐的信用卡網路登入後可以看到的資訊是這樣的格式：

因為我有一張附卡給家人用，我需要能夠在帳單中分辨我自己刷的和附卡刷的，可是主卡點進去是所有交易。

沒辦法用 Currency 和卡片篩選，是最大的問題。更爛的是連匯出 csv 都無法，想要用 Google Sheet 硬幹都很麻煩。

好在，他們還是會寄消費通知到信箱，如果可以在收到信後，分析內容，然後自動整理到一個 Google Sheet，那就方便多了。他的信件長這樣：

分析了幾封信，其實都是類似的格式，自動化大有可為，剛好最近想嘗試使用 n8n，就著手進行了。

建立 Credentials

首先，進入 n8n 平台，註冊一個帳號：https://n8n.io/

建立一個 workspace 和 project 之後，直接開始建立一個 workflow。

建立 workflow 之前，可以先把 credentials 處理好。n8n 和 Zapier 或 Make 這種套裝服務不同，他是再更底層一些的服務。比如說，在 Zapier 你的 credential 會是授權給 Zapier： 「授權 Zapier 存取 Gmail」 ，而 n8n 讓你可以建立自己的 credential。

那要怎麼建立呢？可以去申請 Google Cloud Platform 帳號就好，剛好今天要用的都是 Google 的服務，Gmail 和 Google Sheets 都有內建在 GCP 裡面。只要在 n8n 裡面新增 Gmail，如下圖：

接下來會有教學告訴你要如何在 GCP 建立 key，這邊也附上教學。
https://docs.n8n.io/integrations/builtin/credentials/google/oauth-single-service/

Google Sheets 也用一樣的 GCP key 即可。輸入好之後，會有一個 Connect 按鈕，就跟一般在做 Google 登入有點像。

Gmail 和 Google Sheets 都建立好應該會長這樣。

建立 Workflow

建立 Workflow 之後會看到空的畫布，我們首先會希望建立一個 trigger，當我們收到「匯豐信用卡刷卡通知」的時候要觸發。在 Action 那邊搜尋 Gmail 就有。

記得拉到最下面才是 Trigger，上面都是 Actions。

接下來跟這設定走就好。要注意的是篩選信件的部份，因為我們只想要匯豐信用卡刷卡通知，所以要做一個 search query。先來到 Gmail 找到隨便一封信，選擇選單的「篩選類似信件」，會是一個好的開始。Gmail 通常會用寄件者當做篩選標準，

可是我不想要所有來自匯豐銀行的信件都觸發，因為他們也許還有其他內容。我只想要信用卡刷卡通知，因此加上的文字的篩選。

最後有效的篩選文字是這樣：

from:(noreply@messaging.hsbc.com.tw) subject:(匯豐(台灣) "刷卡消費通知") 

把這串文字填到 n8n。

然後可以點 Fetch Test Event，成功的話會抓到最後一封符合條件的信件。

這樣一來有了 Trigger，我們需要設定下一步驟。在 Gmail 右邊點一個 + 號，選擇 Google Sheets，並選擇剛剛設定好的 Credential。

這時候我們要先建立好一個空白的 Google Sheet，把欄位定義好。

這邊定義的資料格式有：日期、卡片（因為我有正卡和附卡）、刷卡類型（海外、網路）、貨幣、金額。

在 n8n 設定時，可以用剛剛的 test event 的資料，看起來 snippet 的資料就足夠了，我們可以透過正規表達式把我們要的資料篩選出來。

日期：

{{ ($json["snippet"].match(/\d{4}\/\d{2}\/\d{2}/) || [])[0] || '' }}

卡號：

{{ ($json["snippet"].match(/卡末四碼(\d{4})/) || [])[1] || '' }}

刷卡類型：

{{ ($json["snippet"].match(/有一筆((?:網路|海外)(?:刷卡)?消費)/) || [])[1] || '' }}

貨幣：

{{ ($json["snippet"].match(/(?:<|&lt;)([^>]+)(?:>|&gt;)/) || [])[1] || '' }}

金額：

{{ ($json["snippet"].match(/(?:>|>)(\d+(?:,\d{3})*(?:\.\d{2})?)元/) || [])[1] || '' }}

目前這樣的表達式可以運作，但如果他們改變信件內容的格式，就可能要重新修改了。另外這邊的金額是跟著貨幣的，很蠢對不對，最後會算的帳是台幣，還會有海外手續費，但這邊不會顯示換算成台幣的金額，也不會顯示海外手續費，但就先這樣吧！剩下的可以在 Google Sheet 處理。

接下來可以點 Test step，然後去 Google Sheet 看看有沒有接收到資料。如果有的話，應該會長這樣。接下來就可以在 Google Sheets 慢慢編輯成想要的樣子了。

這樣 Workflow 就大功告成。

使用 Zapier 的作法

其實用 n8n 做這麼單純的功能有點大材小用，不過，因為要處理多個文字，如果用 Zapier 的話，會需要付費，這邊也簡單介紹 Zapier 的作法。

1. Trigger 選 Gmail: New Email Matching Search
2. 建立四個 Formatters，處理 Raw Snippet 的格式，Pattern 寫在下面

3. 開一個 Action - Google Sheet: Add a new row，選剛剛的四個 Formatter（日期直接抓信件日期就好，不用另外處理）

Pattern:

• 卡號：卡末四碼(\d{4})
• 消費類型：有一筆((?:網路|海外)(?:刷卡)?消費)
• 貨幣：(?:<|&lt;)([^>]+)(?:>|&gt;)
• 金額：(?:>|>)(\d+(?:,\d{3})*(?:\.\d{2})?)元

這樣就輕鬆完成了。比 n8n 單純，不過，因為步驟超過兩個，就不能用免費版的。我目前還不想付費，因此我還是用 n8n 來做了。

網路銀行，加油好嗎？

雖然可以這樣自動化，但我還是對匯豐很失望。我最近因為看了雷司紀 Raysky 的文章去申請了香港匯豐的網路銀行，聽說比台灣的好用很多，不知為何他們不能都用同一套。

更機車的是匯豐的開戶流程做的明明很好，他們是做的到的，但 user acquisition 顯然比 retention 重要很多，這種短線的心態實在是要不得，如果他們沒有一直祭出好優惠，我是不會繼續用的。

最後來排行一下我自己用過的網銀好用程度。

1. 中國信託
2. 國泰世華（Cube 信用卡 App 不錯，但企業網銀很爛）
3. 玉山銀行（只有信用卡）
4. 星展（只有信用卡）
5. 匯豐
6. 富邦（個人和企業都爛）
7. 華南（個人和企業都爛）

其實有點難排，因為第四名之後我都覺得像垃圾一樣了。還好小時候我媽媽就幫我申請中國信託，所以我最常用的銀行還算好用，但也因此我的標準比較高一些吧！網路銀行們，加油好嗎？