OPAY Payment Method Detection
// ---- Payment Formatting ---- //
$.getScript('//cdnjs.cloudflare.com/ajax/libs/jquery.payment/1.2.3/jquery.payment.min.js', function(){
var creditCardTypeMap = {
visa: '#chasepaytech-VI',
mastercard: '#chasepaytech-MC',
amex: '#chasepaytech-AX',
discover: '#chasepaytech-DI'
},
$paymentMethods = $('#js-opay-form').find('input:radio[name="PaymentMethod"]');
$('#js-cc_number')
.find('input[name="CHASEPaymentech_CC_Number"]')
.payment('formatCardNumber')
.on('keyup', function(){
var type = $.payment.cardType( this.value ),
$matchingPaymentMethod = $(creditCardTypeMap[type]);
if( $matchingPaymentMethod.length ){
$matchingPaymentMethod.prop('checked', true);
}
});
$('#js-cvv').find('input[name="CHASEPaymentech_CC_CVV"]').payment('formatCardCVC');
});
<div class="column whole medium-two-fifths cart-contents">
<p class="h4 fields-heading uppercase">
Payment Method:
<span class="normal text-capitalize">Select a Card</span>
</p>
<input type="hidden" name="Action" value="AUTH">
<input type="hidden" name="Screen" value="INVC">
<div>
<div class="column one-fourth payment-method-selectors">
<label for="chasepaytech-VI">
<input type="radio" name="PaymentMethod" id="chasepaytech-VI" value="chasepaytech:VI" checked="checked">
<img src="../images/icons/logo_vi.png" alt="Visa" title="Visa">
</label>
</div>
<div class="column one-fourth payment-method-selectors">
<label for="chasepaytech-MC">
<input type="radio" name="PaymentMethod" id="chasepaytech-MC" value="chasepaytech:MC">
<img src="../images/icons/logo_mc.png" alt="MasterCard" title="MasterCard">
</label>
</div>
<div class="column one-fourth payment-method-selectors">
<label for="chasepaytech-DI">
<input type="radio" name="PaymentMethod" id="chasepaytech-DI" value="chasepaytech:DI">
<img src="../images/icons/logo_di.png" alt="Discover" title="Discover">
</label>
</div>
<div class="column one-fourth payment-method-selectors">
<label for="chasepaytech-AX">
<input type="radio" name="PaymentMethod" id="chasepaytech-AX" value="chasepaytech:AX">
<img src="../images/icons/logo_ax.png" alt="American Express" title="American Express">
</label>
</div>
</div>
<div id="js-cc_name" class="form-row">
<label class="required">Name on Card:</label>
<div class="cc_name">
<input type="text" name="CHASEPaymentech_CC_Name" size="40" value="">
</div>
</div>
<div id="js-cc_number" class="form-row">
<label class="required">Card Number:</label>
<div class="cc_number">
<input type="text" name="CHASEPaymentech_CC_Number" size="20" value="">
</div>
</div>
<div id="js-cc_exp" class="form-row">
<label class="required">Expiration Date:</label>
<div class="cc_exp">
<select name="CHASEPaymentech_CC_ExpMonth">
<option value="">Month</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
/
<select name="CHASEPaymentech_CC_ExpYear">
<option value="">Year</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
<option value="2038">2038</option>
<option value="2039">2039</option>
</select>
</div>
</div>
<div id="js-cvv" class="form-row">
<label class="required">CVV2:</label>
<div class="cvv">
<input type="text" name="CHASEPaymentech_CC_CVV" size="3" value="">
<a class="js-tooltip" data-tooltip-content="#js-opay-cvv2-msg" data-hasqtip="0" oldtitle="This is a 3 or 4 digit number displayed on the front or back of your credit card." title="">What is this?</a>
<div id="js-opay-cvv2-msg" style="display:none;">
This is a 3 or 4 digit number displayed on the front or back of your credit card.
</div>
</div>
</div>
<div class="breaker"></div>
<div class="align-right hide medium-show">
<button class="button button-medium bg-cyan uppercase">Place Order</button>
</div>
<div class="breaker"></div>
</div>