ApplePay Payment Sheet UI : V2

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 Burton • Apple Watch GUI Sketch Sketch Resource

Apple Watch Mockup by Alexis Doreau • Apple Watch

El Capitan UI Kit by Masao Takahashi • El 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