Checkout_ShippingPayment.html (17433B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>The Home Depot - Checkout</title> 8 </head> 9 <body> 10 <checkout-form name="pickupDetailsSection"> 11 <shipping> 12 <div> 13 <hd-address type="shipping"> 14 <hd-address-field label="Shipping Address" type="type"> 15 <div name="addressFieldForm"> 16 <div> 17 <div> 18 <div> 19 <hd-name-field name="firstName" label="First Name" analytics-tag="pickup options"> 20 <span name="firstName"> 21 <label for="inputField"> 22 <span>First Name</span> 23 </label> 24 <input type="text" id="firstName" name="inputField" maxlength="30" placeholder="" required="required"> 25 </span> 26 </hd-name-field> 27 </div> 28 <div> 29 <hd-name-field name="lastName" label="Last Name" analytics-tag="pickup options"> 30 <span name="lastName"> 31 <label for="inputField"> 32 <span>Last Name</span> 33 </label> 34 <input type="text" id="lastName" name="inputField" maxlength="30" placeholder="" required="required"> 35 </span> 36 </hd-name-field> 37 </div> 38 </div> 39 <div> 40 <div> 41 <hd-email-field name="emailInput" label="Email" placeholder="you@domain.com" analytics-tag="pickup options"> 42 <span name="emailInput"> 43 <label for="inputField"> 44 <span>Email</span> 45 </label> 46 <input id="emailInput" type="email" name="inputField" placeholder="you@domain.com" required="required"> 47 </span> 48 </hd-email-field> 49 </div> 50 </div> 51 <div> 52 <create-account> 53 <div> 54 <div> 55 <div> 56 <span role="button" tabindex="0">Create an account</span> to track your order history and check out faster - all we need is a password.</div> 57 <div> 58 <p>Check out faster, access past orders, and organize products into lists.</p> 59 </div> 60 </div> 61 <div> 62 <div> 63 <hd-password-field label="Password" name="password"> 64 <span name="hdPasswordField"> 65 <label for="textPasswordInput"> 66 <span>Password</span> 67 </label> 68 <input type="password" name="inputField"> 69 <span> 70 </span> 71 </span> 72 </hd-password-field> 73 </div> 74 <div> 75 <hd-password-field name="confirmPassword" label="Confirm Password"> 76 <span name="hdPasswordField"> 77 <label for="textPasswordInput"> 78 <span>Confirm Password</span> 79 </label> 80 <input type="password" name="inputField"> 81 <span> 82 </span> 83 </span> 84 </hd-password-field> 85 </div> 86 <div> 87 <div> 88 <hd-check-box field-value="" label="SHOW PASSWORD" tab-index-hd="-1"> 89 <div> 90 <div> 91 <input tabindex="-1" type="checkbox" name="hdCheckBox_3" id="hdCheckBox_3"> 92 <label for="hdCheckBox_3">SHOW PASSWORD</label> 93 </div> 94 </div> 95 </hd-check-box> 96 </div> 97 <div> 98 <span>Passwords are case sensitive and must be at least 8 characters.</span> 99 <div> 100 <span>Create a strong password by:</span> 101 <ul> 102 <li>Including numbers or symbols</li> 103 <li>Mixing upper/lowercase</li> 104 </ul> 105 </div> 106 </div> 107 <div> 108 <a target="_blank">Terms & Conditions</a> | <a target="_blank">Privacy & Security</a> 109 </div> 110 </div> 111 <create-account-button> 112 </create-account-button> 113 </div> 114 </div> 115 </create-account> 116 </div> 117 <div> 118 <div> 119 <hd-phone-field name="phone" label="Phone" analytics-tag="pickup options"> 120 <span name="phone"> 121 <label for="inputField"> 122 <span>Phone</span> 123 </label> 124 <input id="phone" name="inputField" type="tel" inputmode="numeric" placeholder="(___) ___-____" required="required"> 125 </span> 126 </hd-phone-field> 127 </div> 128 </div> 129 </div> 130 <div> 131 <div> 132 <div> 133 <label for="billingAddress"> 134 <span>Shipping Address</span> 135 </label> 136 </div> 137 <span name="streetInput"> 138 <hd-type-ahead id="billingAddress" name="billingAddress" label="Billing Street Address" placeholder="Address Line 1" pause="700" input-class="form-input__field"> 139 <div> 140 <input id="billingAddress_value" name="billingAddress" type="text" maxlength="30" placeholder="Address Line 1" required=""> 141 </div> 142 </hd-type-ahead> 143 </span> 144 </div> 145 </div> 146 <div> 147 <span role="button" tabindex="0">Add an apartment, suite, building, etc.</span> 148 </div> 149 <div> 150 <div> 151 <span name="zipInput"> 152 <label for="zip"> 153 <span>ZIP Code</span> 154 </label> 155 <input type="tel" name="zip" maxlength="5" required=""> 156 </span> 157 </div> 158 <div> 159 <span> 160 <label> 161 <span>City, State</span> 162 </label> 163 <span> 164 <b>MOUNTAIN VIEW, CA</b> 165 </span> 166 <div> 167 <span name="stateInput"> 168 <select id="cityStateListSelector" autocomplete="billing street-address" name="pickupLocation"> 169 <option value="? object:null ?" selected="selected"> 170 </option> 171 </select> 172 </span> 173 </div> 174 </div> 175 </div> 176 </div> 177 </hd-address-field> 178 </hd-address> 179 <div> 180 <hd-check-box field-value="checkoutFlags.hideBillingAddress" label="Use as Billing Address" checked="checked"> 181 <div> 182 <div> 183 <input tabindex="" type="checkbox" name="hdCheckBox_1" id="hdCheckBox_1" checked="checked"> 184 <label for="hdCheckBox_1">Use as Billing Address</label> 185 </div> 186 </div> 187 </hd-check-box> 188 </div> 189 </div> 190 </shipping> 191 </checkout-form> 192 <card-field form-is-valid="formIsValid"> 193 <div name="cardForm"> 194 <div> 195 <input name="expiryMonth" type="tel" autocomplete="cc-exp-month" tabindex="-1"> 196 <input name="expiryYear" type="tel" autocomplete="cc-exp-year" tabindex="-1"> 197 </div> 198 <div> 199 <div> 200 <span>Payment</span> 201 </div> 202 </div> 203 <div> 204 <div> 205 <input type="radio" value="PayPal" id="payPal" name="paymentOptions"> 206 <label for="payPal" tabindex="10"> 207 <span> 208 </span> 209 <div> 210 </div> 211 </label> 212 </div> 213 <div> 214 <input type="radio" select-payment="" value="creditCard" id="creditCard" name="paymentOptions" checked="checked"> 215 <label for="creditCard" tabindex="10"> 216 <span> 217 </span>Credit Card</label> 218 </div> 219 <div> 220 <span> 221 <label> 222 </label> 223 <input id="cardNumber" name="cardNumber" type="tel" mask-field="" mask="0000 0000 0000 0000 0000 0" maxlength="26" placeholder="Enter credit card number" required="required"> 224 <span id="ccIcon" tabindex="-1" role="button"> 225 </span> 226 </span> 227 </div> 228 <div> 229 <div> 230 <div> 231 <div> 232 <span>Expiration</span> 233 <span> 234 <select id="ccMonth" name="ccMonth" required=""> 235 <option value="" selected="selected">Month</option> 236 <option label="01 - January" value="object:17">01 - January</option> 237 <option label="02 - February" value="object:18">02 - February</option> 238 <option label="03 - March" value="object:19">03 - March</option> 239 <option label="04 - April" value="object:20">04 - April</option> 240 <option label="05 - May" value="object:21">05 - May</option> 241 <option label="06 - June" value="object:22">06 - June</option> 242 <option label="07 - July" value="object:23">07 - July</option> 243 <option label="08 - August" value="object:24">08 - August</option> 244 <option label="09 - September" value="object:25">09 - September</option> 245 <option label="10 - October" value="object:26">10 - October</option> 246 <option label="11 - November" value="object:27">11 - November</option> 247 <option label="12 - December" value="object:28">12 - December</option> 248 </select> 249 </span> 250 </div> 251 </div> 252 <div> 253 <div> 254 <span> 255 <select id="ccYear" name="ccYear" required=""> 256 <option value="" selected="selected">Year</option> 257 <option label="2017" value="object:29">2017</option> 258 <option label="2018" value="object:30">2018</option> 259 <option label="2019" value="object:31">2019</option> 260 <option label="2020" value="object:32">2020</option> 261 <option label="2021" value="object:33">2021</option> 262 <option label="2022" value="object:34">2022</option> 263 <option label="2023" value="object:35">2023</option> 264 <option label="2024" value="object:36">2024</option> 265 <option label="2025" value="object:37">2025</option> 266 <option label="2026" value="object:38">2026</option> 267 <option label="2027" value="object:39">2027</option> 268 <option label="2028" value="object:40">2028</option> 269 <option label="2029" value="object:41">2029</option> 270 <option label="2030" value="object:42">2030</option> 271 <option label="2031" value="object:43">2031</option> 272 <option label="2032" value="object:44">2032</option> 273 <option label="2033" value="object:45">2033</option> 274 <option label="2034" value="object:46">2034</option> 275 <option label="2035" value="object:47">2035</option> 276 </select> 277 </span> 278 </div> 279 </div> 280 </div> 281 <div> 282 <span> 283 <label> 284 <span> 285 CVV (on back) 286 </span> 287 </label> 288 <input id="cvv" name="cvv" type="tel" placeholder="ñññ" minlength="3" required=""> 289 <span id="ccIcon"> 290 </span> 291 </span> 292 </div> 293 </div> 294 <div> 295 <span role="button" tabindex="0">Apply a Gift Card</span> 296 <span> | </span> 297 <span role="button" tabindex="0">Have a PO/Job Code for this order?</span> 298 </div> 299 </div> 300 <div> 301 </div> 302 <div> 303 </div> 304 </div> 305 </card-field> 306 <base> 307 <div> 308 <ui-view> 309 <div id="checkout" analytics=""> 310 <div name="checkout"> 311 <div> 312 <div> 313 <div> 314 <myapron-display> 315 <div> 316 <div> 317 <span name="myApronID"> 318 <label for="myapron"> 319 <span>myApron ID (Optional)</span> 320 </label> 321 <input type="tel" name="myapron" maxlength="10"> 322 </span> 323 </div> 324 </div> 325 </myapron-display> 326 <email-subscribe> 327 <div> 328 <div> 329 <hd-check-box field-value="user.emailSubscribed" name="emailSubscribed" label="Yes, I would like to receive emails about unadvertised & online only specials, new products and store promotions." checked="true"> 330 <div> 331 <div> 332 <input tabindex="" type="checkbox" name="emailSubscribed" id="hdCheckBox_2" checked="checked"> 333 <label for="hdCheckBox_2">Yes, I would like to receive emails about unadvertised & online only specials, new products and store promotions.</label> 334 </div> 335 </div> 336 </hd-check-box> 337 </div> 338 </div> 339 </email-subscribe> 340 </div> 341 </div> 342 </div> 343 </div> 344 <div> 345 <right-rail pick-up-options="pickUpOptions" messages="checkoutModel.messagesSummary"> 346 <div> 347 <div> 348 <promotions-summary promotions="order.promotionsModel" messages="messages"> 349 <div name="promoForm"> 350 <div> 351 <span role="button" tabindex="0">Have a promo code?</span> 352 </div> 353 <div> 354 <div> 355 <span> 356 <span> 357 </span> 358 </span> 359 </div> 360 </div> 361 <div> 362 <span> 363 <input id="promoId" name="promoId" type="text"> 364 </span> 365 <span> 366 <a> 367 <span>Apply</span> 368 </a> 369 </span> 370 </div> 371 </div> 372 </promotions-summary> 373 </div> 374 </div> 375 </right-rail> 376 </div> 377 </div> 378 </ui-view> 379 </div> 380 </body> 381 </html>