FREE TRIAL: Accelerate your app development career with Hacking with Swift+! >>

Preparing for checkout

Paul Hudson    @twostraws   

The final screen in our app is CheckoutView, and it’s really a tale of two halves: the first half is the basic user interface, which should provide little real challenge for you; but the second half is all new: we need to encode our Order class to JSON, send it over the internet, and get a response.

We’re going to look at the whole encoding and transferring chunk of work soon enough, but first let’s tackle the easy part: giving CheckoutView a user interface. More specifically, we’re going to create a ScrollView with an image, the total price of their order, and a Place Order button to kick off the networking.

For the image, I’ve provided two images in the files for this project, available from Look in the SwiftUI/project10-files folder, and copy both cupcakes@2x.jpg and cupcakes@3x.jpg into your asset catalog. We’ll need to use GeometryReader to size this picture to the correct width of the screen, to avoid it stretching layouts on smaller devices.

As for the order cost, we don’t actually have any pricing for our cupcakes in our data, so we can just invent one – it’s not like we’re actually going to be charging people here. The pricing we’re going to use is as follows:

  • There’s a base cost of $2 per cupcake.
  • We’ll add a little to the cost for more complicated cakes.
  • Extra frosting will cost $1 per cake.
  • Adding sprinkles will be another 50 cents per cake.

We can wrap all that logic up in a new computed property for Order, like this:

var cost: Double {
    // $2 per cake
    var cost = Double(quantity) * 2

    // complicated cakes cost more
    cost += (Double(type) / 2)

    // $1/cake for extra frosting
    if extraFrosting {
        cost += Double(quantity)

    // $0.50/cake for sprinkles
    if addSprinkles {
        cost += Double(quantity) / 2

    return cost

The actual view itself is straightforward: we’ll use a GeometryReader to make sure our cupcake image is sized correctly, a VStack inside a vertical ScrollView, then our image, the cost text, and button to place the order.

We’ll be filling in the button’s action in a minute, but first let’s get the basic layout done – replace the existing body of CheckoutView with this:

GeometryReader { geo in
    ScrollView {
        VStack {
                .frame(width: geo.size.width)

            Text("Your total is $\(self.order.cost, specifier: "%.2f")")

            Button("Place Order") {
                // place the order
.navigationBarTitle("Check out", displayMode: .inline)

That should all be old news for you by now. But the tricky part comes next…

Hacking with Swift is sponsored by Essential Developer

SPONSORED Join a FREE crash course for iOS devs who want to become complete senior developers — from October 18th to 24th. Learn how to apply iOS app architecture patterns through a series of lectures and practical coding sessions.

Learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

Average rating: 5.0/5

Unknown user

You are not logged in

Log in or create account

Link copied to your pasteboard.