Implementing the Billing View

When the user clicks the Continue to Billing button in the shipping view, the billing view appears, allowing the user to then enter billing information. The billing view, shown in Listing 28.17, provides a series of input fields to input the billing information.

The billing template code is similar to the shipping template code, with the addition of a few new fields. The Card radio buttons to select the credit card are bound to the customer.billing[0].cardtype value in the scope. When you change the radio button selection, the model also changes.

The values for the <select> drop-down options come from simple arrays defined in the scope and are bound to the customer.billing[0] data as well. For example, the following lines use an array of number-named months in the scope and bind the <select> value to the customer.billing[0].expiremonth value in the scope:

Click here to view code image

<select ng-model="customer.billing[0].expiremonth"
        ng-options="m for m in months"></select>

One other thing to note is that the CCV value is passed to the verifyBilling(ccv) function for verifying the credit card. The CCV number is not supposed to be stored locally on the customer site, so it is kept separate here and passed as its own parameter. Figure 28.6 shows the rendered billing view.

Listing 28.17 billing.html: Implementing the partial billing template

Click here to view code image

01 <div id="shippingContainer">
02   <h2>Card Info: </h2>
03   <label>Card</label>
04   <input type="radio" ng-model="customer.billing[0].cardtype"
05          value="Visa">  Visa
06   <input type="radio" ng-model="customer.billing[0].cardtype"
07          value="Amex"> Amex
08   <input type="radio" ng-model="customer.billing[0].cardtype"
09          value="MasterCard"> MasterCard
10   <br><label>Name on Card</label>
11   <input type="text" ng-model="customer.billing[0].name" />
12   <br><label>Card Number</label>
13   <input type="text" ng-model="customer.billing[0].number" />
14   <br><label>Expires</label>
15   <select ng-model="customer.billing[0].expiremonth"
16           ng-options="m for m in months"></select>
17   <select ng-model="customer.billing[0].expireyear"
18           ng-options="m for m in years"></select>
19   <label>Card CCV</label>
20   <input class="security" type=text ng-model="ccv" />
21   <h2>Billing Address:</h2>
22   <label>Name</label>
23   <input type="text"
24          ng-model="customer.billing[0].address[0].name" />
25   <br><label>Address</label>
26   <input type="text"
27          ng-model="customer.billing[0].address[0].address" />
28   <br><label>City</label>
29   <input type="text"
30          ng-model="customer.billing[0].address[0].city" />
31   <br><label>State</label>
32   <input type="text"
33          ng-model="customer.billing[0].address[0].state" />
34   <br><label>Zipcode</label>
35   <input type="text"
36          ng-model="customer.billing[0].address[0].zip" />
37   <hr>
38   <div>
39     <span class="button" ng-click="verifyBilling(ccv)">
40       Verify Billing
41     </span>
42     <span class="button" ng-click="setContent('products.html')">
43       Continue Shopping
44     </span>
45   </div>
46 </div>

Figure 28.6 The billing view allows the user to enter credit card information and a billing address.