{"AjaxResults":[{"Identifier":"#CustomModalContent","Action":"Replace","Value":"\n <div></div>\n<div class=\"modal-header\">\n <h5 class=\"modal-title\">\n Make Payment \n </h5>\n</div>\n<div class=\"modal-body\">\n <div class=\"container-fluid\">\n <div id=\"GuestPayModalErrorContainer\"></div>\n <form id=\"GuestPayForm\" class=\"home-bill-pay-form\" novalidate>\n <input name=\"__RequestVerificationToken\" type=\"hidden\" value=\"CfDJ8O_EPr46_WNHoKRlslrp9ObqpmfsDMQSvALmWWYC7kF3CpEFy1XBXDylBj0olhY9gpjs3_QYXyDPKORKcs90uDjpz3UMKwEljAcz8Xccgukm_l2Xnbs9u3lIXzKdcDubiM7HPc03Tqj9hiDOs2VkW1I\" />\n \n \n <div class=\"form-group row pt-3\" style=\"text-align: end;\">\n <div class=\"error registrationError\"><span class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"></span></div>\n <label for=\"Guest_Name\" class=\"col-sm-3 control-label col-form-label\">\n <span class=\"noPadding\">Name on Account</span>\n </label>\n <div class=\"col-sm-9\">\n <input data-val=\"true\" data-val-required=\"Name is required\" data-val-regex=\"Name is required\" \n data-val-regex-pattern=\"^((?!Exactly as it appears on your statement).|)*$\" \n data-val-length=\"Name must be less than 115 characters\" data-val-length-max=\"115\" maxlength=\"115\" \n id=\"Guest_Name\" name=\"Name\" class=\"form-control\" \n placeholder=\"Exactly as it appears on your statement\" type=\"text\" value=\"\" required />\n </div>\n \n \n </div>\n \n <div class=\"form-group row\" style=\"text-align: end; padding-top: 1rem;\">\n <div class=\"error registrationError\" style=\"margin-left: 2%;\">\n <span class=\"field-validation-valid\" data-valmsg-for=\"AccountNumber\" data-valmsg-replace=\"true\"></span>\n </div>\n <label for=\"Guest_AccountNumber\" class=\"col-sm-3 control-label col-form-label\">\n <span class=\"noPadding\">Customer Number - Account Number</span>\n </label>\n <div class=\"col-sm-9\">\n <input data-val=\"true\" data-val-required=\"Account Number is required\" data-val-regex=\"Account Number is required\" \n data-val-regex-pattern=\"^((?!Customer Number - Account Number).|)*$\" \n data-val-length=\"Account Number must be less than 50 characters\" data-val-length-max=\"50\" maxlength=\"55\" \n id=\"Guest_AccountNumber\" name=\"AccountNumber\" \n placeholder=\"Customer Number - Account Number\" \n class=\"form-control\" type=\"text\" value=\"\" required />\n </div>\n </div>\n </form>\n </div>\n</div>\n<div class=\"modal-footer\">\n <button type=\"button\" \n class=\"btn btn-secondary\" \n data-bs-dismiss=\"modal\">\n Cancel \n </button>\n <button type=\"button\" \n class=\"btn btn-primary \" \n id=\"home-bill-pay-next\" \n >\n Next \n </button>\n</div>\n \n<script type=\"text/javascript\" nonce=\"ZktwUF5VQLc&#x2B;D79GSSdTtS3ziahuS1NCzzrHFT0&#x2B;dJE=\">\n var myMeter = myMeter || {}; \n \n myMeter.guestPay = (function(module, $) { \n \n module.customModals = []; \n \n var showModal = function(modalId) { \n for (var i = 0; i < module.customModals.length; i++) { \n if (module.customModals[i]._element.id === modalId) { \n module.customModals[i].show(); \n } else { \n module.customModals[i].hide(); \n } \n } \n } \n \n \n var onClickAccountInformationNext = function(token) { \n const form = $(\"#GuestPayForm\"); \n const isValid = form[0].checkValidity(); \n form.addClass('was-validated'); \n \n if (!isValid) { \n event.preventDefault(); \n event.stopPropagation(); \n return; \n } \n \n if (!$('#CustomModal1').length) { \n $('#CustomModal').after( \n '<div class=\"modal fade\" id=\"CustomModal1\" tabindex=\"-1\" role=\"dialog\">'+ \n '<div class=\"modal-dialog modal-lg\">' + \n '<div id=\"CustomModalContent1\" class=\"modal-content\">' + \n '</div>' + \n '</div>'+ \n '</div>'); \n } \n \n const modal = bootstrap.Modal.getOrCreateInstance($('#CustomModal1')); \n module.customModals.push(modal); \n \n var data = form.serialize(); \n if (typeof token !== 'undefined'){ \n data = data + '&g-recaptcha-response=' + token; \n } \n \n processAjax({ \n 'url': '/Home/PayInformation', \n 'data': data, \n 'loadingContainer': '#GuestPayForm', \n 'messageContainer': '#GuestPayModalErrorContainer', \n 'success': function() { \n $(\"#GuestPayForm\").removeClass('was-validated'); \n bootstrap.Modal.getOrCreateInstance($('#CustomModal')).hide(); \n showModal('CustomModal1'); \n myMeter.guestPay.initialize(); \n }, \n 'error': function () { \n if (typeof(grecaptcha) === 'object') { \n grecaptcha.reset(); \n } \n } \n }); \n } \n \n \n var initializeCreditCardForm = function() { \n $('#SaveCreditCard').off('change').on('change', \n function() { \n var showNickname = $(this).prop('checked'); \n if (showNickname) { \n $('.credit-card-nickname').removeClass('d-none'); \n $('.credit-card-nickname .required').prop('required', true); \n $('.credit-card-make-default').removeClass('d-none'); \n } else { \n $('.credit-card-nickname').addClass('d-none'); \n $('.credit-card-nickname .required').prop('required', false); \n $('.credit-card-make-default').addClass('d-none'); \n } \n }); \n \n $(\"#CardNumber\").off('keyup paste').on('keyup paste', function () { \n var cardNumberInput = $(\"#CardNumber\"); \n var cardTypeDisplay = $(\"#CardTypeDisplay\"); \n var cardTypeDropdown = $(\"#SelectedCreditCardPaymentType\"); \n var detectedCardTypeField = $(\"#DetectedCreditCardPaymentType\"); \n \n myMeter.utility.cardNumberInputChanged(cardNumberInput, cardTypeDisplay, cardTypeDropdown, detectedCardTypeField); \n }); \n } \n \n var initializeBankAccountForm = function() { \n //Routing number validation \n $('#RoutingNumber').off('change keyup focus').on('change keyup focus', function () { \n var validRoutingNumber = myMeter.utility.validateRoutingNumber($(this).val()); \n $('.routing-number-input-group').addClass('was-validated'); \n if (!validRoutingNumber) { \n this.setCustomValidity(\"Invalid Routing Number\"); \n $(this).addClass('is-invalid'); \n $(this).removeClass('is-valid'); \n } \n else { \n this.setCustomValidity(\"\"); \n $(this).addClass('is-valid'); \n $(this).removeClass('is-invalid'); \n } \n }); \n \n var elements = $('.routing-number-input-group a[data-bs-toggle=\"popover\"]'); \n if (elements.length > 0) { \n elements.each(function() { \n new bootstrap.Popover(this, \n { \n html: true, \n trigger: 'focus', \n placement: 'left' \n }); \n }); \n } \n \n $('#SaveBankAccount').off('change').on('change', function() { \n var showNickname = $(this).prop('checked'); \n if (showNickname) { \n $('.bank-account-nickname').removeClass('d-none'); \n $('.bank-account-nickname .required').prop('required', true); \n $('.bank-account-make-default').removeClass('d-none'); \n } else { \n $('.bank-account-nickname').addClass('d-none'); \n $('.bank-account-nickname .required').prop('required', false); \n $('.bank-acount-make-default').addClass('d-none'); \n } \n }); \n } \n \n var onChangeBalanceAmount = function() { \n var total = 0; \n $(\".balanceAmount\").each(function () { \n var amt = $(this).val() === \"\" ? 0 : parseFloat($(this).val()); \n total += amt; \n }); \n total = Math.max(total, 0.0); \n $(\"#totalDue\").html(\"$\" + total.toFixed(2)); \n } \n \n var onFocusBalanceAmount = function() { \n var amt = 0; \n if ($(this).val() !== \"\") { \n amt = parseFloat($(this).val()); \n } \n if (amt === 0) { \n $(this).val(\"\"); \n } \n } \n \n var onFocusoutBalanceAmount = function() { \n var amt = 0; \n if ($(this).val() !== \"\") { \n amt = parseFloat($(this).val()); \n } \n $(this).val(amt.toFixed(2)); \n } \n \n var onChangeSelectedProcessingType = function() { \n var processingType = $('input[name=\"SelectedProcessingType\"]:checked').val(); \n \n var data = { \n processingType: processingType, \n viewData: { \n FormType: 'Payment' \n } \n }; \n \n processAjax({ \n 'url': '/Home/SwitchPaymentProcessingType', \n 'data': data, \n 'loadingContainer': '#PaymentInformationForm', \n 'messageContainer': '#PayModalError', \n 'success': function() { \n myMeter.guestPay.initialize(); \n }, \n 'complete': function() { \n $(\"#PayForm\").removeClass('was-validated'); \n } \n }); \n } \n \n var onClickPay = function() { \n const form = $(\"#PayForm\"); \n const isValid = form[0].checkValidity(); \n form.addClass('was-validated'); \n \n if (!isValid) { \n event.preventDefault(); \n event.stopPropagation(); \n return; \n } \n \n if (!$('#CustomModal2').length) { \n $('#CustomModal').after( \n '<div class=\"modal fade\" id=\"CustomModal2\" tabindex=\"-1\" role=\"dialog\">'+ \n '<div class=\"modal-dialog modal-lg\">' + \n '<div id=\"CustomModalContent2\" class=\"modal-content\">' + \n '</div>' + \n '</div>'+ \n '</div>'); \n } \n \n const modal = bootstrap.Modal.getOrCreateInstance($('#CustomModal2')); \n module.customModals.push(modal); \n \n const confirmationUrl = $('input[name=\"SelectedProcessingType\"]:checked').val() === 'Credit' \n ? \"/Home/CreditCardPaymentConfirmation\" \n : \"/Home/BankAccountPaymentConfirmation\"; \n \n processAjax({ \n 'url': confirmationUrl, \n 'data': form.serialize(), \n 'loadingContainer': '#PayForm', \n 'messageContainer': '#PayModalError', \n 'success': function () { \n $(\"#PayForm\").removeClass('was-validated'); \n myMeter.guestPay.initialize(); \n showModal('CustomModal2'); \n } \n }); \n } \n \n \n var onClickPaymentConfirmationCancel = function() { \n showModal('CustomModal1'); \n } \n \n var onClickPaymentConfirmationOk = function() { \n const form = $(\"#PayForm\"); \n const isValid = form[0].checkValidity(); \n form.addClass('was-validated'); \n \n if (!isValid) { \n event.preventDefault(); \n event.stopPropagation(); \n bootstrap.Modal.getOrCreateInstance($('div[id^=\"CustomModal\"]')).hide(); \n bootstrap.Modal.getOrCreateInstance($('#CustomModal1')).show(); \n return; \n } \n \n if (!$('#CustomModal3').length) { \n $('#CustomModal').after( \n '<div class=\"modal fade\" id=\"CustomModal3\" tabindex=\"-1\" role=\"dialog\">'+ \n '<div class=\"modal-dialog modal-lg\">' + \n '<div id=\"CustomModalContent3\" class=\"modal-content\">' + \n '</div>' + \n '</div>'+ \n '</div>'); \n } \n \n const modal = bootstrap.Modal.getOrCreateInstance($('#CustomModal3')); \n module.customModals.push(modal); \n \n const payUrl = $('input[name=\"SelectedProcessingType\"]:checked').val() === 'Credit' \n ? \"/Home/PayCreditCard\" \n : \"/Home/PayBankAccount\"; \n \n $(\".payment-confirmation-btn-ok\").off('click.confirmationOk'); \n \n var params = new URLSearchParams({ \n accountNumber: $('#Guest_AccountNumber').length ? $('#Guest_AccountNumber').val() : '', \n guestName: $('#Guest_Name').length ? $('#Guest_Name').val() : '', \n registrationCode: $('#Guest_GuestPayRegistrationCode').length ? $('#Guest_GuestPayRegistrationCode').val() : '' \n }); \n \n processAjax({ \n 'url': payUrl, \n 'data': form.serialize()+'&'+params.toString(), \n 'loadingContainer': '#PaymentConfirmationLoading', \n 'messageContainer': '#PayConfirmationModalError', \n 'success': function () { \n $(\"#PayForm\").removeClass('was-validated'); \n myMeter.guestPay.initialize(); \n showModal('CustomModal3'); \n }, \n 'error': function() { \n showModal('CustomModal2'); \n }, \n 'complete': function() { \n $(\".payment-confirmation-btn-ok\").on('click.confirmationOk', onClickPaymentConfirmationOk); \n } \n }); \n } \n \n \n var onClickClosePaymentResults = function() { \n showModal(''); \n } \n \n var onClickGuestPayCreateAccount = function() { \n var authenticationForm = $('#GuestPayForm .form-control'); \n var registrationForm = $('#guest-pay-registration-form'); \n registrationForm.resetValidation(); \n if (registrationForm.valid()) { \n \n $('#guest-pay-create-account').off('click'); \n \n processAjax({ \n 'url': '/Home/GuestPayRegistration', \n 'data': authenticationForm.serialize() + \"&\" + registrationForm.serialize(), \n 'messageContainer': '#guest-pay-create-account-message', \n 'loadingContainer': '#guest-pay-registration-form', \n 'success': function () { \n showModal(''); \n }, \n 'complete': function() { \n $('#guest-pay-create-account').on('click', onClickGuestPayCreateAccount); \n } \n }); \n } \n } \n \n module.recaptcha = function(token) { \n onClickAccountInformationNext(token); \n }; \n \n module.initializeExternalPay = function () { \n $(\"#ExternalPayForm\").find(\"input\").keypress(function(event) { \n if (event.key === \"Enter\") { \n event.preventDefault(); \n $(\"#ExternalGuestPayNext\").click(); \n } \n }); \n \n $(\".home-bill-pay-form\").find(\"input\").keypress(function(event) { \n if (event.key === \"Enter\") { \n event.preventDefault(); \n $(\"#home-bill-pay-next\").click(); \n } \n }); \n \n $('#ExternalGuestPayNext').off('click').on('click', function () { \n processAjax({ \n 'url': '/Home/ExternalPay', \n 'loadingContainer': '.payment-information-loading', \n 'messageContainer': '#ExternalGuestPayErrorMessage', \n 'data': $('#ExternalPayForm').serialize(), \n 'success': function () { \n \n } \n }); \n }); \n }; \n \n module.initialize = function() { \n $('#home-bill-pay-next').off('click').on('click', onClickAccountInformationNext); \n \n if ($('input[name=\"SelectedProcessingType\"]:checked').val() === 'Credit') { \n initializeCreditCardForm(); \n } \n if ($('input[name=\"SelectedProcessingType\"]:checked').val() === 'Bank'){ \n initializeBankAccountForm(); \n } \n \n $(\".balanceAmount\").off(\"change keyup\").on(\"change keyup\", onChangeBalanceAmount); \n $(\".balanceAmount\").off(\"focus\").on(\"focus\", onFocusBalanceAmount); \n $(\".balanceAmount\").off(\"focusout\").on(\"focusout\", onFocusoutBalanceAmount); \n onChangeBalanceAmount(); \n \n $('input[name=\"SelectedProcessingType\"]').off('change').on('change', onChangeSelectedProcessingType); \n \n $(\"#Pay\").off('click.pay').on(\"click.pay\", onClickPay); \n \n $(\".payment-confirmation-btn-cancel\").off('click.confirmationCancel').on('click.confirmationCancel', onClickPaymentConfirmationCancel); \n \n $(\".payment-confirmation-btn-ok\").off('click.confirmationOk').on('click.confirmationOk', onClickPaymentConfirmationOk); \n \n $('.close-payment-results').off('click.paymentResults').on('click.paymentResults', onClickClosePaymentResults); \n \n $('#guest-pay-create-account').off('click').on('click', onClickGuestPayCreateAccount); \n } \n \n return module; \n }(myMeter.guestPay || {}, jQuery)); \n</script>\n \n <script nonce=\"ZktwUF5VQLc&#x2B;D79GSSdTtS3ziahuS1NCzzrHFT0&#x2B;dJE=\">\n $(document).ready(function () { \n myMeter.guestPay.initialize(); \n myMeter.guestPay.initializeExternalPay(); \n }); \n </script>\n"}],"Data":null}