{"id":6385,"date":"2017-01-04T12:00:00","date_gmt":"2017-01-04T20:00:00","guid":{"rendered":"https:\/\/johnfreeborn.com\/words\/?p=6385"},"modified":"2025-01-19T22:39:18","modified_gmt":"2025-01-20T06:39:18","slug":"applepay-payment-sheet-ui","status":"publish","type":"post","link":"https:\/\/johnfreeborn.com\/words\/applepay-payment-sheet-ui\/","title":{"rendered":"ApplePay Payment Sheet UI"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Sketch template for ApplePay<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"580\" height=\"176\" loading=\"lazy\" src=\"https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-touchID.jpg?resize=580%2C176&#038;ssl=1\" alt=\"\" class=\"wp-image-6384\" srcset=\"https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-touchID.jpg?resize=1024%2C311&amp;ssl=1 1024w, https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-touchID.jpg?resize=300%2C91&amp;ssl=1 300w, https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-touchID.jpg?resize=768%2C233&amp;ssl=1 768w, https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-touchID.jpg?w=1100&amp;ssl=1 1100w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"db6b\">I found a slew of great iOS template tools for Sketch.<br>I used this one from Simple Sketch as my foundation \u2192&nbsp;<a href=\"http:\/\/ios10.greatsimple.io\/\" rel=\"noreferrer noopener\" target=\"_blank\">iOS 10 GUI<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"4710\">What was missing for me was ApplePay and specifically the payment sheet UI. So, I built something and in the spirt of sharing, here it is.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" width=\"580\" height=\"1014\" loading=\"lazy\" src=\"https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-confirmation-sheet.jpg?resize=580%2C1014&#038;ssl=1\" alt=\"\" class=\"wp-image-6383\" srcset=\"https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-confirmation-sheet.jpg?resize=586%2C1024&amp;ssl=1 586w, https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-confirmation-sheet.jpg?resize=172%2C300&amp;ssl=1 172w, https:\/\/i0.wp.com\/johnfreeborn.com\/words\/wp-content\/uploads\/2025\/01\/ApplePay-Payment-Sheet-confirmation-sheet.jpg?w=720&amp;ssl=1 720w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\" id=\"3228\">Download the zip \u2192&nbsp;<a href=\"http:\/\/johnfreeborn.com\/download\/ApplePay-Payment-Sheet.zip\" rel=\"noreferrer noopener\" target=\"_blank\">iOS ApplePay Payment Sheet Template (sketch)<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"408d\"><strong>UPDATE: I\u2019ve expanded on this kit \u2192\u00a0<\/strong><a href=\"https:\/\/medium.com\/@jfx1026\/applepay-payment-sheet-ui-v2-f72a1e532b15#.fostywaq0\">here<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"42c2\">Side note: you will need the Apple iOS fonts, grab them here \u2192&nbsp;<a href=\"https:\/\/developer.apple.com\/fonts\/\" rel=\"noreferrer noopener\" target=\"_blank\">Apple SF Font for iO<\/a>S<br>Also, for reference, the&nbsp;<a href=\"https:\/\/developer.apple.com\/apple-pay\/web-human-interface-guidelines\/\" rel=\"noreferrer noopener\" target=\"_blank\">ApplePay interface guidelines<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sketch template for ApplePay I found a slew of great iOS template tools for Sketch.I used this one from Simple Sketch as my foundation \u2192&nbsp;iOS 10 GUI What was missing for me was ApplePay and specifically the payment sheet UI. So, I built something and in the spirt of sharing, here it is. Download the [&hellip;]<\/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,113,21],"class_list":["post-6385","post","type-post","status-publish","format-standard","hentry","category-design-work","tag-applepay","tag-design","tag-sketch","tag-template","tag-ui"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6385","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=6385"}],"version-history":[{"count":2,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6385\/revisions"}],"predecessor-version":[{"id":6387,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/posts\/6385\/revisions\/6387"}],"wp:attachment":[{"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/media?parent=6385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/categories?post=6385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/johnfreeborn.com\/words\/wp-json\/wp\/v2\/tags?post=6385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}