card.js in woocommerce payment gateway

example.php

<?php

/*
... omitted all other functions...
*/

/**
	* Add custom credit card form
	*/
	public function payment_fields() {

		//output main div
		?>
		<!-- <div class="payment_box" style="background:white !Important;"> -->
		<?php

		// add description if set
		if ($this->description) {
			echo wpautop( wp_kses_post( $this->description ) );
		}

		$fieldset_id = 'wc_' . esc_attr( $this->id ) . '_cc_form';

		$testmode = 'TEST';
		if ( 'no' === $this->test ) {
			$testmode = 'LIVE';
		}

		// start fieldset
		?>		
		<div id="wc_checkout_frm" style="padding-top:20px; border-radius:8px; background-color: #fff;">
			<div class="card-wrapper"></div>
			<fieldset id="<?=$fieldset_id;?>" class="wc-credit-card-form wc-payment-form" style="background:transparent;">
		<?php

		// support wc standards
		do_action( 'woocommerce_credit_card_form_start', $this->id );

		// add fields
		?>		
			<div class="form-row form-row-wide">
				<label><?=__('Número de Tarjeta','webifica_pagalo_wc');?></label>
				<input class="input-text" id="s<?=$this->cc_number_id;?>" type="tel" autocomplete="off">
			</div>
			<div class="form-row form-row-wide">
				<label><?=__('Nombre de Tarjeta','webifica_pagalo_wc');?></label>
				<input class="input-text" id="s<?=$this->cc_name_id;?>" type="text" autocomplete="off">
			</div>
			<div class="form-row form-row-first">
				<label><?=__('Fecha expira','webifica_pagalo_wc');?></label>
				<input class="input-text" id="s<?=$this->cc_exp_id;?>" type="tel" autocomplete="off" placeholder="MM / YY">
			</div>
			<div class="form-row form-row-last">
				<label><?=__('CVV','webifica_pagalo_wc');?></label>
				<input class="input-text" id="s<?=$this->cc_cvv_id;?>" type="tel" autocomplete="off" placeholder="CVC" style="-webkit-text-security: disc;">
			</div>			
		<?php

		// cuotas
		$cuotas = $this->getCuotas();
		if (count($cuotas)) {
			?>
			<div class="form-row form-row-first">
				<label><?=__('VisaCuotas','webifica_pagalo_wc');?></label>
				<select class="ctas-select" id="s<?=$this->cc_cuotas_id;?>">
					<option <?php if (!isset($_SESSION['wbpgwcuotas']) || $_SESSION['wbpgwcuotas'] < 1) { echo 'selected=""';} ?> value="0"><?=__('Contado','webifica_pagalo_wc');?></option>
			<?php
			foreach ($cuotas as $key => $cuota) {
				?>	
					<option value="<?=$key;?>" <?php if (isset($_SESSION['wbpgwcuotas']) && $_SESSION['wbpgwcuotas'] == $key) { echo 'selected=""';} ?>><?=$key.'('.number_format($cuota,2).'%)';?></option>					
				<?php				
			}
			?>
				</select>
			</div>			
				
			<?php			
		}

		
		// add cardjs
		?>
			<div>
				<small style="bottom: 14px; right: 40px; position: absolute;">
					<a href="https://webifica.com" target="_blank"><img src="<?=plugins_url( 'img/powered-by.svg', WBFPGWBASEFILE );?>" alt="powered-by" style="width:12px; height:auto;"/> by Webifica</a>
				</small>
			</div>		
			<script type="text/javascript">

				function updateCuotas() {
					wbfajaxurl = '<?=admin_url('admin-ajax.php');?>';

					jQuery("#place_order").prop('disabled', true);
					window.btnval = jQuery("#place_order").text();
					jQuery("#place_order").html('<?=__('Cargando...','webifica_pagalo_wc');?>');

					jQuery.ajax({
			            type: "POST",
			            dataType: "json",
			            url: wbfajaxurl,
			            data: {
			            	'action': 'wbpgwc_ajax_cuotas',
			            	'cuotas': jQuery('#s<?=$this->cc_cuotas_id;?>').val(), 
			            	'_ajax_nonce': '<?=wp_create_nonce("wbpgwcnonce");?>'
			            },
			            success: function (data) {
			                jQuery('body').trigger('update_checkout');
			                console.log('changed to '+data.changedto)
			            },
			            error: function (jqXHR, textStatus, errorThrown) {
			            	alert('<?=__("Error al establecer plazo de cuotas","webifica_pagalo_wc");?>');
			                console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
			            },
			            complete: function (jqXHR, textStatus) {
			            	jQuery("#place_order").prop('disabled', false);
			            	jQuery("#place_order").html(window.btnval);
			            }
			  
			        });
				}

				function populateHiddenFields() {

					jQuery('#<?=$this->cc_number_id;?>').val(jQuery('#s<?=$this->cc_number_id;?>').val());
					jQuery('#<?=$this->cc_name_id;?>').val(jQuery('#s<?=$this->cc_name_id;?>').val());
					jQuery('#<?=$this->cc_exp_id;?>').val(jQuery('#s<?=$this->cc_exp_id;?>').val());
					jQuery('#<?=$this->cc_cvv_id;?>').val(jQuery('#s<?=$this->cc_cvv_id;?>').val());
					jQuery('#<?=$this->cc_cuotas_id;?>').val(jQuery('#s<?=$this->cc_cuotas_id;?>').val());


				}

				function refreshCardFields() {
					var elements = ['#s<?=$this->cc_cvv_id;?>', '#s<?=$this->cc_name_id;?>', '#s<?=$this->cc_exp_id;?>', '#s<?=$this->cc_number_id;?>'], e, l, evt;
					for(var i = 0; i < elements.length; i++) {
					  e = jQuery(elements[i]);
					  l = e.get(0);
					  //l.focus();
					  evt = new Event('change');
					  l.dispatchEvent(evt);
					}
				}

				function wbfinitcard() {

					//jQuery("form[name='checkout']").attr('id',"wc_checkout_frm");

					// check if card is already present
					if (jQuery(".jp-card-container").length < 1 )
						jQuery('#wc_checkout_frm').card({

							form: 'form',

							container: '.card-wrapper',

						    formSelectors: {
						        numberInput: 'input#s<?=$this->cc_number_id;?>',
						        expiryInput: 'input#s<?=$this->cc_exp_id;?>',
						        cvcInput: 'input#s<?=$this->cc_cvv_id;?>',
						        nameInput: 'input#s<?=$this->cc_name_id;?>'
						    },

						    messages: {
						        validDate: 'expira',
						        monthYear: 'mm/yyyy',
						    },

						    // Default placeholders for rendered fields - optional
						    placeholders: {
						        number: '•••• •••• •••• ••••',
						        name: '<?=__('Nombre Tarjeta','webifica_pagalo_wc')?>',
						        expiry: '••/••',
						        cvc: '•••'
						    },

						    formatting: true,

						    debug: true
						});

					jQuery(".jp-card-cvc").css('-webkit-text-security','disc');

				}

				jQuery( document ).ready(function($) {
					
					// add change of cuotas
					jQuery('#s<?=$this->cc_cuotas_id;?>').change(function(){
						updateCuotas();
					});

					// add cybersource fingerprint
					document.getElementById("cybsfid").value = cybs_dfprofiler("visanetgt_jupiter","<?=$testmode;?>");

					jQuery('form.checkout').submit(function(){
						populateHiddenFields();
					});

					jQuery(document.body).on("updated_checkout",function(){						
						//return;
						wbfinitcard();	
						refreshCardFields();


						event.preventDefault();						
						return false;
					});			

					// jQuery.when("update_checkout").done(function() {
					// 	wbfinitcard();
					// });
				});
				
			</script>
		<?php

	 	// support wc standards
		do_action( 'woocommerce_credit_card_form_end', $this->id );
	 
		?>
		<!-- <div class="clear"></div> -->
		</fieldset>
		</div>
		<input type="hidden" name="cybsfid" id="cybsfid"/>
		<input type="hidden" id="<?=$this->cc_number_id;?>" name="<?=$this->cc_number_id;?>"/>
		<input type="hidden" id="<?=$this->cc_name_id;?>" name="<?=$this->cc_name_id;?>"/>
		<input type="hidden" id="<?=$this->cc_exp_id;?>" name="<?=$this->cc_exp_id;?>"/>
		<input type="hidden" id="<?=$this->cc_cvv_id;?>" name="<?=$this->cc_cvv_id;?>"/>
		<input type="hidden" id="<?=$this->cc_cuotas_id;?>" name="<?=$this->cc_cuotas_id;?>"/>
		<!-- </div> -->
		<?php

	}