Building the checkout components

Enough theory! Let's start building our client-side checkout components to complete the checkout process of our phone shop. We'll start by making the modifications we need for the containing checkout page, which we'll use to control the display of the new child components we're about to create. Open up the ClientApp/pages/Checkout.vue file, then modify the template section as follows:

<template>
  <b-containerclass="page pt-4">
    <h1>Checkout</h1>
    <checkout-successv-if="success":order="order"/>
    <b-rowv-else>
      <b-colcols="4"order="2">
        <cart-summary/>
      </b-col>
      <b-colcols="8">
        <checkout-form@success="onSuccess"/>
      </b-col>
    </b-row>
  </b-container>
</template>

At this point, everything we just added should be fairly self-explanatory. We're simply rendering three custom components (that we're yet to define), two of which...