<script type="text/javascript" src="https://token.ultracart.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://token.ultracart.com/js/json3.min.js"></script>
<script type="text/javascript">
  // Take the version that we just included and scope it locally.  The noConflict will return $ and jQuery to their
  // original values so that the version of jQuery used for the hosted fields does not conflict with any other existing
  // version of jQuery or other JS library that use $ that are on the page.
  var jQueryHostedFields = $.noConflict(true);
  // Also make sure that we're providing consistent JSON functionality in browsers, but don't pollute existing libraries
  // by running our version in noConflict mode.  This will restore whatever is there similar to jQuery.
  // This will also make sure we have a JSON implementation in older versions of IE.
  var jsonHostedFields = JSON3.noConflict();
</script>
<script type="text/javascript" src="https://token.ultracart.com/checkout/checkout-hosted-fields-1.0.js"></script>
<script type="text/javascript">window.UltraCartHostedFields || document.write('<script src="//token.ultracart.com/checkout/checkout-hosted-fields-1.0.js?r=' + new Date().getTime() + '"><\/script>')</script>

jQuery("#cardNumber").on("uchf:ready", function(){
  console.log("Received an event that the hosted field on the card number input is ready.");
});

<script type="text/javascript" src="https://token.ultracart.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://token.ultracart.com/js/json3.min.js"></script>
<script type="text/javascript">
  // Take the version that we just included and scope it locally.  The noConflict will return $ and jQuery to their
  // original values so that the version of jQuery used for the hosted fields does not conflict with any other existing
  // version of jQuery or other JS library that use $ that are on the page.
  var jQueryHostedFields = $.noConflict(true);
  // Also make sure that we're providing consistent JSON functionality in browsers, but don't pollute existing libraries
  // by running our version in noConflict mode.  This will restore whatever is there similar to jQuery.
  // This will also make sure we have a JSON implementation in older versions of IE.
  var jsonHostedFields = JSON3.noConflict();
</script>
<script type="text/javascript" src="https://token.ultracart.com/checkout/checkout-hosted-fields-1.0.js"></script>
<!-- the following line is a redundant check to ensure the hosted fields file is loaded first -->
<script type="text/javascript">window.UltraCartHostedFields || document.write('<script src="//token.ultracart.com/checkout/checkout-hosted-fields-1.0.js?r=' + new Date().getTime() + '"><\/script>')</script>
<script type="text/javascript">

  jQueryHostedFields(document).ready(function() {
    UltraCartHostedFields.setup(jQueryHostedFields, jsonHostedFields, {
          'sessionCredentials': {
            'merchantId': 'DEMO' // Change to your merchant ID
            // NOTE: This example if for a form post.  If you're using a javascript checkout, the session credentials
            // also need the 'shoppingCartId'.  But ONLY for javascript checkouts.
          },
          'cssUrls':[
//              'https://www.mysite.com/styles.css'
          ],
          'form': '#myForm',  // This is only needed for a form POST.  javascript checkouts should not be providing this.
          'hostedFields':{
            'creditCardNumber': {
              'selector': '#cardNumber',
              'tokenSelector': '#cardNumberToken' // This is only needed for a form POST.  javascript checkouts dont deal with tokens
            },
            'creditCardCvv2': {
              'selector': '#cvv2',
              'tokenSelector': '#cvv2Token' // This is only needed for a form POST.  javascript checkouts dont deal with tokens
            }
          }
        });
  });

</script>

<form action="https://secure.ultracart.com/cgi-bin/UCEditor" method="POST" id="myForm">

  <!-- Change the value of this input to your merchant ID -->
  <input type="hidden" name="merchantId" value="DEMO">

  <!-- These are the two token values that will be submitted to the UltraCart server that will sync up the sensitive data -->
  <input type="hidden" name="CreditCardNumberToken" id="cardNumberToken">
  <input type="hidden" name="CreditCardCvv2Token" id="cvv2Token">

  <input type="text" name="CreditCardNumber" id="cardNumber" value=""/>
  <br/><br/>

  <input type="text" name="CreditCardCVV2" id="cvv2"/>
  <br/><br/>

  <input type="submit" value="submit">
</form>

<script type="text/javascript">
  window.ultraCartHostedFieldsDebugMode = true;
</script>

// as a reminder, jQueryHostedFields is a reference to a jQuery object. 
// The CSS style of the hosted fields will mimic the underlying fields, so for example, if you
// change the credit card field to have a red background, then the hosted fields will also change to red.
 
    jQueryHostedFields("#cardNumber").on('change', function(){
	  // When a change occurs, the hosted field library will add one of three classes to the underlying input: noCreditCardNumber, invalidCreditCardNumber, validCreditCardNumber

      if (!jQueryHostedFields(this).val() || jQueryHostedFields(this).hasClass("noCreditCardNumber")) {
        // No value in the credit card field
      }
      if (jQueryHostedFields(this).hasClass("invalidCreditCardNumber")) {
        // The value in the credit card field is invalid
      }
    });

    jQueryHostedFields("#cvv2").on('change', function(){
      // Clear existing classes
      jQueryHostedFields("#cvv2").removeClass("noCreditCardCvv2");
      jQueryHostedFields("#cvv2").removeClass("validCreditCardCvv2");
      jQueryHostedFields("#cvv2").removeClass("invalidCreditCardCvv2");

      // Regex for basic validation of a masked CVV2 value.
      var re = /[X]{3,4}/i;

      // Test to see if the field is empty, appears valid or is invalid
      var fieldValue = jQueryHostedFields(this).val();
      if (fieldValue === "") {
        jQueryHostedFields("#cvv2").addClass("noCreditCardCvv2");
      } else if (re.test(fieldValue)) {
        jQueryHostedFields("#cvv2").addClass("validCreditCardCvv2");
      } else {
        jQueryHostedFields("#cvv2").addClass("invalidCreditCardCvv2");
      }
    });

    // Perform initial validation
    jQueryHostedFields("#cardNumber,#cvv2").trigger("change");

Ionic:

   Ionic CLI                     : 6.19.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.1.9
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : not installed
   @capacitor/core    : 3.5.1
   @capacitor/ios     : 3.5.1

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v16.15.1 (/usr/local/bin/node)
   npm    : 8.11.0
   OS     : macOS Monterey

<script type="text/javascript">
      var hostedFields = null;
      // setup should be called each time the UI updates.
      // NOTICE THE CALLBACK BEING PASSED IN
      function setupSecureCreditCardFields(ccCallback) {
        window.ultraCartHostedFieldsDebugMode = false; // set this to true to see verbose debugging.  usually only UltraCart support will use this.
        hostedFields = UltraCartHostedFields.setup(jQuery, JSON3, {
          'sessionCredentials': {
            'merchantId': 'CHANGEME', 'shoppingCartId': app.data.cart.get('cartId') // the responsive checkout example stores the cart in a backbonejs model under the namespace app.data.cart.
          },
          'hostedFields': {
            'creditCardNumber': {
              'selector': '#creditCardNumber',
              // HERE IS THE CALLBACK BEING INSTALLED IN THE CC NUM FIELD
              'callback': ccCallback
            },
            'creditCardCvv2': {
              'selector': '#creditCardVerificationNumber'
            }
          }
        });
      }
      // teardown should be called each time a UI needs destroying.
      function teardownSecureCreditCardFields() {
        if (hostedFields != null) {
          hostedFields.destroy();
          hostedFields = null;
        }
      }
</script>

// ---------------------------------------------------------------------
// --- Payment Fields ---
// ---------------------------------------------------------------------
app.views.Payment = Backbone.View.extend({
  el: '#payment',
  events: {
    'focus input[type=text]': 'selectText',
    'change input[type=text],input[type=number],input[type=email],select': 'copyFieldToCart',
    'click .safePop': 'showSafePop',
    'click #final_btn': 'placeOrder',
    'blur input[type=text], input[type=number], input[type=email], select': 'sendGaEvent',
    'click .toggle': 'toggleSummary'
  },

  'onClose': function () {
      if(cartOptions.showSummaryBeforeFinalize) {
        this.model.off('sync reset change:subtotal change:tax change:shippingHandling change:total', this.render, this);
      }
  },

  initialize: function () {
    if(cartOptions.showSummaryBeforeFinalize) {
      this.model.on('sync reset change:subtotal change:tax change:shippingHandling change:total', this.render, this);
    }
    _.bindAll(this);
  },
  render: function () {

    // ========================================================
    // TEARDOWN!  We do this at the beginning of the render phase
    // ========================================================
    teardownSecureCreditCardFields();

    var ccType = this.model.get('creditCardType') || '';
    var ccExpMonth = this.model.get('creditCardExpirationMonth') || 0;
    var ccExpYear = this.model.get('creditCardExpirationYear') || 0;
    var sourceTypes = this.model.get('creditCardTypes') || ['AMEX', 'Discover', 'MasterCard', 'Visa' ];

    var ccTypes = [];
    _.each(sourceTypes, function (card) {
      ccTypes.push({card: card, selected: card == ccType });
    });
    var ccMonths = [
      {month: 1, name: '01', monthName: 'January', selected: 1 == ccExpMonth},
      {month: 2, name: '02', monthName: 'February', selected: 2 == ccExpMonth},
      {month: 3, name: '03', monthName: 'March', selected: 3 == ccExpMonth},
      {month: 4, name: '04', monthName: 'April', selected: 4 == ccExpMonth},
      {month: 5, name: '05', monthName: 'May', selected: 5 == ccExpMonth},
      {month: 6, name: '06', monthName: 'June', selected: 6 == ccExpMonth},
      {month: 7, name: '07', monthName: 'July', selected: 7 == ccExpMonth},
      {month: 8, name: '08', monthName: 'August', selected: 8 == ccExpMonth},
      {month: 9, name: '09', monthName: 'September', selected: 9 == ccExpMonth},
      {month: 10, name: '10', monthName: 'October', selected: 10 == ccExpMonth},
      {month: 11, name: '11', monthName: 'November', selected: 11 == ccExpMonth},
      {month: 12, name: '12', monthName: 'December', selected: 12 == ccExpMonth}
    ];

    var ccYears = [];
    for (var year = 13; year < 31; year++) {
      ccYears.push({year: year, selected: '20' + year == ccExpYear});
    }

    // If we're getting a masked cc number back, the validation rules for the CC number input need to be adjusted.
    var maskedNumber = app.data.cart.get('creditCardNumber').indexOf('XXXX-XXXX') >= 0 ? true : false;

    var context = {
      'ccTypes': ccTypes,
      'ccMonths': ccMonths,
      'ccYears': ccYears,
      'cart': this.model.attributes,
      'splitTest': cartOptions.splitTest,
      'cartOptions': window.cartOptions,
      'subtotal': this.model.get('subtotalLocalizedFormatted'),
      'tax': this.model.get('taxLocalizedFormatted'),
      'subtotalDiscount': (app.data.cart.get('subtotalDiscountLocalizedFormatted')),
      'subtotalWithDiscount' : (app.data.cart.get('subtotalWithDiscountLocalizedFormatted')),
      'shippingHandling': this.model.get('shippingHandlingLocalizedFormatted'),
      'total': this.model.get('totalLocalizedFormatted'),
      'maskedNumber': maskedNumber
    };

    this.$el.html(app.templates.payment(context));
    var that = this;
    this.$el.find('.ccvIcon').qtip({ // Get the tooltip running.
      content: {
        text: 'Loading...',
        ajax: {
          url: 'ccvhelp.html',
          loading: false
        }
      },
      show: 'hover',
      style: {
        classes: 'ccvToolTip'
      },
      position: {
        my: 'bottom center', // Bottom center of the tooltip
        at: 'top center', // ...positioned at the top center of .cvvIcon
        target: $('.ccvIcon'),
        container: that.$el,
        viewport: $(window),
        effect: false,
        adjust: {
          method: 'flip none'
        }
      }
    });

    // ========================================================
    // SETUP!  We do this after the html is rendered
    // ========================================================
    setupSecureCreditCardFields(this.hostedFieldsCallback);

    return this;

  },
  'showSafePop': function(event) {
    app.commonFunctions.safePop(event);
  },
  selectText: function (event) {
    jQuery(event.target).select();
  },
  'toggleSummary' : function (event) {
    $('.paymentSummaryHidden').slideToggle('fast', function() {
      if($(".paymentSummaryHidden").is(":visible")) {
        $('.toggle').html('[-]');
      } else {
        $('.toggle').html('[+]');
      }
    });
  },
  'sendGaEvent': function(event) {
    var fieldName = event.target.id;
    var value = jQuery.trim(jQuery(event.target).val());
    if(value && typeof ga == 'function') { // Send virtual pageview if field is filled out
      ga('send', {
        'hitType': 'pageview',
        'page': '/form/' + event.target.id,
        'title': event.target.id + ' blur'
      });
    }
  },
  'updateSecurityCodeMessage' : function(ccType) {
      // Show different help messages depending on the cc type.
    if(ccType == "AMEX") {
      var message = "(CVV / CVC) 4 digit code on the front of your card";
    } else {
      var message = "(CVV / CVC) 3 digit code on the back of your card";
    }
    this.$el.find('#ccvNote').html(message);
  },
  'copyFieldToCart': function (event) {
    var fieldName = event.target.id;
    var value = jQuery.trim(jQuery(event.target).val());
    var changes = {};


    // Add the "20" before the year
    if(fieldName === 'creditCardExpirationYear') {
      value = '20' + value;
    }

    changes[fieldName] = value;
    this.model.set(changes);
  },

// ========================================================
// CALLBACK !
// card is the object passed back from the hosted fields.  If it contains a cardType field, the upload was successful.
// ========================================================
  'hostedFieldsCallback': function(card){
    var changes = {};
   if(card && card.cardType) {
         // create a change object to update our backbonejs model.
         changes['creditCardType'] = card.cardType;
         // change the css on the <ul> field to visually indicate which card was entered.
         this.$el.find('ul#card_logos').removeClass().addClass('is_' + card.cardType );
         this.updateSecurityCodeMessage(card.cardType); // Show a different CCV help message depending on card type.
         // update the data model
          this.model.set(changes);
       } else {
         // if they uploaded junk, clear out the css class so none of the fields appear selected.
         this.$el.find('ul#card_logos').removeClass().addClass('is_nothing');
       }
  },

  placeOrder: function (event) {
    event.preventDefault();
    noCouponPop=true;
    $('#frmCheckout').validationEngine('validate');
    app.commonFunctions.checkout('Credit Card');
  }

});

<div class="bender-12 columns">
  <ul id="card_logos" {{#ucCompare cart.creditCardType 'false' operator="!="}}class="is_{{cart.creditCardType}}"{{/ucCompare}}>
    <li class="card_visa">Visa</li>
    <li class="card_mastercard">MasterCard</li>
    <li class="card_amex">American Express</li>
    <li class="card_discover">Discover</li>
  </ul>
</div>