| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| <!-- |
| Copyright 2017 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| <html> |
| <head> |
| <title>Credit Card Upload Test - Form with address and credit card</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
| </head> |
| <body> |
| <form id="checkout" name="checkout" action="/credit_card_upload_done.html" method="post"> |
| <div>Name: <input type="text" name="name_address" autocomplete="name"></div> |
| <div>Address: <input type="text" name="address" autocomplete="address-line1"></div> |
| <div>City: <input type="text" name="city" autocomplete="address-level2"></div> |
| <div>State: <input type="text" name="state" autocomplete="address-level1"></div> |
| <div>Zip: <input type="text" name="zip" autocomplete="postal-code"></div> |
| <div>Country: <input type="text" name="country" autocomplete="country-name"></div> |
| <hr> |
| <div>Name on card: <input type="text" name="name_cc" autocomplete="cc-name"></div> |
| <div>Credit card number: <input type="text" name="cc_number" autocomplete="cc-number"></div> |
| <div>Expiry Date: |
| <select name="cc_month_exp" id="cc_month_exp_id" autocomplete="cc-month-exp"> |
| <option value="1">01</option> |
| <option value="2">02</option> |
| <option value="3">03</option> |
| <option value="4">04</option> |
| <option value="5">05</option> |
| <option value="6">06</option> |
| <option value="7">07</option> |
| <option value="8">08</option> |
| <option value="9">09</option> |
| <option value="10">10</option> |
| <option value="11">11</option> |
| <option value="12">12</option> |
| </select> |
| / |
| <input type="text" name="cc_year_exp" id="cc_year_exp_id" placeholder="YYYY" autocomplete="cc-exp-year"></div> |
| <div>CVC: <input name="cc_cvc" autocomplete="cc-csc"></div> |
| <hr> |
| <button id="fill_form" type="button">Fill entire form with default (MasterCard) values</button> |
| <button id="fill_form_delay" type="button">Fill out the name field after 3 seconds</button> |
| <button id="fill_invalid_cvc" type="button">Fill the CVC field with an invalid value</button> |
| <button id="fill_card_only" type="button">Fill the credit card number and expiration fields only</button> |
| <button id="fill_expired_expiration_date" type="button">Fill an expired expiration date</button> |
| <button id="clear_cvc" type="button">Clear the CVC field</button> |
| <button id="clear_name" type="button">Clear the name fields</button> |
| <button id="clear_month" type="button">Clear the month field</button> |
| <button id="clear_year" type="button">Clear the year field</button> |
| <button id="clear_expiration_date" type="button">Clear the expiration date fields</button> |
| <button id="clear_address" type="button">Clear the address fields</button> |
| <button id="add_fields" type="button">Add more fields for current form</button> |
| <button id="submit" type="submit">Submit</button> |
| </form> |
| <script type="text/javascript"> |
| function getNextYear() { |
| var nextYear = new Date(); |
| nextYear.setFullYear(nextYear.getFullYear() + 1); |
| return nextYear.getFullYear(); |
| } |
| |
| document.getElementById("fill_form").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("name_address")[0].value = "John Smith"; |
| document.getElementsByName("address")[0].value = "123 Testing St."; |
| document.getElementsByName("city")[0].value = "Mountain View"; |
| document.getElementsByName("state")[0].value = "California"; |
| document.getElementsByName("zip")[0].value = "94043"; |
| document.getElementsByName("country")[0].value = "US"; |
| document.getElementsByName("name_cc")[0].value = "John Smith"; |
| document.getElementsByName("cc_number")[0].value = "5454545454545454"; |
| document.getElementsByName("cc_month_exp")[0].value = "12"; |
| document.getElementsByName("cc_year_exp")[0].value = getNextYear(); |
| document.getElementsByName("cc_cvc")[0].value = "123"; |
| }); |
| |
| document.getElementById("add_fields").addEventListener( |
| "click", |
| function() { |
| let form = document.getElementById('checkout'); |
| let zip_input = document.createElement('input'); |
| zip_input.setAttribute('type', 'text'); |
| zip_input.setAttribute('value', '123456'); |
| form.insertBefore(zip_input, form.elements[form.elements.length - 2]); |
| }); |
| |
| document.getElementById("fill_form_delay").addEventListener( |
| "click", |
| function() { |
| setTimeout( function() { document.getElementsByName("name_address")[0].value = "Jane Smith"; }, 3000 ); |
| }); |
| |
| document.getElementById("fill_invalid_cvc").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("cc_cvc")[0].value = "12345"; |
| }); |
| |
| document.getElementById("fill_card_only").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("cc_number")[0].value = "5454545454545454"; |
| document.getElementsByName("cc_month_exp")[0].value = "12"; |
| document.getElementsByName("cc_year_exp")[0].value = getNextYear(); |
| }); |
| |
| document.getElementById("fill_expired_expiration_date").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("cc_month_exp")[0].value = "01"; |
| document.getElementsByName("cc_year_exp")[0].value = "2000"; |
| }); |
| |
| document.getElementById("clear_cvc").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("cc_cvc")[0].value = ""; |
| }); |
| |
| document.getElementById("clear_name").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("name_address")[0].value = ""; |
| document.getElementsByName("name_cc")[0].value = ""; |
| }); |
| |
| document.getElementById("clear_month").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("cc_month_exp")[0].value = ""; |
| |
| }); |
| |
| document.getElementById("clear_year").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("cc_year_exp")[0].value = ""; |
| }); |
| |
| document.getElementById("clear_expiration_date").addEventListener( |
| "click", |
| function () { |
| document.getElementsByName("cc_month_exp")[0].value = ""; |
| document.getElementsByName("cc_year_exp")[0].value = ""; |
| }); |
| |
| document.getElementById("clear_address").addEventListener( |
| "click", |
| function() { |
| document.getElementsByName("name_address")[0].value = ""; |
| document.getElementsByName("address")[0].value = ""; |
| document.getElementsByName("city")[0].value = ""; |
| document.getElementsByName("state")[0].value = ""; |
| document.getElementsByName("zip")[0].value = ""; |
| document.getElementsByName("country")[0].value = ""; |
| }); |
| </script> |
| </body> |
| </html> |