台灣有什麼能用的APP支援Wallet票卡? - iOS

Table of Contents


昨天在這串的原文推文貼了我自製的Wallet,

今天睡醒發現大家好像對客製化Wallet滿有興趣的,

因為可能不太有時間寫教學文,簡單講一下我是怎麼做的。

-

其實有很多客製化Wallet的第三方服務,

基本上這些服務都是直接調用Apple Wallet的API

並且提供一個UI來讓使用者自訂票卡的各種屬性,

再通過網站生成的QR CODE來佈署到手機裡。


我是使用網頁版Passdock製作,他們提供的客製化選項很多,

而且可以增加地理資訊跟iBeacon資訊到票卡裡,

例如我把住家附近的全聯都加進地理資訊,當我GPS定位到這些地點的時候,

手機就會自動推送相對應的票卡給你使用。

網路上Passdock的教學文很多,大家可以去Google一下,

在設定條碼的部分只要參照實體卡片背面條碼底下的那一串數字來設定就好,
(那串數字就是條碼裡面包含的資訊 通常都只是卡號)

格式記得選實體卡條碼相應的格式,例如最常見的麵條形條碼就是CODE 128。

-

票卡設計的部分,

Passdock在製作票卡時都會提供上傳圖檔的地方,也都有尺寸標示,

我是搭配illustrator來製作我想要的圖檔。

票卡顏色就用滴管工具去吸各品牌的標準色來搭配XD

資料欄位就隨個人喜好打上去就好了(卡號 姓名什麼的)

-

最後講一個小技巧,Apple Wallet裡面的每張卡都有一個Certificate。

可以把Certificate想成是商家的簽署,來自同一個Certificate的卡片,

會全部堆疊在一起(因為系統看起來就是來自同一個商家),

就像Stocard做出來的那樣,你要先點進去那個卡堆中,

裡面的卡片才會橫向展開讓你左右滑動選取,而不是一張一張有秩序的站好。

所以說,如果我有五張卡片想讓他排排站好一目瞭然,

那我就需要五個Certificate,那Certificate要怎麼取得呢?

就是花100美金去買蘋果開發者帳號使用SDK去生成...

為了這幾張無關痛癢的卡片花100美金我想一般人都無法接受吧XD

重點來了,Passdock提供多達十組的Public Certificate,

這也是我會使用Passdock來製作的原因。


在用Passdock製作票卡的時候,按下網頁右上方的Advance

切換到進階模式,會有一欄是讓你設定Certificate,共有十組可以用。

所以最後出來的成果就會是每張卡片都有隔開不會堆疊。

大概就是這樣囉...


啊...不知不覺就寫了這麼多XD



P.S.不是每個商家都認數位形式的卡片,有些也是要帶實體卡,

有板友提到全聯只認實體卡,因為我最近都沒去消費,所以也沒拿給店員刷看看。

不過以往我去全聯買東西都只報電話而已...哈

補個圖

http://imgur.com/a/BYktW
http://imgur.com/a/ibmeK

--

All Comments

Jessica avatarJessica2017-04-05
Edith avatarEdith2017-04-10
Xanthe avatarXanthe2017-04-15
Andrew avatarAndrew2017-04-19
推Certificate說明
Lily avatarLily2017-04-20
Jessica avatarJessica2017-04-21
Hardy avatarHardy2017-04-23
太強大了!!!
Skylar Davis avatarSkylar Davis2017-04-26
Genevieve avatarGenevieve2017-04-29
全聯會員卡是用感應式的所以只認實體卡
Bennie avatarBennie2017-04-30
長姿勢 謝謝
Irma avatarIrma2017-05-04
全聯不是都報電話嗎?
Kumar avatarKumar2017-05-06
可是有的卡是Code 32,Code 128不能用吧?
Catherine avatarCatherine2017-05-11
我記得passdock只能選擇code 128,不知道能不能用圖檔?
Erin avatarErin2017-05-14
推認證說明
Ophelia avatarOphelia2017-05-15
推 但還是好難製作
Megan avatarMegan2017-05-17
推!太用心了~
Carolina Franco avatarCarolina Franco2017-05-21
我想問的是為什麼票卡左上角有些圖可以顯示很大有的很小??
Elizabeth avatarElizabeth2017-05-24
可以用圖檔,就是另外做Code39的圖當主圖去放就可以
Carolina Franco avatarCarolina Franco2017-05-28
全聯有些優惠跟扣現金要用實體卡
Caitlin avatarCaitlin2017-06-01
所以最多只有十張卡能立排,再多就只能用橫排囉?
Valerie avatarValerie2017-06-02
c大應該是在說這個,因為我的左上角的圖也是很小
Linda avatarLinda2017-06-04
推!
Thomas avatarThomas2017-06-11
http://imgur.com/eYLoroD 感謝F大的啓發,終於做好我的
Brianna avatarBrianna2017-06-15
了! 雖然costco那張是做開心的XD(應該不能用
Tristan Cohan avatarTristan Cohan2017-06-18
推一個,昨天也是發現passdock的advance可以自定好多玩意
除了條碼以外的資訊可以自己惡搞很好玩XDDD
Ingrid avatarIngrid2017-06-18
我看了一下卡片的條碼基本上是用CODE128,不要亂改比較好
Emma avatarEmma2017-06-19
另外我發現GPS雖然有十個可以用,但修改後在進去編輯
Michael avatarMichael2017-06-22
第六個以後的GPS資訊回不見,不知道是不是網站的問題
David avatarDavid2017-06-24
david大做的也很漂亮!
Jacob avatarJacob2017-06-28
看來D大要分享教學文了...
Damian avatarDamian2017-06-29
推分享~但字卡顏色好難調@@
Andrew avatarAndrew2017-07-02
http://i.imgur.com/bTLawC7.jpg 感謝分享心得,原先卡關在
把卡片分開,原來要改憑證
Christine avatarChristine2017-07-04
提供教學與配色 https://goo.gl/0NIGFc
Zanna avatarZanna2017-07-09
passdock的比較好,條碼在相對比較上方
Bennie avatarBennie2017-07-12
但也比較難設計,英文苦手QQ
Cara avatarCara2017-07-16
做好是做好了,但要怎麼把卡片分開放呀 憑證要怎麼改
?@@
Daph Bay avatarDaph Bay2017-07-24
成功把卡放進去
http://i.imgur.com/ffsGbaO.jpg
Lauren avatarLauren2017-07-28
我自己打卡號上去的都不成功耶@@
Damian avatarDamian2017-08-01
跟大家分享一下 我用ColorHelper 這個app 幫忙看色碼 不過
這個app介面還蠻簡陋的就是了
Yuri avatarYuri2017-08-05
我也成功了!感謝教學與幫助!
Todd Johnson avatarTodd Johnson2017-08-09
Tom avatarTom2017-08-10
不知道F大方不方便分享素材 有些自己找的感覺沒F大的好
David avatarDavid2017-08-14
大潤發會員號碼太長...超過了...XDD
Odelette avatarOdelette2017-08-19
改憑證一直出現錯誤,卡關QQ
Delia avatarDelia2017-08-22
想請問logo放上去的狀況 已經調過與logo背景相同顏色 可
是最上面會有漸層效果 不知道是否可以避免><
Jacky avatarJacky2017-08-27
原po的設計跟推文中的卡片都用得很漂亮耶,還以為是店家
推出的公版
Megan avatarMegan2017-08-27
終於也做好自己的了http://imgur.com/XwiqFUv
Leila avatarLeila2017-08-30
大家好厲害!請問屈臣式的logo 怎麼找,因為找到都有
白底!
Olga avatarOlga2017-09-03
找png檔 或是自己用修圖軟體把白底透明化
Edwina avatarEdwina2017-09-04
謝謝原po 我學會了 http://i.imgur.com/9ivuHA3.jpg
Kelly avatarKelly2017-09-07
請問做好後,掃QRcode一直出現"沒有此條碼可用之票卡"
Valerie avatarValerie2017-09-10
這要怎麼處理呢??手機是5S、iOS10.3.1
Valerie avatarValerie2017-09-15
http://i.imgur.com/uQIP7et.jpg
謝謝教學看這篇才知道有進階模式
Edwina avatarEdwina2017-09-19
想詢問一下,我是使用passdock製作,怎麼把會員條碼放
到下方?還是只能把會員卡條碼製作成圖檔放在strip?
Quintina avatarQuintina2017-09-19
有一個選項是條碼格式 如果是code-128可以填數字 passdo
ck會生出條碼