From 59c7301aae74d0a227800a15d7ab2b0a9436c678 Mon Sep 17 00:00:00 2001
From: Le Deng <z00382545@z00382545-mac.local>
Date: Fri, 10 Mar 2017 17:57:09 -0500
Subject: [PATCH] latest

---
 bookstore-api/.idea/workspace.xml             | 143 ++++++------------
 .../bookstore/resource/PaymentResource.java   |  11 ++
 .../bookstore/resource/PaymentResource.class  | Bin 3299 -> 3824 bytes
 .../app/components/order/order.component.html |  18 +--
 .../app/components/order/order.component.ts   |  48 +++++-
 store-front/src/app/models/payment.ts         |  14 ++
 store-front/src/app/models/user-shipping.ts   |   2 +-
 .../src/app/services/payment.service.ts       |  10 ++
 8 files changed, 137 insertions(+), 109 deletions(-)
 create mode 100644 store-front/src/app/models/payment.ts

diff --git a/bookstore-api/.idea/workspace.xml b/bookstore-api/.idea/workspace.xml
index 3a211d1..3b0c086 100644
--- a/bookstore-api/.idea/workspace.xml
+++ b/bookstore-api/.idea/workspace.xml
@@ -26,11 +26,11 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="ShippingResource.java" pinned="false" current-in-tab="true">
+      <file leaf-file-name="ShippingResource.java" pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShippingResource.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="153">
-              <caret line="49" column="50" lean-forward="false" selection-start-line="49" selection-start-column="50" selection-end-line="49" selection-end-column="50" />
+            <state relative-caret-position="143">
+              <caret line="49" column="4" lean-forward="false" selection-start-line="49" selection-start-column="4" selection-end-line="57" selection-end-column="5" />
               <folding>
                 <element signature="imports" expanded="true" />
               </folding>
@@ -38,82 +38,32 @@
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="UserShipping.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserShipping.java">
+      <file leaf-file-name="PaymentResource.java" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="345">
-              <caret line="26" column="0" lean-forward="false" selection-start-line="26" selection-start-column="0" selection-end-line="26" selection-end-column="0" />
-              <folding>
-                <element signature="imports" expanded="false" />
-                <element signature="e#828#829#0" expanded="false" />
-                <element signature="e#853#854#0" expanded="false" />
-                <element signature="e#887#888#0" expanded="false" />
-                <element signature="e#915#916#0" expanded="false" />
-                <element signature="e#961#962#0" expanded="false" />
-                <element signature="e#1003#1004#0" expanded="false" />
-                <element signature="e#1073#1074#0" expanded="false" />
-                <element signature="e#1135#1136#0" expanded="false" />
-                <element signature="e#1181#1182#0" expanded="false" />
-                <element signature="e#1223#1224#0" expanded="false" />
-                <element signature="e#1293#1294#0" expanded="false" />
-                <element signature="e#1355#1356#0" expanded="false" />
-                <element signature="e#1398#1399#0" expanded="false" />
-                <element signature="e#1437#1438#0" expanded="false" />
-                <element signature="e#1501#1502#0" expanded="false" />
-                <element signature="e#1557#1558#0" expanded="false" />
-                <element signature="e#1601#1602#0" expanded="false" />
-                <element signature="e#1641#1642#0" expanded="false" />
-                <element signature="e#1707#1708#0" expanded="false" />
-                <element signature="e#1765#1766#0" expanded="false" />
-                <element signature="e#1811#1812#0" expanded="false" />
-                <element signature="e#1853#1854#0" expanded="false" />
-                <element signature="e#1923#1924#0" expanded="false" />
-                <element signature="e#1985#1986#0" expanded="false" />
-                <element signature="e#2031#2032#0" expanded="false" />
-                <element signature="e#2073#2074#0" expanded="false" />
-                <element signature="e#2143#2144#0" expanded="false" />
-                <element signature="e#2205#2206#0" expanded="false" />
-                <element signature="e#2234#2235#0" expanded="false" />
-                <element signature="e#2261#2262#0" expanded="false" />
-                <element signature="e#2299#2300#0" expanded="false" />
-                <element signature="e#2331#2332#0" expanded="false" />
-                <element signature="e#2377#2378#0" expanded="false" />
-                <element signature="e#2419#2420#0" expanded="false" />
-                <element signature="e#2490#2491#0" expanded="false" />
-                <element signature="e#2552#2553#0" expanded="false" />
-                <element signature="e#2595#2596#0" expanded="false" />
-                <element signature="e#2634#2635#0" expanded="false" />
-                <element signature="e#2698#2699#0" expanded="false" />
-                <element signature="e#2754#2755#0" expanded="false" />
-              </folding>
+            <state relative-caret-position="563">
+              <caret line="113" column="30" lean-forward="false" selection-start-line="113" selection-start-column="30" selection-end-line="113" selection-end-column="30" />
+              <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="ShippingAddressServiceImpl.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/service/impl/ShippingAddressServiceImpl.java">
+      <file leaf-file-name="Payment.java" pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Payment.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="135">
-              <caret line="12" column="13" lean-forward="false" selection-start-line="12" selection-start-column="13" selection-end-line="12" selection-end-column="13" />
-              <folding>
-                <element signature="imports" expanded="false" />
-              </folding>
+            <state relative-caret-position="270">
+              <caret line="23" column="35" lean-forward="true" selection-start-line="23" selection-start-column="35" selection-end-line="23" selection-end-column="35" />
+              <folding />
             </state>
           </provider>
         </entry>
       </file>
-      <file leaf-file-name="UserShippingServiceImpl.java" pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/service/impl/UserShippingServiceImpl.java">
+      <file leaf-file-name="UserPayment.java" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserPayment.java">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="135">
-              <caret line="13" column="13" lean-forward="false" selection-start-line="13" selection-start-column="13" selection-end-line="13" selection-end-column="13" />
-              <folding>
-                <element signature="imports" expanded="false" />
-                <element signature="e#536#537#0" expanded="false" />
-                <element signature="e#593#594#0" expanded="false" />
-                <element signature="e#632#633#0" expanded="false" />
-                <element signature="e#681#682#0" expanded="false" />
-              </folding>
+            <state relative-caret-position="150">
+              <caret line="25" column="35" lean-forward="true" selection-start-line="25" selection-start-column="35" selection-end-line="25" selection-end-column="35" />
+              <folding />
             </state>
           </provider>
         </entry>
@@ -229,7 +179,6 @@
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/ShoppingCart.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserPayment.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserBilling.java" />
-        <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserShipping.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/UserResource.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/Book.java" />
@@ -239,6 +188,7 @@
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShoppingCartResource.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/domain/Order.java" />
         <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShippingResource.java" />
+        <option value="$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java" />
       </list>
     </option>
   </component>
@@ -1038,12 +988,12 @@
       <workItem from="1488378219247" duration="650000" />
       <workItem from="1488461561430" duration="18419000" />
       <workItem from="1488731165185" duration="30270000" />
-      <workItem from="1489159532831" duration="4235000" />
+      <workItem from="1489159532831" duration="4518000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="96517000" />
+    <option name="totallyTimeSpent" value="96800000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="72" y="23" width="1280" height="797" extended-state="0" />
@@ -1144,13 +1094,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Payment.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="165">
-          <caret line="12" column="0" lean-forward="true" selection-start-line="12" selection-start-column="0" selection-end-line="12" selection-end-column="0" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/ShippingAddress.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="165">
@@ -1301,14 +1244,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserPayment.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="210">
-          <caret line="29" column="15" lean-forward="false" selection-start-line="29" selection-start-column="15" selection-end-line="29" selection-end-column="15" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserBilling.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="315">
@@ -1425,14 +1360,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="945">
-          <caret line="79" column="7" lean-forward="false" selection-start-line="47" selection-start-column="6" selection-end-line="79" selection-end-column="7" />
-          <folding />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserShipping.java">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="345">
@@ -1559,13 +1486,37 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/ShippingResource.java">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="153">
-          <caret line="49" column="50" lean-forward="false" selection-start-line="49" selection-start-column="50" selection-end-line="49" selection-end-column="50" />
+        <state relative-caret-position="143">
+          <caret line="49" column="4" lean-forward="false" selection-start-line="49" selection-start-column="4" selection-end-line="57" selection-end-column="5" />
           <folding>
             <element signature="imports" expanded="true" />
           </folding>
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/resource/PaymentResource.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="563">
+          <caret line="113" column="30" lean-forward="false" selection-start-line="113" selection-start-column="30" selection-end-line="113" selection-end-column="30" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/UserPayment.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="150">
+          <caret line="25" column="35" lean-forward="true" selection-start-line="25" selection-start-column="35" selection-end-line="25" selection-end-column="35" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/main/java/com/bookstore/domain/Payment.java">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="270">
+          <caret line="23" column="35" lean-forward="true" selection-start-line="23" selection-start-column="35" selection-end-line="23" selection-end-column="35" />
+          <folding />
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/bookstore-api/src/main/java/com/bookstore/resource/PaymentResource.java b/bookstore-api/src/main/java/com/bookstore/resource/PaymentResource.java
index 7e59f6b..6a4fb5b 100644
--- a/bookstore-api/src/main/java/com/bookstore/resource/PaymentResource.java
+++ b/bookstore-api/src/main/java/com/bookstore/resource/PaymentResource.java
@@ -3,6 +3,7 @@ package com.bookstore.resource;
 import com.bookstore.domain.User;
 import com.bookstore.domain.UserBilling;
 import com.bookstore.domain.UserPayment;
+import com.bookstore.domain.UserShipping;
 import com.bookstore.service.UserPaymentService;
 import com.bookstore.service.UserService;
 import com.bookstore.utility.USConstants;
@@ -102,4 +103,14 @@ public class PaymentResource {
 
         return new ResponseEntity("Set Default Payment Successfully!", HttpStatus.OK);
     }
+
+    @RequestMapping(value = "/getUserPaymentList")
+    public List<UserPayment> getUserPaymentList(
+            Principal principal) {
+        User user = userService.findByUsername(principal.getName());
+
+        List<UserPayment> userPaymentList = user.getUserPaymentList();
+
+        return userPaymentList;
+    }
 }
diff --git a/bookstore-api/target/classes/com/bookstore/resource/PaymentResource.class b/bookstore-api/target/classes/com/bookstore/resource/PaymentResource.class
index c40da5053afcc7fa2997c81b64bb0fee806299ae..81a71f575de774d818eadc80e7bbad61ec7aa197 100644
GIT binary patch
delta 1261
zcmZ{j*-leY6o&tE+Hy*Jg0u>?D3(bnr9ed-u!tg#SSFbVhk^$vGFe&_94d|vaBjWx
z1tb~`UYL06Q<(Sy#0N0`d$%c2LYwYkt$(fkt-V+Oc(+PZzy5vy0iX%*9VkX5A4TYN
zq6^(l^q|*)+vpRkehmY54CZ49!wzT|u_NfjD8@v<xC3`^R}A-@xR0nE6C!5Pjt34H
zn9?w<VMc*7xopJyjQC1y(oj$tnOvOTSc_Rb?r9@2Kvz$6b>3J=L}JSc1+{*2UG+}X
zL}sHa(S~FqHrF5=VFd?7nqAt$y`tjC;$(DgFdC0VC+3X))g_}}EEF{5Xj{ym`6VTp
zbm3O!&+m&(FGLf`IMv;f!j(%QgM2%K4mRv5!u)NW_m|?B4i64%i0PQcLk)8}=CPn*
zQO6P<>4;-lLAAN1dCiboV1BUG)FpHzv7)0Ck2O5ev5GYvM{rcbQytInT*nKfG`!TY
zj#uViTZQE{-k6@eD!YcaIxgbf=WyOfi$#Ig>{Y!f1#W+C31O7;>5BRGD!(KI)!gNA
zE|FFqm}9eX&w@DmsA%A<aJB`$LD`TYWgJBUFtnVbF4ry_Dp1L-f+`$`1wM1c(Vi-!
z#SJS*KU@fqAxLk%3~Xf@pfM9CRwqy`lQmLZLt<eIpqANOj0mERnLNCtdUDxhC8DAb
zl_$rbEK_}ov%yY3jWdjP7Fp;&%a!;jIEQ9Q7IJp%ARA)#VHPvW6UHT36SITbbVXuy
z9$`t=oF!|{lKC@a;%0aAwB+(^<2VJ+g$$2XZ<9O)qyzs=E==(*XLhiJvMix2ODM|{
z%Ch+OWog}?MWCcE;*z)<p1;cb6ffope1TfK3AWfKtSUN#Uva3b?h{=WlyOYsE})Q2
zUc??3-4IBJW^p|dQlUnZXeyN|+HjdU+Nl@aBP{K0xI)uanp9kqZ(BfDh`;pPUZ?$r
Q^xl+SH}@UfZ!2#72g;JTB>(^b

delta 824
zcmZ{i+fEZv6o$W{rMq;tCM6(LL6k!&V5L?R>jA_g;`sz(J!?g);sMVW_7zO#j>Lx`
zUYK~HmnOc3FW?gx|2;G#k}#93wf3I1{`KuO`*-KBOy%dFuit<X-lb^eP!la2_Bp~)
zpJN<PG06!RO&LxmIn~5z&ZID$O)}(jj`ObILW+xAa^|wnG&4!AxSH7{R}E#uwWaEZ
zc+irl<~r!KY@p3>-ExDQhFg}~+%ep>+@oT-&zwhp@UbZqd{2z#A6OnzwRG^v@YwQ%
zdCNvN8J=36@!ax)1;b0rD_#dZraShAx51?8jd^5)nwS0j$-Ix%*ec9cowGr&`s2~A
zRYE=!?n-jiUR-P8%5GN1u)HVVIQRu`DJ<!dbpoh#i>zHvP^)gOJbLIQ78WlCKm75U
z%Wozw+fSMSK@8DHKCB&+5)|vTF6tv2>J^op6SUhKU{H!_Weu@SN^R<#XFHAIVcL~H
ztjt0gZ-E^Y<tyyeuid3;zcr@syA`>|W0XCPE?BfvE6Ap$KBHsLO1~VEjYu6z5m`y`
z-jJ*mk(DB{T%F7f_kW&!t9kz6_>O0Poo9aCM98yVbm&T?sc4dOD_9B<OCe$@L@b4f
grE5)=18cLm8`3qV&JB!*Q*BmsP-}MqmM1&$7xDp6-v9sr

diff --git a/store-front/src/app/components/order/order.component.html b/store-front/src/app/components/order/order.component.html
index 31e24be..924d976 100644
--- a/store-front/src/app/components/order/order.component.html
+++ b/store-front/src/app/components/order/order.component.html
@@ -133,7 +133,7 @@
                             </h4>
                             </div>
                             <div class="panel-body ">
-                                <table class="table " *ngIf="not emptyPaymentList ">
+                                <table class="table " *ngIf="!emptyPaymentList ">
                                     <thead>
                                         <tr>
                                             <th>Available Credit Card</th>
@@ -146,7 +146,7 @@
                                                 {{userPayment.cardName}}
                                             </td>
                                             <td>
-                                                <a (click)="setPaymentMethod(userPayment)">use this address
+                                                <a class="pointer" (click)="setPaymentMethod(userPayment)">use this address
                                 </a>
                                             </td>
                                         </tr>
@@ -159,7 +159,7 @@
                                         <br/>
                                         <div class="form-group">
                                             <label for="cardType">* Select Card Type:</label>
-                                            <select class="form-control" id="cardType" name="type" [(ngModel)]="userPayment.type">
+                                            <select class="form-control" id="cardType" name="type" [(ngModel)]="payment.type">
                                                 <option value="" disabled="disabled">
                                                     -- Card Type --
                                                 </option>
@@ -171,12 +171,12 @@
                                         </div>
                                         <div class="form-group">
                                             <label for="cardHolder">* Card Holder</label>
-                                            <input type="text" class="form-control" id="cardHolder" required="required" placeholder="Card Holder Name" name="holderName" [(ngModel)]="userPayment.holderName" />
+                                            <input type="text" class="form-control" id="cardHolder" required="required" placeholder="Card Holder Name" name="holderName" [(ngModel)]="payment.holderName" />
                                         </div>
                                         <div class="form-group">
                                             <label for="cardNumber">* Card Number</label>
                                             <div class="input-group">
-                                                <input required="required" id="cardNumber" type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" name="cardNumber" [(ngModel)]="userPayment.cardNumber" />
+                                                <input required="required" id="cardNumber" type="tel" class="form-control" name="cardNumber" placeholder="Valid Card Number" name="cardNumber" [(ngModel)]="payment.cardNumber" />
                                                 <span class="input-group-addon"><i class="fa fa-credit-card"
                                                                                            aria-hidden="true"></i></span>
                                             </div>
@@ -189,7 +189,7 @@
                                             <label>* Expiration Date</label>
                                             <div class="row">
                                                 <div class="col-xs-6">
-                                                    <select class="form-control" name="expiryMonth" required="required" [(ngModel)]="userPayment.expiryMonth">
+                                                    <select class="form-control" name="expiryMonth" required="required" [(ngModel)]="payment.expiryMonth">
                                                         <option value="" disabled="disabled">
                                                             --Month--
                                                         </option>
@@ -208,7 +208,7 @@
                                                     </select>
                                                 </div>
                                                 <div class="col-xs-6">
-                                                    <select class="form-control" name="expiryYear" [(ngModel)]="userPayment.expiryYear">
+                                                    <select class="form-control" name="expiryYear" [(ngModel)]="payment.expiryYear">
                                                         <option value="" disabled="disabled">--Year--
                                                         </option>
                                                         <option value="17">2017</option>
@@ -232,7 +232,7 @@
                                     <div class="col-xs-5 col-md-5 pull-right">
                                         <div class="form-group">
                                             <label for="cardCVC">CV Code</label>
-                                            <input id="cardCVC" type="tel" class="form-control" name="cardCVC" placeholder="CVC" name="cvc" [(ngModel)]="userPayment.cvc" />
+                                            <input id="cardCVC" type="tel" class="form-control" name="cardCVC" placeholder="CVC" name="cvc" [(ngModel)]="payment.cvc" />
                                         </div>
                                     </div>
                                 </div>
@@ -264,7 +264,7 @@
                                         <div class="form-group ">
                                             <label for="billingState ">* State</label>
                                             <select id="billingState " class="form-control billingAddress " name="billingAddressState " [(ngModel)]="billingAddress.billingAddressState">
-                                                <option value=" " disabled="disabled ">Please select an option...
+                                                <option value="" disabled="disabled ">-- state --
                                                 </option>
                                                 <option *ngFor="let state of stateList">{{state}}
                                                 </option>
diff --git a/store-front/src/app/components/order/order.component.ts b/store-front/src/app/components/order/order.component.ts
index 54ecf48..b7a6445 100644
--- a/store-front/src/app/components/order/order.component.ts
+++ b/store-front/src/app/components/order/order.component.ts
@@ -4,6 +4,7 @@ import {Book} from '../../models/book';
 import {Router} from "@angular/router";
 import {CartService} from '../../services/cart.service';
 import {ShippingService} from '../../services/shipping.service';
+import {PaymentService} from '../../services/payment.service';
 import {CartItem} from '../../models/cart-item';
 import {ShoppingCart} from '../../models/shopping-cart';
 import {ShippingAddress} from '../../models/shipping-address';
@@ -11,6 +12,7 @@ import {BillingAddress} from '../../models/billing-address';
 import {UserPayment} from '../../models/user-payment';
 import {UserBilling} from '../../models/user-billing';
 import {UserShipping} from '../../models/user-shipping';
+import {Payment} from '../../models/payment';
 
 @Component({
   selector: 'app-order',
@@ -30,11 +32,19 @@ export class OrderComponent implements OnInit {
   private userShipping:UserShipping = new UserShipping();
   private userBilling: UserBilling = new UserBilling();
   private userShippingList: UserShipping[] = [];
+  private userPaymentList: UserPayment[] = [];
+  private payment: Payment = new Payment();
   private selectedTab: number;
   private emptyShippingList: boolean = true;
+  private emptyPaymentList: boolean = true;
   private stateList: string[] = [];
 
-  constructor(private router:Router, private cartService: CartService, private shippingService: ShippingService) { }
+  constructor(
+  	private router:Router, 
+  	private cartService: CartService, 
+  	private shippingService: ShippingService,
+  	private paymentService: PaymentService
+  	) { }
 
   onSelect(book:Book) {
     this.selectedBook = book;
@@ -66,7 +76,7 @@ export class OrderComponent implements OnInit {
   }
 
   setShippingAddress(userShipping: UserShipping) {
-  	this.shippingAddress.shippingAddressName = userShipping.userShippingNmae;
+  	this.shippingAddress.shippingAddressName = userShipping.userShippingName;
   	this.shippingAddress.shippingAddressStreet1 = userShipping.userShippingStreet1;
   	this.shippingAddress.shippingAddressStreet2 = userShipping.userShippingStreet2;
   	this.shippingAddress.shippingAddressCity = userShipping.userShippingCity;
@@ -75,6 +85,24 @@ export class OrderComponent implements OnInit {
   	this.shippingAddress.shippingAddressZipcode = userShipping.userShippingZipcode;
   }
 
+  setPaymentMethod(userPayment: UserPayment) {
+  	this.payment.type = userPayment.type;
+  	this.payment.cardName = userPayment.cardName;
+  	this.payment.cardNumber = userPayment.cardNumber;
+  	this.payment.expiryMonth = userPayment.expiryMonth;
+  	this.payment.expiryYear = userPayment.expiryYear;
+  	this.payment.cvc = userPayment.cvc;
+  	this.payment.holderName = userPayment.holderName;
+  	this.payment.defaultPayment = userPayment.defaultPayment;
+  	this.payment.billingAddress.billingAddressName = userPayment.userBilling.userBillingName;
+  	this.payment.billingAddress.billingAddressStreet1 = userPayment.userBilling.userBillingStreet1;
+  	this.payment.billingAddress.billingAddressStreet2 = userPayment.userBilling.userBillingStreet2;
+  	this.payment.billingAddress.billingAddressCity = userPayment.userBilling.userBillingCity;
+  	this.payment.billingAddress.billingAddressState = userPayment.userBilling.userBillingState;
+  	this.payment.billingAddress.billingAddressCountry = userPayment.userBilling.userBillingCountry;
+  	this.payment.billingAddress.billingAddressZipcode = userPayment.userBilling.userBillingZipcode;
+  }
+
   ngOnInit() {
   	this.getCartItemList();
     
@@ -100,12 +128,26 @@ export class OrderComponent implements OnInit {
         }
     );
 
+    this.paymentService.getUserPaymentList().subscribe(
+    	res=>{
+          console.log(res.json());
+          this.userPaymentList=res.json();
+          this.emptyPaymentList = false;
+        },
+        error=>{
+          console.log(error.text());
+        }
+    );
+
     for (let s in AppConst.usStates) {
     	this.stateList.push(s);
     }
 
-    this.billingAddress.billingAddressState="";
+    this.payment.billingAddress = this.billingAddress;
 
+    this.payment.expiryMonth="";
+    this.payment.expiryYear="";
+    this.billingAddress.billingAddressState="";
     this.shippingAddress.shippingAddressState="";
   }
 
diff --git a/store-front/src/app/models/payment.ts b/store-front/src/app/models/payment.ts
new file mode 100644
index 0000000..d7832ac
--- /dev/null
+++ b/store-front/src/app/models/payment.ts
@@ -0,0 +1,14 @@
+import {BillingAddress} from './billing-address';
+
+export class Payment {
+	public id: number;
+    public type: string;
+    public cardName: string;
+    public cardNumber: string;
+    public expiryMonth: string;
+    public expiryYear: string;
+    public cvc: number;
+    public holderName: string;
+    public defaultPayment: boolean;
+    public billingAddress: BillingAddress;
+}
diff --git a/store-front/src/app/models/user-shipping.ts b/store-front/src/app/models/user-shipping.ts
index 488d99a..6a2f33c 100644
--- a/store-front/src/app/models/user-shipping.ts
+++ b/store-front/src/app/models/user-shipping.ts
@@ -1,6 +1,6 @@
 export class UserShipping {
 	public id: number;
-    public userShippingNmae: string;
+    public userShippingName: string;
     public userShippingStreet1: string;
     public userShippingStreet2: string;
     public userShippingCity: string;
diff --git a/store-front/src/app/services/payment.service.ts b/store-front/src/app/services/payment.service.ts
index 3ef8999..bb7d579 100644
--- a/store-front/src/app/services/payment.service.ts
+++ b/store-front/src/app/services/payment.service.ts
@@ -19,6 +19,16 @@ export class PaymentService {
     return this.http.post(url, JSON.stringify(payment), {headers : tokenHeader});
   }
 
+  getUserPaymentList() {
+    let url = this.serverPath+"/payment/getUserPaymentList";
+    
+    let tokenHeader = new Headers ({
+      'Content-Type': 'application/json',
+      'x-auth-token' : localStorage.getItem("xAuthToken")
+    });
+    return this.http.get(url, {headers : tokenHeader});
+  }
+
   removePayment(id: number) {
     let url = this.serverPath+"/payment/remove";