ApplePay Payment Sheet UI : V2

John Freeborn
Jan 26, 2017 · 2 min read

Sketch template for ApplePay with more bells and whistles

I’ve continued my project building the ApplePay checkout flow and through the process I’ve come to realize that my initial UI kit was lacking in many ways.

First–I had nothing around the confirmation or validation payment sheets. I added layouts for an approved ApplePay transaction →“Payment Sheet — done”. I also created a layout for an error →”Payment Sheet — error”. You always need to design for best and worst case scenarios.

Second–I didn’t 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–and I don’t have one myself.

Last–I 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’s far from perfect, but it should make building out a payment flow for ApplePay much easier.

Download the ApplePay UI Kit V2 here → ApplePay UI Kit V2

This wouldn’t have been possible without some really helpful resources that I found during my research.

Apple WatchOS UI Kit by Richard BurtonApple Watch GUI Sketch Sketch Resource

Apple Watch Mockup by Alexis DoreauApple Watch

El Capitan UI Kit by Masao TakahashiEl Capitan UI Kit Sketch Resource

Apple did post their own, official UI kit which was helpful • Apple UI Design Resources

Apple San Fransisco Fonts (a more robust set) • https://github.com/AppleDesignResources/SanFranciscoFont

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

John Freeborn

Written by

designer, artist, skateboarder and video gamer

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade