2 files changed, 66 insertions, 2 deletions
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
new file mode 100644
index 0000000..a2ddfad
--- /dev/null
+++ b/iridescence/src/components/checkout/CheckoutForm.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="container">
+    <section class="section">
+      <h1 class="title">Customer Info</h1>
+      <hr />
+
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">Name</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control is-expanded ">
+              <input class="input" type="text" placeholder="given name" />
+            </p>
+          </div>
+          <div class="field">
+            <p class="control is-expanded">
+              <input class="input" type="text" placeholder="surname" />
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div class="field is-horizontal">
+        <div class="field-label">
+          <label class="label">E-mail Address</label>
+        </div>
+        <div class="field-body">
+          <div class="field">
+            <p class="control is-expanded">
+              <input class="input" type="email" placeholder="email address" />
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="section">
+      <h1 class="title">Payment</h1>
+      <hr />
+    </section>
+    <section class="section">
+      <h1 class="title">Delivery</h1>
+      <hr />
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckoutForm",
+  computed: {},
+  methods: {}
+};
+</script>
diff --git a/iridescence/src/views/Checkout.vue b/iridescence/src/views/Checkout.vue
index ab28517..3b66fbf 100644
--- a/iridescence/src/views/Checkout.vue
+++ b/iridescence/src/views/Checkout.vue
@@ -1,12 +1,21 @@
 <template>
   <div id="checkout">
-    checkout
+    <ul>
+      <li>get user info (name, address, email, phone)</li>
+      <li>payment option (mailed check, paypal, cash or check on delivery)</li>
+      <li>
+        pickup option (pick up at studio, pick up at simply vintage, ship to
+        address)
+      </li>
+    </ul>
+    <CheckoutForm></CheckoutForm>
   </div>
 </template>
 
 <script>
+import CheckoutForm from "@/components/checkout/CheckoutForm.vue";
 export default {
   name: "Checkout",
-  components: {}
+  components: { CheckoutForm }
 };
 </script>