如何用 Passkit 建立電子發票手機條碼

在 mobile01 上面有人分享了一篇用 passdock 做的 iOS Wallet 行動票卷 ([教學] 把 電子發票手機條碼 製作成Wallet票卡 — PassDock版)

但是很不巧的， passdock 馬上被打到不是 502 噴得嫑嫑的就是慢到不行xDDD

所以直接來分享用另外一個工具製作一樣的東西吧！ — PassKit

首先，直接到 PassKit 的專用 Web App 即可看到他專屬的所見即得設計工具

PassKit 所見即得設計工具的預設畫面

我們可以先點右上角的 Login

對，沒錯，先點 Login ，因為你即使設計完要按下 Save Pass 他也會要你登入

然後輸入 Email 及收信即可使用

輸入 Email ，這裡其實就是 PassKit 的帳號

收到信之後，他就會給你預設的密碼，記得改掉xDD

登入之後就是回到我們原本的設計畫面，接下來把以下幾個截圖的重點欄位照抄就可以xDD (這裡面的 Template Name 一旦儲存是不能修改的呦～)

這裡選 Coupon 或 Store Card 都可以，但是不能選這兩個之外的選項，而我選 Coupon 是因為這樣出來的票卡比較不會單調，有發票的感覺 xDD

現在我們先製作 Barcode ，然後等等再來下載幾個資源檔案

你可以參考 mobile01 的那篇文章，使用 http://www.terryburton.co.uk/barcodewriter/generator/ 來產圖會比較 ok 一點，以下是建議參數：

• Barcode： Code39
• Contents：你的手機條碼，包括「/」總共8個字符，英文全大寫。
• Options：showborder bordercolor=FEFEFE borderwidth=2
• Scale：3.54 4
• Rotate：0

然後選擇 Download PNG 的選項

接下來就是下載額外資源檔，以及上傳到 PassKit 使用：

• Icon 使用 http://www.tfrin.gov.tw/dl.asp?fileName=31298465054.png
• Logo 使用 https://www.liverx.org/wp-content/uploads/2016/04/50_1021017_電子發票logo.png
• Strip 使用剛剛做好的 Barcode 圖檔

基本上就照抄畫面，然後大概所見即得就長這樣

這部分基本上就是右上角的顯示資訊，可自行隨意變更，另外就是這裡選用 Fixed Value 會比較好，不然他會讓你在新增的時候出現編輯方塊修改內容

這邊我單純只是放個文字版，這樣比較好看而已

最後來把它原本預設的 Barcode Type 設定改成不顯示即可

他預設是簡體中文，改繁體中文就好。當然，不改也可以。

最後就是準備發佈了！當然要把它改成 Private ，畢竟是自己用而已啊，然後要允許多裝置使用，這樣就可以裝在多個裝置上，然後 Save 吧！

Save 之後就會出現 QR Code 可以給 Wallet 掃了！

Wallet 掃到之後就會告訴你能不能用

然後就出現啦～ (第一次使用或者有啟用 Dynamic Value 功能的，會要按右下角的 i 圖案來啟用票卡)

以下就是有啟用 Dynamic Value 功能的畫面，但是理論上應該沒啥能動態的才對xDDD

啟用了動態資料的會變成這樣，他要你按右下角的 i

然後點選他裡面的啟用連結

點了會出現讀取中的動畫，做得挺不錯的！

看有沒有要改值，不過這個改了條碼也不會變的！

滑下去就可以點增加到 Wallet 內

當然點了之後還是會出現動畫(因為我沒截圖到，所以拿前面的來用xDD)

Wallet 增加票卡的預覽

最後增加成功！ (這邊會出現兩個是因為兩個用的都是同樣的發行者發行的票卡)

這樣超簡單的吧？

當然你要用我的票卡 QR Code 新增使用來送我發票我也不會反對的xDDDD

當然，你也可以用別人做好現成的工具… https://www.pass2u.net/p/wDWEiQX5EI6j