<div id="pay-credit-card" ng-class="payWithCreditCardVm.activeAccordionClass" class="content ng-scope active">
<div class="block-content">
<form action="#" name="payWithCreditCardVm.guestPaymentForm" class="ng-pristine ng-invalid ng-invalid-required">
<div id="add-card" class="row collapse collapse-left">
<div class="small-9 medium-5 large-5 end columns error" ng-class="{error: payWithCreditCardVm.isInvalidCardNumber}">
<input type="tel" name="card-number-guest" id="credit-card" class="credit-card ng-pristine ng-invalid ng-invalid-required" placeholder="enter cc number" ng-model="payWithCreditCardVm.paywithcreditcard.cardNumber" ng-blur="payWithCreditCardVm.onBlurCardNumber()" ng-change="payWithCreditCardVm.scanCardNumber('cardNumber', 'isInvalidCardNumber')" required="" cc-validate="">
<div class="error-message ng-binding">This field is required</div>
</div>
<div class="small-12 medium-7 large-7 columns end">
<ul class="card-list inline-list" ng-class="{keyed: payWithCreditCardVm.paywithcreditcard.type}">
<li class="jcp" ng-class="{active: payWithCreditCardVm.paywithcreditcard.type=='JCP'}"><img src="img/jcp.jpg" alt="JCPenney"></li>
<li class="visa" ng-class="{active: payWithCreditCardVm.paywithcreditcard.type=='Visa'}"><img src="img/Visa-card.png" alt="Visa"></li>
<li class="mastercard" ng-class="{active: payWithCreditCardVm.paywithcreditcard.type=='MasterCard'}"><img src="img/mc.png" alt="MasterCard"></li>
<li class="amex" ng-class="{active: payWithCreditCardVm.paywithcreditcard.type=='Amex'}"><img src="img/amex.png" alt="American Express"></li>
<li class="discover" ng-class="{active: payWithCreditCardVm.paywithcreditcard.type=='Discover'}"><img src="img/discover.png" alt="Discover"></li>
<li class="dualcard" ng-class="{active: payWithCreditCardVm.paywithcreditcard.type=='JCPenneyMasterCard'}"><img src="img/jcpMCIcon.png" alt="JCPenney MasterCard"></li>
</ul>
</div>
<div ng-show="payWithCreditCardVm.isExpDateShown" class="row collapse card-expiration-fields ng-hide">
<div class="small-12 medium-12 large-12 columns">
<h6>Expiration Date</h6>
</div>
<div class="small-5 medium-3 large-2 columns" ng-class="{error: payWithCreditCardVm.isInvalidMonth}">
<select id="cardExpirationMonth" name="month-guest" data-prompt="Month" ng-model="payWithCreditCardVm.paywithcreditcard.expiryMonth" placeholder="Month" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidMonth')" ng-blur="payWithCreditCardVm.onBlurInput()" ng-required="payWithCreditCardVm.isExpDateShown" class="ng-pristine ng-valid ng-valid-required">
<option value="" selected="" disabled="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<div class="error-message ng-binding">Select a valid month</div>
</div>
<div class="small-3 medium-3 large-2 columns" ng-class="{error: payWithCreditCardVm.isInvalidYear}">
<select id="cardExpirationYear" name="year-guest" data-prompt="Year" ng-model="payWithCreditCardVm.paywithcreditcard.expiryYear" ng-options="expyear.code as expyear.year for expyear in payWithCreditCardVm.expiryYear" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidYear')" ng-required="payWithCreditCardVm.isExpDateShown" class="ng-pristine ng-valid ng-valid-required"><option value="" selected="" disabled="" class="">Year</option><option value="0">2016</option><option value="1">2017</option><option value="2">2018</option><option value="3">2019</option><option value="4">2020</option><option value="5">2021</option><option value="6">2022</option><option value="7">2023</option><option value="8">2024</option><option value="9">2025</option><option value="10">2026</option></select>
<div class="error-message ng-binding"></div>
</div>
<div class="small-4 medium-3 large-2 columns end" ng-class="{error: payWithCreditCardVm.isInvalidCvv}">
<input type="tel" id="c-v-v" name="c-v-v-guest" placeholder="C V V" ng-model="payWithCreditCardVm.paywithcreditcard.cvvNumber" maxlength="" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.scanCvvNumber('cvvNumber', 'isInvalidCvv')" ng-required="payWithCreditCardVm.isExpDateShown" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding"></div>
</div>
</div>
<div class="small-12 medium-12 large-12 columns">
<h5 class="body-2">Billing Information</h5>
<input id="billing-as-shipping" ng-hide="payWithCreditCardVm.isShipToStore || payWithCreditCardVm.isDigital || !payWithCreditCardVm.hasShipping" class="checkbox toggle-data ng-pristine ng-valid" data-el="#new-billing-address" data-toggle-self="false" name="billingAsShipping" type="checkbox" ng-change="payWithCreditCardVm.optionBillingInformationSelected()" ng-model="payWithCreditCardVm.isSameAsShippingAddress">
<label for="billing-as-shipping" ng-hide="payWithCreditCardVm.isShipToStore || payWithCreditCardVm.isDigital || !payWithCreditCardVm.hasShipping" class="">Same as shipping address</label>
</div>
<div id="new-billing-address" ng-hide="payWithCreditCardVm.isSameAsShippingAddress && payWithCreditCardVm.hasShipping" class="ng-hide">
<div class="address-form">
<div class="row collapse">
<div class="small-12 medium-6 large-6 columns" ng-class="{error: payWithCreditCardVm.isInvalidFirstName}">
<input id="payment-first-name" name="first-name-guest" type="text" placeholder="First name" ng-model="payWithCreditCardVm.paywithcreditcard.address.firstName" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidFirstName')" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore" mask="@?s?" repeat="17" restrict="reject" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding"></div>
</div>
<div class="small-12 medium-6 large-6 columns end" ng-class="{error: payWithCreditCardVm.isInvalidLastName}">
<input id="payment-last-name" name="last-name-guest" type="text" placeholder="Last name" ng-model="payWithCreditCardVm.paywithcreditcard.address.lastName" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidLastName')" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore" mask="@?s?" repeat="24" restrict="reject" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding"></div>
</div>
</div>
<div class="row collapse">
<div class="small-12 medium-6 large-6 columns" ng-class="{error: payWithCreditCardVm.isInvalidCountry}">
<select id="country-cc-guest" name="country-guest" class="country ng-pristine ng-valid ng-valid-required" data-prompt="Country" ng-model="payWithCreditCardVm.paywithcreditcard.address.country" ng-options="country.code as country.name for country in payWithCreditCardVm.countries" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.selectedCountry()" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore"><option value="0">APO/FPO/DPO</option><option value="1" selected="selected">United States</option></select>
<div class="error-message ng-binding">Select a valid country</div>
</div>
<div class="small-12 medium-6 large-6 columns end" ng-class="{error: payWithCreditCardVm.isInvalidCompany}" ng-hide="payWithCreditCardVm.APO_FPO_DPO">
<a class="blue-link optional-toggle" ng-click="payWithCreditCardVm.showCompanyTextField(payWithCreditCardVm)" ng-hide="payWithCreditCardVm.isShowCompanyTextField">+ Company (optional)</a>
<input name="company-guest" type="text" id="company" ng-show="payWithCreditCardVm.isShowCompanyTextField" placeholder="Company (Optional)" ng-model="payWithCreditCardVm.paywithcreditcard.address.company" repeat="23" restrict="reject" class="ng-pristine ng-valid ng-hide">
<div class="error-message ng-binding"></div>
</div>
</div>
<div class="row collapse">
<div class="small-12 medium-6 large-6 columns" ng-class="{error: payWithCreditCardVm.isInvalidAddress1}">
<input id="payment-address-one" name="address-1-guest" type="text" placeholder="Street address" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidAddress1')" ng-model="payWithCreditCardVm.paywithcreditcard.address.addressLineOne" ng-blur="payWithCreditCardVm.onBlurInput()" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding"></div>
<div class="military-specific ng-hide" ng-show="payWithCreditCardVm.APO_FPO_DPO">
<!-- ngRepeat: militarySpecific in payWithCreditCardVm.militarySpecific --><div id="military-specific" ng-repeat="militarySpecific in payWithCreditCardVm.militarySpecific" class="ng-scope">
<span ng-bind-html="militarySpecific.name" class="ng-binding"><em><strong>Army/Navy/Marines:</strong> Enter unit and Box Number</em></span>
</div><!-- end ngRepeat: militarySpecific in payWithCreditCardVm.militarySpecific --><div id="military-specific" ng-repeat="militarySpecific in payWithCreditCardVm.militarySpecific" class="ng-scope">
<span ng-bind-html="militarySpecific.name" class="ng-binding"><em><strong>Ships:</strong> Enter Ships Name and Hull Number</em></span>
</div><!-- end ngRepeat: militarySpecific in payWithCreditCardVm.militarySpecific --><div id="military-specific" ng-repeat="militarySpecific in payWithCreditCardVm.militarySpecific" class="ng-scope">
<span ng-bind-html="militarySpecific.name" class="ng-binding"><em><strong>Air Force:</strong>Enter PSC and Box Number</em></span>
</div><!-- end ngRepeat: militarySpecific in payWithCreditCardVm.militarySpecific -->
</div>
</div>
<div class="small-12 medium-6 large-6 columns end" ng-class="{error: payWithCreditCardVm.isInvalidAddress2}">
<a class="blue-link optional-toggle" ng-click="payWithCreditCardVm.showAddressLine2TextField(payWithCreditCardVm)" ng-hide="payWithCreditCardVm.isShowAddressLine2TextField">+ Street address 2 (optional)</a>
<input name="address-2-guest" type="text" id="address2" ng-show="payWithCreditCardVm.isShowAddressLine2TextField" placeholder="Street address 2 (optional)" ng-model="payWithCreditCardVm.paywithcreditcard.address.addressLineTwo" class="ng-pristine ng-valid ng-hide">
<div class="error-message ng-binding"></div>
</div>
<div class="small-12 medium-12 large-12 columns end" ng-class="{error: payWithCreditCardVm.isInvaliMilitaryAddressType}">
<select id="military-address-type" name="military-address-type" ng-model="payWithCreditCardVm.paywithcreditcard.address.militaryAddressType" ng-options="country.code as country.name for country in payWithCreditCardVm.militaryAddressType" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.selectedMilitaryAddressType()" ng-show="payWithCreditCardVm.APO_FPO_DPO" type="text" ng-required="(!payWithCreditCardVm.isSameAsShippingAddress && payWithCreditCardVm.APO_FPO_DPO) || (payWithCreditCardVm.isShipToStore && payWithCreditCardVm.APO_FPO_DPO)" class="ng-pristine ng-hide ng-valid ng-valid-required"><option value="" selected="" disabled="" class="">select APO/FPO/DPO</option><option value="0">APO</option><option value="1">FPO</option><option value="2">DPO</option></select>
<div class="error-message ng-binding"></div>
</div>
</div>
<div class="row collapse">
<div class="small-4 medium-4 large-4 columns small-pad-right" ng-class="{error: payWithCreditCardVm.isInvalidZip}">
<input id="payment-zipcode" name="zip-guest" type="tel" placeholder="Zip" ng-model="payWithCreditCardVm.paywithcreditcard.address.zip" ng-blur="payWithCreditCardVm.onBlurInput(payWithCreditCardVm.paywithcreditcard)" ng-keyup="payWithCreditCardVm.keyUpZipcode($event, 'isInvalidZip', payWithCreditCardVm.paywithcreditcard.address.zip)" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore" maxlength="5" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding">Enter a valid zip code</div>
</div>
<div class="small-8 medium-4 large-4 columns" ng-class="{error: payWithCreditCardVm.isInvalidState}">
<select id="state" name="state-guest" data-prompt="State" ng-model="payWithCreditCardVm.paywithcreditcard.address.state" ng-options="state.code as state.name for state in payWithCreditCardVm.usStates" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidState')" ng-required="(!payWithCreditCardVm.isSameAsShippingAddress && !payWithCreditCardVm.APO_FPO_DPO) || (payWithCreditCardVm.isShipToStore && !payWithCreditCardVm.APO_FPO_DPO)" ng-disabled="payWithCreditCardVm.isStatePopulated" ng-hide="payWithCreditCardVm.APO_FPO_DPO" class="ng-pristine ng-valid ng-valid-required"><option value="" selected="" disabled="" class="">State</option><option value="0">Alabama</option><option value="1">Alaska</option><option value="2">American Samoa</option><option value="3">Arizona</option><option value="4">Arkansas</option><option value="5">California</option><option value="6">Colorado</option><option value="7">Connecticut</option><option value="8">Delaware</option><option value="9">District Of Columbia</option><option value="10">Federated States Of Micronesia</option><option value="11">Florida</option><option value="12">Georgia</option><option value="13">Guam</option><option value="14">Hawaii</option><option value="15">Idaho</option><option value="16">Illinois</option><option value="17">Indiana</option><option value="18">Iowa</option><option value="19">Kansas</option><option value="20">Kentucky</option><option value="21">Louisiana</option><option value="22">Maine</option><option value="23">Marshall Islands</option><option value="24">Maryland</option><option value="25">Massachusetts</option><option value="26">Michigan</option><option value="27">Minnesota</option><option value="28">Mississippi</option><option value="29">Missouri</option><option value="30">Montana</option><option value="31">Nebraska</option><option value="32">Nevada</option><option value="33">New Hampshire</option><option value="34">New Jersey</option><option value="35">New Mexico</option><option value="36">New York</option><option value="37">North Carolina</option><option value="38">North Dakota</option><option value="39">Northern Mariana Islands</option><option value="40">Ohio</option><option value="41">Oklahoma</option><option value="42">Oregon</option><option value="43">Palau</option><option value="44">Pennsylvania</option><option value="45">Puerto Rico</option><option value="46">Rhode Island</option><option value="47">South Carolina</option><option value="48">South Dakota</option><option value="49">Tennessee</option><option value="50">Texas</option><option value="51">Utah</option><option value="52">Vermont</option><option value="53">Virgin Islands</option><option value="54">Virginia</option><option value="55">Washington</option><option value="56">West Virginia</option><option value="57">Wisconsin</option><option value="58">Wyoming</option></select>
<div class="error-message ng-binding">Select a valid state</div>
</div>
<div class="small-8 medium-4 large-4 columns ng-hide" ng-show="payWithCreditCardVm.APO_FPO_DPO" ng-class="{error: payWithCreditCardVm.isInvalidMilitaryState}">
<select id="military-state" name="military-state" ng-model="payWithCreditCardVm.paywithcreditcard.address.state" ng-options="country.code as country.name for country in payWithCreditCardVm.apStates" ng-blur="payWithCreditCardVm.onBlurInput()" ng-required="(!payWithCreditCardVm.isSameAsShippingAddress && payWithCreditCardVm.APO_FPO_DPO) || (payWithCreditCardVm.isShipToStore && payWithCreditCardVm.APO_FPO_DPO)" ng-disabled="payWithCreditCardVm.isStatePopulated" class="ng-pristine ng-valid ng-valid-required"><option value="" selected="" disabled="" class="">select a military state</option><option value="0">AA (Armed forces Americas)</option><option value="1">AE (Armed forces Europe)</option><option value="2">AP (Armed forces Pacific)</option></select>
<div class="error-message ng-binding">Select a military state</div>
</div>
<div class="small-12 medium-4 large-4 columns end" ng-class="{error: payWithCreditCardVm.isInvalidCity}">
<input name="city-guest" type="text" placeholder="City" ng-model="payWithCreditCardVm.paywithcreditcard.address.city" ng-blur="payWithCreditCardVm.onBlurInput()" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidCity')" ng-required="(!payWithCreditCardVm.isSameAsShippingAddress && !payWithCreditCardVm.APO_FPO_DPO) || (payWithCreditCardVm.isShipToStore && !payWithCreditCardVm.APO_FPO_DPO)" ng-hide="payWithCreditCardVm.APO_FPO_DPO" mask="@?s?" repeat="20" restrict="reject" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding" ng-hide="payWithCreditCardVm.APO_FPO_DPO"></div>
</div>
</div>
<div class="row collapse">
<!-- Guest user, ADPU+STS+STH billing info email field is mandatory -->
<div class="small-12 medium-6 large-6 columns" ng-class="{error: payWithCreditCardVm.isInvalidEmail}">
<input id="email" name="email" type="email" placeholder="Email address" ng-model="payWithCreditCardVm.paywithcreditcard.email" ng-change="payWithCreditCardVm.clearErrorMessage('isInvalidEmail')" ng-blur="payWithCreditCardVm.onBlurEmail()" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore" class="ng-pristine ng-valid-email ng-valid ng-valid-required">
<div class="error-message ng-binding"></div>
</div>
<div class="small-12 medium-6 large-6 columns end" ng-class="{error: payWithCreditCardVm.isInvalidPhoneNumber, end: payWithCreditCardVm.hasShipping}">
<input id="phone-bill-info" name="phone-guest" type="tel" placeholder="Phone number" ng-model="payWithCreditCardVm.paywithcreditcard.address.phone" ng-blur="payWithCreditCardVm.onBlurInput()" ng-required="!payWithCreditCardVm.isSameAsShippingAddress || payWithCreditCardVm.isShipToStore" ng-keyup="payWithCreditCardVm.keyUpPhoneGuest($event, 'isInvalidPhoneNumber')" ng-paste="payWithCreditCardVm.pastePhoneNumber($event)" maxlength="12" class="ng-pristine ng-valid ng-valid-required">
<div class="error-message ng-binding"></div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Codebase Browser
chromium