[教學] 用Passdock來製作各式各樣漂亮的會員卡吧！

Apple Pay開放當天，因為目前iPhone還在9.3.1 JB狀態
有改系統版本到10.2，但加入信用卡進去出現條款與條件的畫面時，按同意竟然會閃退.......
所以目前不可能在還沒進入主畫面時就出現票卡畫面
不過研究了一下Passdock可以做到我的需求！卡片還能從上而下排列清楚地呈現
用過許多卡和Pass2U，不同卡就只能疊在一起，不能分開來呈現蠻可惜的
且Pass2U每更新一次就要扣掉3點，照我這幾天我一直修改的狀況，送的100點一定不夠用

先來這幾天的成果，卡片排列的效果很漂亮


宜家卡現在好像換成橘色卡片了？不過我還是比較喜歡黃配藍的視覺效果


右上角的餘額如果是可以用的話，不知道該有多好


家樂福找不到我想要的圖片，就用了個商標淡出效果


聽說全聯要折抵現金一定要用實體卡，所以沒機會用了


以下用電腦版的網頁來解說，在passdock.com註冊並登入後選綠色的Store Card來做新的票卡
建議先在Simple模式下建立一個票卡，如果直接用Advanced模式新增後還要自己增加Pass


這邊可以上傳不同的圖示，最下面有我票卡中使用的圖檔檔案
網頁上有顯示各個部分的建議大小，也可以照上面的大小做自己喜歡的圖案


建立好之後把右上角的Simple改成Advanced繼續編輯做更細微的設定


本篇介紹的會員卡製作是用Code 128格式，Format這裡記得要用128Code
如果不確定手上的卡片條碼是什麼格式，可以去下載掃條碼的APP來掃描，我是下載Scandit來掃的
但屈臣氏跟寶雅的條碼是用EAN-13格式，就不適合這篇的方法，EAN-13的到這網站照下面輸入

Barcode：EAN-13
Contents：會員卡號碼
Options：showborder bordercolor=FEFFFF borderwidth=2
Scale：5 3.5
按產生後圖片傳送到Strip上
在Primary Section的Value欄位輸入會員卡編號以防止店家需要當場手動輸入的情況

全家跟家樂福的會員卡我做完後有跟實體卡比對，條碼粗細都是一樣的
所以除非號碼輸入錯誤，不然應該是可以掃描的到的
全聯的不知道為什麼實體卡上的條碼會比自己做的還長
而且像我上面提到的，要折抵現金要有實體卡，所以做了也用不到囉


Store identifier這邊輸入App的ID，就可以在已加入的卡片背面直接開啟App
查詢方式可以用App名稱加上iTunes為關鍵字來搜尋
像全家App在iTunes上的網址：
https://itunes.apple.com/tw/app/familymart/id431477571?l=zh&mt=8
其中id後的431477571就是全家App的ID號碼


設定後如下圖，就不用按Home鍵回到主畫面再開App了


最有趣的就是這個地理圍欄功能了，不同票卡可以設定不一樣的地點
當接近設定好的地點，就可以呈現該店家的會員卡了
最多可以設定10個地點，像下面我就設定了台東市10間全家的地點
不過很奇怪的是，如果設定超過5個地點，直後再進來編輯
第6個以後的地點不會在網頁的地圖上出現，但都不做更改而儲存的話
就算再把票卡讀取進Apple Wallet，第6個以後的地點GPS資料還是在的

在General Template Settings的Organization Name設定的名稱，會在出現鎖定畫面時出現
Message則是在鎖定畫面時要呈現的訊息

下面是測試四張票卡接近地點的呈現效果


如果想要不同卡片單獨呈現的話，這邊一定要設定
Passdock提供10組Certificate，所以可以設定10張卡片獨立排列
若要做到11張以上，新增時選擇除Store Card以外的票卡來製作就可以了


都設定完成並更新後，用Apple Wallet中的掃描條碼功能讀取左下角的QR碼就可以快速加入票卡囉


最後，放上我所使用的圖檔，照上面的檔名上傳就可以了
還有附上四張票卡使用的背景色RGB
IKEA背景rgb(255,204,0) 字體rgb(0,51,153)
全家背景rgb(18,137,30)
家樂福背景rgb(6,58,146)
全聯背景rgb(36,40,88)