Payment.html (4231B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Direct.asda.com</title> 9 </head> 10 11 <body> 12 <form class="card-form"> 13 <div class="form-group"><label class="label" for="cardNumber">Card number</label> 14 <div> 15 <div class="input-group"><input class="form-control error" name="cardNumber" type="tel" autocomplete="on" 16 data-id="input-payment-add-card-number" value=""></div><span data-id="input-payment-add-card-number" 17 class="error">Please enter a card number</span> 18 </div> 19 </div> 20 <div class="form-group"><label class="label" for="cardHolder">Name on card</label> 21 <div> 22 <div class="input-group"><input class="form-control" name="cardHolder" type="text" autocomplete="on" 23 data-id="input-payment-add-card-name-on-card" value=""></div> 24 </div> 25 </div> 26 <div class="grid__list card-grid"> 27 <div class="form-group cvv-form-group"><label class="label" for="cvv">CVV number</label> 28 <div> 29 <div class="input-group flex-grid flex-grid--center"><input class="form-control" name="cvv" type="tel" 30 autocomplete="on" data-id="input-payment-add-card-cvv" value=""><span class="icon cvv-code-icon"><svg 31 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="24"> 32 <defs> 33 <rect id="cvv-dep-a" width="36" height="24" rx="2.182"></rect> 34 </defs> 35 <g fill="none" fill-rule="evenodd"> 36 <rect width="36" height="24" fill="#D8D8D8" fill-rule="nonzero" rx="2.182"></rect> 37 <mask id="cvv-dep-b" fill="#fff"> 38 <use xlink:href="#cvv-dep-a"></use> 39 </mask> 40 <path fill="#191919" fill-rule="nonzero" d="M0 0h36v5.526H0z" mask="url(#cvv-dep-b)"></path> 41 <rect width="6.545" height="4.435" x="26.727" y="9.282" stroke="#D8365A" stroke-width="1.091" 42 rx=".545"></rect> 43 <path fill="#FFF" fill-rule="nonzero" d="M2.182 8.737H24v5.526H2.182z"></path> 44 </g> 45 </svg></span><span class="icon cvv-code-helper"><svg xmlns="http://www.w3.org/2000/svg" width="24" 46 height="24"> 47 <g fill="none" fill-rule="evenodd"> 48 <circle fill="#191919" cx="12" cy="12" r="12"></circle><text font-family="Arial-BoldMT, Arial" 49 font-size="15" font-weight="bold" fill="#FFF"> 50 <tspan x="7" y="17.235">?</tspan> 51 </text> 52 </g> 53 </svg></span></div> 54 </div> 55 </div> 56 <div class="grid__list adjust-date"><label class="label">Expiry date</label> 57 <div> 58 <div class="flex-grid--inline"> 59 <div class="flex-grid--inline"> 60 <div class="form-group expiry-month"> 61 <div> 62 <div class="input-group"><input class="form-control" name="month" type="tel" placeholder="MM" 63 data-id="input-payment-add-card-expiry-month" value=""></div> 64 </div> 65 </div><span class="date-separator">/</span> 66 <div class="form-group expiry-year"> 67 <div class="input-group"> 68 <div> 69 <div class="input-group"><input class="form-control" name="year" type="tel" placeholder="YY" 70 data-id="input-payment-add-card-expiry-year" value=""></div> 71 </div> 72 </div> 73 </div> 74 </div> 75 <div></div> 76 </div> 77 </div> 78 </div> 79 <div class="save-card-text"> 80 <div> 81 <div class="checkbox-section size-normal"><input class="checkbox-field" name="save" id="save" 82 data-id="checkbox-payment-save-card" type="checkbox"><label for="save" 83 class="custom-checkbox"></label><label for="save" class="checkbox-label">Save card</label></div> 84 </div> 85 </div> 86 </div> 87 </form> 88 </body> 89 90 </html>