steveosoule
6/16/2015 - 4:36 PM

OPAY Payment Method Detection

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>