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>