Checking Out / Review Order
The final step in the ordering process for a customer is reviewing and ordering what's in their basket. The <v:store:checkout> tag provides a form for your users to complete their purchase. Here is an example of a Checkout screen markup:
<ul> <li>Item</li> <li>Qty</li> <li>Price</li> <li>Total</li> </ul> <v:store:cart:items> <ul> <li><v:img path="image" /></li> <li><v:text path="name" /></li> <li><v:text_field path="qty"/></li> <li>$<v:text path="price" /></li> <li>$<v:text path="total" /></li> </ul> </v:store:cart:items> <ul> <li> Payment Method: <v:store:payment_methods_select /> Shipping Method:<v:store:shipping_methods_select /> Coupon Code:<v:store:discount><v:text_field name="discount" /><input type="submit" value="Apply Coupon Code" /> </v:store:discount> </li> <li> Subtotal:$<v:store:cart:subtotal /> <v:store:if_discount>Discount: $<v:store:cart:discount /></v:store:if_discount> Shipping: $<v:store:cart:shipping /> Tax: $<v:store:cart:tax /> Total: $<v:store:cart:total /> </li> </ul> <li> <v:store:user> <li> <h3>Billing Information<span class="edit">(<a href="/register">edit</a>)</h3> Name:<v:text path="billing_name" /> Company:<v:text path="billing_company" /> Address:<v:text path="billing_address" /> Address 2:<v:text path="billing_address_2" /> City:<v:text path="billing_city" /> State:<v:text path="billing_state" /> Country:<v:text path="billing_country" /> Zip/Postal Code:<v:text path="billing_zip" /> Phone Number:<v:text path="billing_phone" /> E-Mail Address:<v:text path="e_mail_address" /> </li> <li><h3>Shipping Information(<a href="/register">edit</a>)</h3> Name:<v:text path="shipping_name" /> Company:<v:text path="shipping_company" /> Address:<v:text path="shipping_address" /> Address 2:<v:text path="shipping_address_2" /> City:<v:text path="shipping_city" /> State:<v:text path="shipping_state" /> Country:<v:text path="shipping_country" /> Zip/Postal Code:<v:text path="shipping_zip" /> Phone Number:<v:text path="shipping_phone" /> </v:store:user> <v:store:checkout register_page="register.html" redirect="order_placed.html" email_confirmation="/emails/confirmation" email_received="/emails/received" email_shipping="/emails/shipping"> <v:store:if_credit_card> <li> <h3>Enter Your Credit Card Information</h3> Credit Card Type:</label><v:store:credit_card_select name="cc_type" required="true" /><label>Credit Card Number: <v:text_field name="cc_number" /> Expiration Date (MM / YYYY): <v:text_field name="cc_month" /> / <v:text_field name="cc_year" /> CVV2: <v:text_field name="cc_cvv" /> </li> </v:store:if_credit_card> </ul> <input type="submit" value="Submit Order" /> </v:store:checkout>
Accepting Coupon Codes
As we have done in our example, you can use the <v:store:discount> tag to give users the ability to enter in "coupon codes," which you manage in Vae's Backstage (and we discuss later in this chapter). Once a value is inputted into You can then display the amount of money discounted using the <v:store:if_discount and <v:store:cart:discount /> tags. We have utillized these tags in the example as well.
<v:text_field name="discount" /> must be included within the <v:store:discount> tags in order for the discount code to be submitted to Vae.
Changing Payment / Shipping Method
Use the <v:store:payment_methods_select /> tag render a menu which will display all the payment methods that your site has been configured to accept. Similarly, the <v:store:shipping_methods_select tag will render a menu for selecting the appropriate shipping method.