influxweb
11/19/2015 - 1:36 AM

Miva - Proxy Credit Card Fields

Miva - Proxy Credit Card Fields

var opayments = {};
opayments.debug = true;
opayments.$form = $('input[name="Action"]').closest('form');
opayments.$actualRows = $('.payment-field-row');
opayments.$proxyInputs = $('.proxy-input');


opayments.init = function(){
	opayments.copyAllActualToProxy();
	opayments.$actualRows.on('input keyup blur change', 'input, select', opayments.copyAllActualToProxy);
	opayments.$proxyInputs.on('input keyup blur change', opayments.copyProxyInputToActual);
	opayments.$form.on('submit', opayments.copyAllProxyToActual );

	if( opayments.debug ){
		opayments.$actualRows.css('opacity', 0.5);
	} else {
		opayments.$actualRows.hide();
	}
	$('.proxy-payment-fields').show();
};


opayments.copyActualRowToProxy = function(){
	var $row = $(this),
		code = $row.data('code'),
		invalid = $row.data('invalid'),
		classes = (!!invalid) ? 'invalid red' : '',
		$input = $row.find('input');

	switch (code) {
		case 'cc_exp':
			$('.proxy-input-cc_exp_month').closest('.proxy-payment-field-row').addClass(classes);
			$('.proxy-input-cc_exp_month').val( $row.find('[name*="Month"], [name*="month"]').val() );
			$('.proxy-input-cc_exp_year').val( $row.find('[name*="Year"], [name*="year"]').val() );
			break;
		case 'cc_name':
		case 'cc_fname':
		case 'cc_lname':
		case 'cc_number':
		case 'cc_cvv':
		default:
			$('.proxy-input-' + code).closest('.proxy-payment-field-row').addClass(classes);
			$('.proxy-input-' + code).val( $input.val() );
			break;
	}
};
opayments.copyAllActualToProxy = function(){
	opayments.$actualRows.each( opayments.copyActualRowToProxy );
};


opayments.copyProxyInputToActual = function(){
	var $input = $(this),
		code = $input.data('code'),
		$proxy = {};

	switch (code) {
		case 'cc_exp_month':
			$proxy = opayments.$form.find('[name*="Month"], [name*="month"]');
			break;
		case 'cc_exp_year':
			$proxy = opayments.$form.find('[name*="Year"], [name*="year"]');
			break;
		case 'cc_name':
		case 'cc_fname':
		case 'cc_lname':
		case 'cc_number':
		case 'cc_cvv':
		default:
			$proxy = $('.payment-field-row-' + code).find('input');
			break;
	}

	$proxy.val( $input.val() );
};
opayments.copyAllProxyToActual = function(){
	opayments.$proxyInputs.each( opayments.copyProxyInputToActual );
};


opayments.init();
<form method="post" action="&mvt:payment:url;">
	<input type="hidden" name="Action" value="AUTH" />
	<input type="hidden" name="Screen" value="INVC" />
	<input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />

	<div id="payment"><mvt:item name="payment" /></div>

	<h2>Payment Method: &mvt:payment:desc;</h2>

	<div id="fields-key">
		<div><span class="required">Bold</span> = Required</div>
		<div><span class="italic">Italic</span> = Optional</div>
	</div>

	<input type="hidden" name="PaymentMethod" value="&mvte:global:PaymentMethod;" />
	<mvt:if expr="NOT ISNULL l.settings:payment:desc">
	<span class="bold"></span>
	</mvt:if>

	<mvt:if expr="NOT ISNULL l.settings:payment:message">
	&mvt:payment:message;<br />
	</mvt:if>

	<div id="payment-fields">
		<mvt:foreach array="payment:fields" iterator="field">
			<div class="form_row payment-field-row payment-field-row-&mvte:field:code;" data-code="&mvte:field:code;" data-invalid="&mvte:field:invalid;" data-prompt="&mvte:field:prompt;">
				<mvt:if expr="l.settings:field:invalid">
					<label class="bold red">&mvt:field:prompt;</label>
				<mvt:else>
					<label class="bold">&mvt:field:prompt;</label>
				</mvt:if>
				<mvt:item name="payment" param="field:code" />
			</div>

			<mvt:if expr="l.settings:field:code CIN 'cc_fname,cc_lname'">
				<mvt:assign name="l.settings:payment:proxy:cc_name_split:active" value="1" />
			<mvt:elseif expr="l.settings:field:code CIN 'cc_name'">
				<mvt:assign name="l.settings:payment:proxy:cc_name_full:active" value="1" />
			<mvt:elseif expr="l.settings:field:code EQ 'cc_number'">
				<mvt:assign name="l.settings:payment:proxy:cc_number:active" value="1" />
			<mvt:elseif expr="l.settings:field:code EQ 'cc_exp'">
				<mvt:assign name="l.settings:payment:proxy:cc_exp:active" value="1" />
			<mvt:elseif expr="l.settings:field:code EQ 'cc_cvv'">
				<mvt:assign name="l.settings:payment:proxy:cc_cvv:active" value="1" />
			</mvt:if>
		</mvt:foreach>
	</div>

	<div class="proxy-payment-fields" style="display: none;">
		<mvt:if expr="l.settings:payment:proxy:cc_name_full:active">
			<div class="form_row proxy-payment-field-row">
				Name on Card<br>
				<input type="text" class="proxy-input proxy-input-cc_name" data-code="cc_name" placeholder="Full Name">
			</div>
		</mvt:if>
		<mvt:if expr="l.settings:payment:proxy:cc_name_split:active">
			<div class="form_row proxy-payment-field-row">
				Name on Card<br>
				<input type="text" class="proxy-input proxy-input-cc_fname" data-code="cc_fname" placeholder="First Name">
				<input type="text" class="proxy-input proxy-input-cc_lname" data-code="cc_lname" placeholder="Last Name">
			</div>
		</mvt:if>
		<mvt:if expr="l.settings:payment:proxy:cc_number:active">
			<div class="form_row proxy-payment-field-row">
				Card Number<br>
				<input type="text" class="proxy-input proxy-input-cc_number" data-code="cc_number" placeholder="Card Number">
			</div>
		</mvt:if>
		<div class="form_row proxy-payment-field-row">
			Expiration Date<br>
			<mvt:if expr="l.settings:payment:proxy:cc_exp:active">
				<select class="proxy-input proxy-input-cc_exp_month" data-code="cc_exp_month">
					<option value="">Select one...</option>
					<mvt:while expr="g.cc_exp_month_counter LT 12">
						<mvt:assign name="g.cc_exp_month_counter" value="g.cc_exp_month_counter + 1" />
						<option value="&mvte:global:cc_exp_month_counter;">&mvte:global:cc_exp_month_counter;</option>
					</mvt:while>
				</select>
				<select class="proxy-input proxy-input-cc_exp_year" data-code="cc_exp_year">
					<option value="">Select one...</option>
					<mvt:assign name="g.cc_exp_year" value="s.dyn_tm_year" />
					<mvt:while expr="g.cc_exp_year_counter LT 25">
						<option value="&mvte:global:cc_exp_year;">&mvte:global:cc_exp_year;</option>
						<mvt:assign name="g.cc_exp_year_counter" value="g.cc_exp_year_counter + 1" />
						<mvt:assign name="g.cc_exp_year" value="s.dyn_tm_year + g.cc_exp_year_counter" />
					</mvt:while>
				</select>
			</mvt:if>
			<mvt:if expr="l.settings:payment:proxy:cc_cvv:active">
				<input type="text" size="4" class="proxy-input proxy-input-cc_cvv" data-code="cc_cvv" placeholder="CVV">
			</mvt:if>
		</div>
	</div>

	<script src="/mm5/js/jquery.min.js"></script>
	<script src="/mm5/js/opayments.js"></script>
	<div class="continue-button"><mvt:item name="buttons" param="Continue" /></div>
</form>

Miva - Proxy Credit Card Fields

This "proxy" input method is an attempt to provide us with a more customizable way way for displaying credit card fields regardless of the payment module that is selected.


View Demo

Click the above link, proceed through the checkout process, and test different payment methods