{"id":6381,"date":"2017-01-26T12:00:00","date_gmt":"2017-01-26T20:00:00","guid":{"rendered":"https:\/\/johnfreeborn.com\/words\/?p=6381"},"modified":"2025-01-19T22:39:23","modified_gmt":"2025-01-20T06:39:23","slug":"applepay-payment-sheet-ui-v2","status":"publish","type":"post","link":"https:\/\/johnfreeborn.com\/words\/applepay-payment-sheet-ui-v2\/","title":{"rendered":"ApplePay Payment Sheet UI : V2"},"content":{"rendered":"\n

Sketch template for ApplePay with more bells and whistles<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I\u2019ve continued my project building the ApplePay checkout flow and through the process I\u2019ve come to realize that my initial UI kit was lacking in many ways.<\/p>\n\n\n\n

First\u2013I had nothing around the confirmation or validation payment sheets. I added layouts for an approved ApplePay transaction \u2192\u201cPayment Sheet \u2014 done\u201d. I also created a layout for an error \u2192\u201dPayment Sheet \u2014 error\u201d. You always need to design for best and worst case scenarios.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Second\u2013I didn\u2019t address ApplePay on desktop at all. I created a series of layouts with an iPhone (above) and Apple Watch (below). These also include confirmation screens. These screens, specifically for Apple Watch, were not easy to find\u2013and I don\u2019t have one myself.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Last\u2013I added a slew of improvements along the way. I got a vector ApplePay logo and make more of the symbols resizable and included the light and dark background assets. It\u2019s far from perfect, but it should make building out a payment flow for ApplePay much easier.<\/p>\n\n\n\n

Download the ApplePay UI Kit V2 here \u2192 <\/strong>ApplePay UI Kit V2<\/strong><\/a><\/p>\n\n\n\n

This wouldn\u2019t have been possible without some really helpful resources that I found during my research.<\/p>\n\n\n\n

Apple WatchOS UI Kit by Richard Burton<\/a> \u2022 Apple Watch GUI Sketch Sketch Resource<\/a><\/p>\n\n\n\n

Apple Watch Mockup by Alexis Doreau<\/a> \u2022 Apple Watch<\/a><\/p>\n\n\n\n

El Capitan UI Kit by Masao Takahashi<\/a> \u2022 El Capitan UI Kit Sketch Resource<\/a><\/p>\n\n\n\n

Apple did post their own, official UI kit which was helpful \u2022 Apple UI Design Resources<\/a><\/p>\n\n\n\n

Apple San Fransisco Fonts (a more robust set) \u2022 https:\/\/github.com\/AppleDesignResources\/SanFranciscoFont<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Sketch template for ApplePay with more bells and whistles I\u2019ve continued my project building the ApplePay checkout flow and through the process I\u2019ve come to realize that my initial UI kit was lacking in many ways. First\u2013I had nothing around the confirmation or validation payment sheets. I added layouts for an approved ApplePay transaction \u2192\u201cPayment […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[117],"tags":[112,8,110,111,21],"class_list":["post-6381","post","type-post","status-publish","format-standard","hentry","category-design-work","tag-applepay","tag-design","tag-sketch","tag-tempate","tag-ui"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/comments?post=6381"}],"version-history":[{"count":1,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6381\/revisions"}],"predecessor-version":[{"id":6382,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6381\/revisions\/6382"}],"wp:attachment":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/media?parent=6381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/categories?post=6381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/tags?post=6381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}