CINXE.COM
Donate Today
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!-- Add to home screen for Safari on iOS --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:type" content="article"/> <meta name="twitter:site" content="The Kingdom"> <meta name="twitter:title" content="Give a One Time Contribution"/> <meta name="twitter:description"/> <meta name="twitter:image" content="https://kingdomnil.app.neoncrm.com/neon/resource/kingdomnil/images/logo.gif"/> <meta property="og:image" content="https://kingdomnil.app.neoncrm.com/neon/resource/kingdomnil/images/logo.gif"/> <meta property="og:image:width" content="250"/> <meta property="og:image:height" content="122"/> <meta property="og:site_name" content="The Kingdom"/> <meta property="og:url" content="https://kingdomnil.app.neoncrm.com/forms/one-time-donation"/> <meta property="og:title" content="Give a One Time Contribution"/> <meta property="og:description"/> <title>Donate Today</title> <link rel="shortcut icon" href="/neon/resource/kingdomnil/images/favicon.gif"/> <!-- Common styles and scripts --> <link href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet"> <link href="/nx/portal-static/component/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href="/nx/portal-static/component/fontawesome-pro/css/all.min.css" rel="stylesheet"> <link href="/nx/portal-static/component/multi-select/multi-select.css" rel="stylesheet"> <link href="/nx/portal-static/component/file-upload/file-upload.css" rel="stylesheet"> <link href="/nx/portal-static/component/neon-img-cutter/neon-img-cutter.css" rel="stylesheet"> <link href="/nx/portal-static/component/cropperjs/cropper.min.css" rel="stylesheet"> <link href="/nx/portal-static/component/advanced-search/advanced-search.css" rel="stylesheet"> <link href="/nx/portal-static/component/neon-select/neon-select.css" rel="stylesheet"> <link href="/nx/portal-static/css/portal/portal.css" rel="stylesheet"> <link href="/nx/portal-static/css/campaign-progress.css" rel="stylesheet"> <link v-if="true" href="/np/clients/kingdomnil/customCss.css" rel="stylesheet"> <style> .neonfront_body{ flex-direction: column; align-items: center; } @media screen and (min-width:1400px) { .neonfront_body > :first-child { margin-right: 0px; margin-bottom: 48px; } } @media screen and (min-width:992px) and (max-width:1400px){ .neonfront_body > :first-child { margin-right: 0px; margin-bottom: 48px; } } </style> <style> :root{ --campaign-progress-r: 0; --campaign-progress-g: 0; --campaign-progress-b: 0; --campaign-progress-a: 1; } </style> <style> .neon-body { position: relative; } .neonfront { position: relative; z-index: 2; } .neon-background { background: rgba(255, 255, 255, 1); background-image: url(""); background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ height: 100%; width: 100%; transform: ; background-position: center center; position: fixed; z-index: 1; } .neonfront_element .form-check-input:checked { background-color: #000000!important; } .neonfront_content_wrap{ background: transparent; backdrop-filter: ; } .neonfront_content_title, .neonfront_content_desc { font-family: Arial,sans-serif!important; color: #002D41!important; word-break: break-word; } .btn-outline-primary,.btn-outline-primary:hover { color: #000000!important; background-color: transparent!important; border-color: #E6E9EE; box-shadow: none !important; } .btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-outline-secondary:focus{ background-color: #fff!important; color: #000000!important; border-color: #E6E9EE; box-shadow: none !important; } .neonfront-btn-link { color: #000000!important; } .neonfront_stepper.on,.neonfront_stepper_num { background: #000000!important; } .neonfront_payment_tab .active { border-bottom: 4px solid #000000 !important; color: #000000 !important; } .neonfront-btn-primary, .btn-primary { background-color: #000000 !important; color: #ffffff !important; box-shadow: none !important; } .neonfront-btn-paypal { background-color: #f7c457 !important; } .btn-primary, .form-check-input:checked { border-color: #000000 !important; } .neonfront-btn-outline-primary { color: #000000; } .btn-check:checked + .neonfront-btn-outline-primary, .donationFrequencyChecked, .btn-check:active + .neonfront-btn-outline-primary, .neonfront-btn-outline-primary.active, .neonfront-btn-outline-primary.dropdown-toggle.show { background-color: #000000 !important; color: #ffffff !important; z-index: 0 !important; } .donation-frequency-default-select-icon-bg { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); } .neonfront-check-input-level:checked + .neonfront-btn-level, .neonfront-check-input-level:active + .neonfront-btn-level, .neonfront-btn-level:active, .neonfront-btn-level.active, .neonfront-btn-level.dropdown-toggle.show { border-color: #000000 !important; } .container-fluid.neonfront_header { color: #ffffff !important; background-color: rgba(0, 0, 0, 1)!important; } .container-fluid.neonfront_header .navbar-toggler { color: #ffffff !important; z-index: 100; } .container-fluid.neonfront_footer { color: #ffffff!important; background-color: rgba(0, 0, 0, 1)!important; padding-left: 0px; padding-right: 0px; } .neonfront_footer_lv_info { color: #ffffff!important; font-family: Roboto; font-style: normal; font-weight: 400; font-size: 14px; padding-top: 21px; padding-bottom: 3px; word-break: break-word; min-height: 30px; } .neonfront_footer_lv_info a{ color: #ffffff!important; text-decoration: none!important; } .neonfront_footer_lv_info a:hover{ text-decoration: underline!important; } .neonfront_header .neonfront_link { color: #ffffff!important; } .neonfront-profile-dropdown .fa-caret-down { color: #ffffff!important; } .neonfront-profile-dropdown .name { background-color: #ffffff!important; color: #3C4144!important; } .neonfront_header .neonfront_link.login_button { border-color: #ffffff!important; width: 78px; height: 32px; padding: 0px 0px 2px 0px !important; margin-left: 15px; } .neonfront_footer_lv_info .neonfront_link { color: #ffffff!important; } .neonfront-switch input:checked{ background-color: #000000 !important; } </style> <style> @media screen and (min-width: 1400px){ .neonfront_content { width: 440px; } } @media screen and (min-width:992px) and (max-width:1400px){ .neonfront_content { width: 440px; } } </style> </head> <body> <div class="neon-body" id="app" v-cloak> <!DOCTYPE html> <html lang="en"> <div class="d-flex justify-content-center align-items-center" style="min-height: 100vh;" v-if="redirectingToPayment"> <div>Redirecting you to a secure payment page…</div> </div> <form id="redirectToPaymentForm" method="post" target="_parent" action="/nx/portal/payment-form" class="d-none"> <input type="hidden" name="requestId" v-model="paymentRequestId"> </form> </html> <div class="neon-background"></div> <div class="neonfront" v-show="!redirectingToPayment"> <!DOCTYPE html> <html> <body> <nav class="navbar navbar-expand-lg pt-0" style="padding-bottom: 0!important;" id="header-content"> <div style="position: relative; width: 100%"> <div class="container-fluid neonfront_header"> <div class="navbar-brand"> <div class="neonfront_logo"> <a href="https://kingdomnil.com" target="_blank"> <img src="https://kingdomnil.app.neoncrm.com/neon/resource/kingdomnil/images/logo.gif" width="262" alt="logo.gif"/> </a> </div> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="neonfront_links navbar-nav mb-2 mb-lg-0"> </ul> </div> </div> </div> </nav> </body> </html> <div class="neonfront_cover container-fluid" id="form-content"> <div class="neonfront_body container-fluid"> <div class="neonfront_content"> <!DOCTYPE html> <html lang="en"> </html> <div class="neonfront_content_wrap"> <div class="neonfront_content_title">Give a One Time Contribution</div> </div> <div class="d-none"> <!DOCTYPE html> <html lang="en"> <div class="neonfront_content_campaign"> </div> </html> </div> </div> <!DOCTYPE html> <html lang="en"> <div> <!DOCTYPE html> <html lang="en"> </html> <div class="neonfront_container"> <form class="row" id="neonform_15" @submit.prevent> <input type="hidden" name="id" value="15"> <input type="hidden" name="requestId" value="1b7e72bb-e02f-447a-a1a7-22315cdfe124"> <input type="hidden" name="recaptchaResponse" v-model="recaptchaResponse"> <!-- Page --> <div class="col-12 mb-4"> <div class="row g-3 neonfront-form"> <div class="col-md-12 neonfront_element position-relative"> <button v-show="currentPage!==1 && !created && !separatePayment" type="button" class="btn btn-link neonfront-btn-link neonfront-form-back-button" @click="previousPage" :disabled="submitting"><i class="far fa-chevron-left"></i> </button> <div class="neonfront_steppers row justify-content-between"> <div class="neonfront_stepper" v-bind:class="{on:currentPage===1}" style="width:32%"></div> <div class="neonfront_stepper" v-bind:class="{on:currentPage===2}" style="width:32%"></div> <div class="neonfront_stepper" v-bind:class="{on:currentPage===3}" style="width:32%"></div> </div> <div v-show="currentPage===1"> <div class="neonfront_stepper_title"> <div class="neonfront_stepper_num">1</div> <span class="neonfront_stepper_desc_text">{{pageTitles[currentPage-1]}}</span> </div> <div class="neonfront_page_desc"></div> </div> <div v-show="currentPage===2"> <div class="neonfront_stepper_title"> <div class="neonfront_stepper_num">2</div> <span class="neonfront_stepper_desc_text">{{pageTitles[currentPage-1]}}</span> </div> <div class="neonfront_page_desc"></div> </div> <div v-show="currentPage===3"> <div class="neonfront_stepper_title"> <div class="neonfront_stepper_num">3</div> <span class="neonfront_stepper_desc_text">{{pageTitles[currentPage-1]}}</span> </div> <div class="neonfront_page_desc"></div> </div> </div> </div> </div> <div class="col-12" id="neon-page-1" v-show="currentPage===1"> <div class="row g-3 neonfront-form"> <div class="col-md-12 neonfront_element mt-0"> </div> <!-- Fields --> <body> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!DOCTYPE html> <html lang="en"> <!DOCTYPE html> <html lang="en"> <!-- Pledge Payment --> </html> <!DOCTYPE html> <html lang="en"> <!-- Grant Payment --> </html> <!-- Donation Frequency --> <div v-show="false" class="btn-group" role="group"> <input type="hidden" name="frequency" v-model="selectedFrequency"> <label v-on:click="changeDonationFrequency('donationOnce')" class="btn neonfront-btn-outline-primary btn-nm fs-875" :class="{'donationFrequencyChecked': donationFrequencyChecked('donationOnce')}" style="color: #54698D;border: 1px solid #C0C8D7;border-radius: 3px 0 0 3px;padding-right: 2px;padding-left: 2px;">Donate Once</label> </div> </html> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'frequency'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['frequency']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!DOCTYPE html> <html lang="en"> <!-- Donation Amount --> <div class="row g-2" id="donation-amount-container"> <!-- Layout: Amounts Only --> <div class="col-4" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" value="12.00" id="amount-radio-1" v-on:click="changeDonationAmount(12.00,true)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-1" v-text="formatAmount(12.00)"></label> </div> <div class="col-4" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" value="50.00" id="amount-radio-2" v-on:click="changeDonationAmount(50.00,true)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-2" v-text="formatAmount(50.00)"></label> </div> <div class="col-4" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" value="100.00" id="amount-radio-3" v-on:click="changeDonationAmount(100.00,true)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-3" v-text="formatAmount(100.00)"></label> </div> <div class="col-4" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" value="250.00" id="amount-radio-4" v-on:click="changeDonationAmount(250.00,true)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-4" v-text="formatAmount(250.00)"></label> </div> <div class="col-4" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" value="500.00" id="amount-radio-5" v-on:click="changeDonationAmount(500.00,true)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-5" v-text="formatAmount(500.00)"></label> </div> <div class="col-4" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" value="1000.00" id="amount-radio-6" v-on:click="changeDonationAmount(1000.00,true)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-6" v-text="formatAmount(1000.00)"></label> </div> <div class="col-4" v-show="!donationOnceChecked"> <input type="radio" class="btn-check btn-check-recurring" name="amount.recurring" value="12.00" id="amount-radio-7" v-on:click="changeDonationAmount(12.00,false)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-recurring" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-7" v-text="formatAmount(12.00)"></label> </div> <div class="col-4" v-show="!donationOnceChecked"> <input type="radio" class="btn-check btn-check-recurring" name="amount.recurring" value="25.00" id="amount-radio-8" v-on:click="changeDonationAmount(25.00,false)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-recurring" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-8" v-text="formatAmount(25.00)"></label> </div> <div class="col-4" v-show="!donationOnceChecked"> <input type="radio" class="btn-check btn-check-recurring" name="amount.recurring" value="50.00" id="amount-radio-9" v-on:click="changeDonationAmount(50.00,false)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-recurring" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-9" v-text="formatAmount(50.00)"></label> </div> <div class="col-4" v-show="!donationOnceChecked"> <input type="radio" class="btn-check btn-check-recurring" name="amount.recurring" value="100.00" id="amount-radio-10" v-on:click="changeDonationAmount(100.00,false)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-recurring" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-10" v-text="formatAmount(100.00)"></label> </div> <div class="col-4" v-show="!donationOnceChecked"> <input type="radio" class="btn-check btn-check-recurring" name="amount.recurring" value="250.00" id="amount-radio-11" v-on:click="changeDonationAmount(250.00,false)" autocomplete="off"> <label class="btn neonfront-btn-outline-primary btn-nm px-0 fs-875 btn-label-recurring" style="color: #54698D;border: 1px solid #C0C8D7;" for="amount-radio-11" v-text="formatAmount(250.00)"></label> </div> <div class="col-12" v-show="donationOnceChecked"> <input type="radio" class="btn-check btn-check-donationOnce" name="amount.donationOnce" id="amount-radio-other1" autocomplete="off" @click="changeDonationAmount('',true)"> <label class="btn neonfront-btn-outline-primary btn-nm fs-875 btn-label-donationOnce" style="color: #54698D;border: 1px solid #C0C8D7;padding-left: 2px;padding-right: 2px;overflow: hidden;" for="amount-radio-other1">Other Amount</label> </div> <div class="col-4" v-show="!donationOnceChecked"> <input type="radio" class="btn-check btn-check-recurring" name="amount.recurring" id="amount-radio-other2" autocomplete="off" @click="changeDonationAmount('')"> <label class="btn neonfront-btn-outline-primary btn-nm fs-875 btn-label-recurring" style="color: #54698D;border: 1px solid #C0C8D7;padding-left: 2px;padding-right: 2px;overflow: hidden;" for="amount-radio-other2">Other Amount</label> </div> <!-- Layout: Amounts + Description --> <div class="col-md-12" v-show="donationOtherAmountSelected"> <label class="form-label" style="color: #54698D" for="amount-other-input">{{donationOtherAmountLabel}} *</label> <div class="input-group amount-other-group" :class="{'is-invalid': checkFieldInvalid('amount')}"> <span class="input-group-text"><i class="far" :class="formCurrencySignClass"></i></span> <input type="number" class="form-control neonfront_input neon-field--donation-amount" :class="{'is-invalid': checkFieldInvalid('amount')}" id="amount-other-input" name="amount" aria-describedby="amount_feedback" v-model="donationAmount" @blur="onFieldBlur" @keypress="onAmountKeyPress" @focus="otherAmountFocus" placeholder="0.00"> <span class="input-group-text" style="background-color: #fff;">USD</span> </div> <div id="'amount'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['amount']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="invalid-feedback d-block mt-2"> <div v-show="showDonationAmountInvalidMessage()"> <div v-for="item in invalidField['amount']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> </div> </html> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'amount'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['amount']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12 d-none"> <!-- Section --> <!-- Label --> <label v-bind:for="'campaign'" class="form-label">Campaign</label> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <select v-bind:id="'campaign'" v-bind:name="'campaign'" name="campaign" class="form-select neonfront_input neon-field--donation-campaign" :class="{'is-invalid': checkFieldInvalid('campaign')}" v-bind:aria-describedby="'campaign'+'_feedback'" v-model="formData.campaign" @change="onFieldBlur"> <option></option> <option value="17" selected="selected">One Time Donations</option> </select> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'campaign'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['campaign']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <label v-bind:for="'fund'" class="form-label">Select Sport</label> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <select v-bind:id="'fund'" v-bind:name="'fund'" name="fund" class="form-select neonfront_input neon-field--donation-fund" :class="{'is-invalid': checkFieldInvalid('fund')}" v-bind:aria-describedby="'fund'+'_feedback'" v-model="formData.fund" @change="onFieldBlur"> <option></option> <option value="5">Baseball</option> <option value="14">Cheer/Dance</option> <option value="17">Cross Country</option> <option value="2">Football</option> <option value="1" selected="selected">General Fund</option> <option value="3">Men's Basketball</option> <option value="8">Men's Golf</option> <option value="6">Men's Soccer</option> <option value="10">Men's Tennis</option> <option value="4">Women's Basketball</option> <option value="9">Women's Golf</option> <option value="15">Women's Rowing</option> <option value="7">Women's Soccer</option> <option value="12">Women's Softball</option> <option value="11">Women's Tennis</option> <option value="16">Women's Track & Field</option> <option value="13">Women's Volleyball</option> </select> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <div class="desc" > <i class="fa fa-info-circle"></i><span>Choose 'General Fund' if you want your donation to be used for greatest need.</span> </div> <!-- Invalid --> <div id="'fund'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['fund']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> </body> <!-- Button --> <div class="col-md-12 neonfront_element"> <div class="row g-2" v-show="currentPage===1"> <div class="col"> <button type="button" class="btn neonfront-btn-primary btn-lg" @click="nextPage"> {{forwardButtons[0]}} </button> </div> </div> </div> <!-- Google reCAPTCHA Policy --> <div v-if="currentPage===3" class="col-md-12 neonfront_element"> <div class="re-captcha-policy-border"> <i class="fal fa-lock"></i> Secure Payment </div> <div class="re-captcha-policy"> This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply. </div> </div> </div> </div> <div class="col-12" id="neon-page-2" v-show="currentPage===2"> <div class="row g-3 neonfront-form"> <div class="col-md-12 neonfront_element mt-0"> </div> <!-- Fields --> <body> <div class="neonfront_element col-md-6"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.name.firstName'" class="form-label">First Name *</label> <!-- Input --> <input v-bind:id="'account.name.firstName'" v-bind:name="'account.name.firstName'" name="account.name.firstName" value="" type="text" class="form-control neonfront_input neon-field--donation-account-name-firstName" :class="{'is-invalid': checkFieldInvalid('account.name.firstName')}" v-bind:aria-describedby="'account.name.firstName'+'_feedback'" v-model="formData.account.name.firstName" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.name.firstName'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.name.firstName']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.name.lastName'" class="form-label">Last Name *</label> <!-- Input --> <input v-bind:id="'account.name.lastName'" v-bind:name="'account.name.lastName'" name="account.name.lastName" autocomplete="family-name" value="" type="text" class="form-control neonfront_input neon-field--donation-account-name-lastName" :class="{'is-invalid': checkFieldInvalid('account.name.lastName')}" v-bind:aria-describedby="'account.name.lastName'+'_feedback'" v-model="formData.account.name.lastName" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.name.lastName'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.name.lastName']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <div class="row" v-show="showField('account.asCompany')"> <div class="form-check" > <input class="form-check-input neonfront_checkbox neon-field--donation-account-asCompany" type="checkbox" v-bind:id="'account.asCompany'" v-bind:name="'account.asCompany'" name="account.asCompany" v-model="formData.account.asCompany" @change="onFieldChange" value="true"> <label class="form-check-label neonfront_checkbox_label" v-bind:for="'account.asCompany'">Submit as a company</label> </div> </div> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.asCompany'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.asCompany']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.company.name'" class="form-label">Company Name</label> <!-- Input --> <input v-bind:id="'account.company.name'" v-bind:name="'account.company.name'" name="account.company.name" value="" type="text" class="form-control neonfront_input neon-field--donation-account-company-name" :class="{'is-invalid': checkFieldInvalid('account.company.name')}" v-bind:aria-describedby="'account.company.name'+'_feedback'" v-model="formData.account.company.name" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.company.name'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.company.name']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.email1'" class="form-label">Email</label> <!-- Input --> <input v-bind:id="'account.email1'" v-bind:name="'account.email1'" name="account.email1" value="" type="text" class="form-control neonfront_input neon-field--donation-account-email1" :class="{'is-invalid': checkFieldInvalid('account.email1')}" v-bind:aria-describedby="'account.email1'+'_feedback'" v-model="formData.account.email1" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.email1'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.email1']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.address.line1'" class="form-label">Address Line 1</label> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <div class="row"> <div class="input-group"> <input v-bind:id="'account.address.line1'" v-bind:name="'account.address.line1'+'.line1'" name="account.address.line1.line1" autocomplete="address-line1" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('account.address.line1'+'.line1')}" value="" @blur="onFieldBlur" v-model="formData.account.address.line1.line1" style="width: 42%"> <select class="form-select input-group-text neonfront_input" :class="{'is-invalid': checkFieldInvalid('account.address.line1'+'.type')}" v-bind:name="'account.address.line1'+'.type'" name="account.address.line1.type" v-model="formData.account.address.line1.type" @change="onFieldBlur" style="border-top-right-radius: 0.25rem;border-bottom-right-radius:0.25rem;padding-right: 36px;"> <option value="1" selected="selected">Home</option> <option value="2">Work</option> <option value="3">School</option> <option value="999">Other</option> </select> <div v-bind:id="'account.address.line1'+'.line1_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.line1'+'.line1']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> <div v-bind:id="'account.address.line1'+'.type_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.line1'+'.type']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> </div> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.address.line1'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.line1']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.address.line2'" class="form-label">Address Line 2</label> <!-- Input --> <input v-bind:id="'account.address.line2'" v-bind:name="'account.address.line2'" name="account.address.line2" autocomplete="address-line2" value="" type="text" class="form-control neonfront_input neon-field--donation-account-address-line2" :class="{'is-invalid': checkFieldInvalid('account.address.line2')}" v-bind:aria-describedby="'account.address.line2'+'_feedback'" v-model="formData.account.address.line2" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.address.line2'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.line2']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.address.city'" class="form-label">City</label> <!-- Input --> <input v-bind:id="'account.address.city'" v-bind:name="'account.address.city'" name="account.address.city" value="" type="text" class="form-control neonfront_input neon-field--donation-account-address-city" :class="{'is-invalid': checkFieldInvalid('account.address.city')}" v-bind:aria-describedby="'account.address.city'+'_feedback'" v-model="formData.account.address.city" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.address.city'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.city']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.address.stateOrProvince'" class="form-label">State/Province</label> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <select v-bind:id="'account.address.stateOrProvince'" v-bind:name="'account.address.stateOrProvince'" name="account.address.stateOrProvince" class="form-select neonfront_input neon-field--donation-account-address-stateOrProvince" :class="{'is-invalid': checkFieldInvalid('account.address.stateOrProvince')}" v-bind:aria-describedby="'account.address.stateOrProvince'+'_feedback'" v-model="formData.account.address.stateOrProvince" @change="onFieldBlur"> <option></option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> <option value="AS">American Samoa</option> <option value="FM">Federated States of Micronesia</option> <option value="GU">Guam</option> <option value="MH">Marshall Islands</option> <option value="MP">Northern Mariana Islands</option> <option value="PW">Palau</option> <option value="PR">Puerto Rico</option> <option value="UM">U.S. Minor Outlying Islands</option> <option value="VI">Virgin Islands</option> <option value="AA">Armed Forces Americas</option> <option value="AE">Armed Forces Europe, the Middle East, an</option> <option value="AP">Armed Forces Pacific</option> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland and Labrador</option> <option value="NS">Nova Scotia</option> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut Territory</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <option value="YT">Yukon Territory</option> </select> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.address.stateOrProvince'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.stateOrProvince']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.address.zipCode'" class="form-label">Zip/Postal Code</label> <!-- Input --> <input v-bind:id="'account.address.zipCode'" v-bind:name="'account.address.zipCode'" name="account.address.zipCode" value="" type="text" class="form-control neonfront_input neon-field--donation-account-address-zipCode" :class="{'is-invalid': checkFieldInvalid('account.address.zipCode')}" v-bind:aria-describedby="'account.address.zipCode'+'_feedback'" v-model="formData.account.address.zipCode" @blur="onFieldBlur" > <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.address.zipCode'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.zipCode']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6"> <!-- Section --> <!-- Label --> <label v-bind:for="'account.address.country'" class="form-label">Country</label> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <select v-bind:id="'account.address.country'" v-bind:name="'account.address.country'" name="account.address.country" class="form-select neonfront_input neon-field--donation-account-address-country" :class="{'is-invalid': checkFieldInvalid('account.address.country')}" v-bind:aria-describedby="'account.address.country'+'_feedback'" v-model="formData.account.address.country" @change="onFieldBlur"> <option></option> <option value="1">United States of America</option> <option value="2">Canada</option> <option value="3">Afghanistan</option> <option value="247">Åland Islands</option> <option value="4">Albania</option> <option value="5">Algeria</option> <option value="6">American Samoa</option> <option value="7">Andorra</option> <option value="8">Angola</option> <option value="242">Anguilla</option> <option value="9">Antarctica</option> <option value="10">Antigua and Barbuda</option> <option value="11">Argentina</option> <option value="12">Armenia</option> <option value="13">Aruba</option> <option value="14">Australia</option> <option value="15">Austria</option> <option value="16">Azerbaijan</option> <option value="17">Bahamas</option> <option value="18">Bahrain</option> <option value="19">Bangladesh</option> <option value="20">Barbados</option> <option value="21">Belarus</option> <option value="22">Belgium</option> <option value="23">Belize</option> <option value="24">Benin</option> <option value="25">Bermuda</option> <option value="26">Bhutan</option> <option value="27">Bolivia (Plurinational State of)</option> <option value="248">Bonaire, Sint Eustatius and Saba</option> <option value="28">Bosnia and Herzegovina</option> <option value="29">Botswana</option> <option value="30">Bouvet Island</option> <option value="31">Brazil</option> <option value="32">British Indian Ocean Territory</option> <option value="33">Brunei Darussalam</option> <option value="34">Bulgaria</option> <option value="35">Burkina Faso</option> <option value="36">Burundi</option> <option value="39">Cabo Verde</option> <option value="37">Cambodia</option> <option value="38">Cameroon</option> <option value="40">Cayman Islands</option> <option value="41">Central African Republic</option> <option value="42">Chad</option> <option value="43">Chile</option> <option value="44">China</option> <option value="45">Christmas Island</option> <option value="46">Cocos (Keeling) Islands</option> <option value="47">Colombia</option> <option value="48">Comoros</option> <option value="49">Congo</option> <option value="238">Congo (the Democratic Republic of the)</option> <option value="50">Cook Islands</option> <option value="51">Costa Rica</option> <option value="106">Côte d'Ivoire</option> <option value="52">Croatia</option> <option value="53">Cuba</option> <option value="249">Curaçao</option> <option value="54">Cyprus</option> <option value="55">Czechia</option> <option value="56">Denmark</option> <option value="57">Djibouti</option> <option value="58">Dominica</option> <option value="59">Dominican Republic</option> <option value="61">Ecuador</option> <option value="62">Egypt</option> <option value="63">El Salvador</option> <option value="64">Equatorial Guinea</option> <option value="65">Eritrea</option> <option value="66">Estonia</option> <option value="67">Ethiopia</option> <option value="68">Falkland Islands [Malvinas]</option> <option value="69">Faroe Islands</option> <option value="70">Fiji</option> <option value="71">Finland</option> <option value="73">France</option> <option value="75">French Guiana</option> <option value="171">French Polynesia</option> <option value="76">French Southern Territories</option> <option value="77">Gabon</option> <option value="78">Gambia</option> <option value="79">Georgia</option> <option value="80">Germany</option> <option value="81">Ghana</option> <option value="82">Gibraltar</option> <option value="84">Greece</option> <option value="85">Greenland</option> <option value="86">Grenada</option> <option value="87">Guadeloupe</option> <option value="88">Guam</option> <option value="89">Guatemala</option> <option value="250">Guernsey</option> <option value="90">Guinea</option> <option value="91">Guinea-Bissau</option> <option value="92">Guyana</option> <option value="93">Haiti</option> <option value="94">Heard Island and McDonald Islands</option> <option value="229">Holy See</option> <option value="95">Honduras</option> <option value="96">Hong Kong</option> <option value="97">Hungary</option> <option value="98">Iceland</option> <option value="99">India</option> <option value="100">Indonesia</option> <option value="101">Iran (Islamic Republic of)</option> <option value="102">Iraq</option> <option value="103">Ireland</option> <option value="251">Isle of Man</option> <option value="104">Israel</option> <option value="105">Italy</option> <option value="107">Jamaica</option> <option value="108">Japan</option> <option value="252">Jersey</option> <option value="109">Jordan</option> <option value="110">Kazakhstan</option> <option value="111">Kenya</option> <option value="112">Kiribati</option> <option value="158">Korea (the Democratic People's Republic of)</option> <option value="198">Korea (the Republic of)</option> <option value="113">Kuwait</option> <option value="114">Kyrgyzstan</option> <option value="115">Lao People's Democratic Republic</option> <option value="116">Latvia</option> <option value="117">Lebanon</option> <option value="118">Lesotho</option> <option value="119">Liberia</option> <option value="120">Libya</option> <option value="121">Liechtenstein</option> <option value="122">Lithuania</option> <option value="123">Luxembourg</option> <option value="124">Macao</option> <option value="125">Macedonia (the former Yugoslav Republic of)</option> <option value="126">Madagascar</option> <option value="127">Malawi</option> <option value="128">Malaysia</option> <option value="129">Maldives</option> <option value="130">Mali</option> <option value="131">Malta</option> <option value="132">Marshall Islands</option> <option value="133">Martinique</option> <option value="134">Mauritania</option> <option value="135">Mauritius</option> <option value="136">Mayotte</option> <option value="137">Mexico</option> <option value="138">Micronesia (Federated States of)</option> <option value="139">Moldova (the Republic of)</option> <option value="140">Monaco</option> <option value="141">Mongolia</option> <option value="253">Montenegro</option> <option value="142">Montserrat</option> <option value="143">Morocco</option> <option value="144">Mozambique</option> <option value="145">Myanmar</option> <option value="146">Namibia</option> <option value="147">Nauru</option> <option value="148">Nepal</option> <option value="149">Netherlands</option> <option value="151">New Caledonia</option> <option value="152">New Zealand</option> <option value="153">Nicaragua</option> <option value="154">Niger</option> <option value="155">Nigeria</option> <option value="156">Niue</option> <option value="157">Norfolk Island</option> <option value="159">Northern Mariana Islands</option> <option value="160">Norway</option> <option value="161">Oman</option> <option value="162">Pakistan</option> <option value="163">Palau</option> <option value="246">Palestine, State of</option> <option value="164">Panama</option> <option value="165">Papua New Guinea</option> <option value="166">Paraguay</option> <option value="167">Peru</option> <option value="168">Philippines</option> <option value="169">Pitcairn</option> <option value="170">Poland</option> <option value="172">Portugal</option> <option value="173">Puerto Rico</option> <option value="174">Qatar</option> <option value="175">Réunion</option> <option value="176">Romania</option> <option value="177">Russian Federation</option> <option value="178">Rwanda</option> <option value="254">Saint Barthélemy</option> <option value="180">Saint Helena, Ascension and Tristan da Cunha</option> <option value="181">Saint Kitts and Nevis</option> <option value="182">Saint Lucia</option> <option value="255">Saint Martin (French part)</option> <option value="183">Saint Pierre and Miquelon</option> <option value="185">Saint Vincent and the Grenadines</option> <option value="186">Samoa</option> <option value="187">San Marino</option> <option value="184">Sao Tome and Principe</option> <option value="188">Saudi Arabia</option> <option value="189">Senegal</option> <option value="256">Serbia</option> <option value="190">Seychelles</option> <option value="191">Sierra Leone</option> <option value="192">Singapore</option> <option value="245">Sint Maarten (Dutch part)</option> <option value="193">Slovakia</option> <option value="194">Slovenia</option> <option value="195">Solomon Islands</option> <option value="196">Somalia</option> <option value="197">South Africa</option> <option value="179">South Georgia and the South Sandwich Islands</option> <option value="243">South Sudan</option> <option value="199">Spain</option> <option value="200">Sri Lanka</option> <option value="201">Sudan</option> <option value="202">Suriname</option> <option value="203">Svalbard and Jan Mayen</option> <option value="204">Swaziland</option> <option value="205">Sweden</option> <option value="206">Switzerland</option> <option value="207">Syrian Arab Republic</option> <option value="209">Taiwan (Province of China)</option> <option value="208">Tajikistan</option> <option value="210">Tanzania, United Republic of</option> <option value="211">Thailand</option> <option value="60">Timor-Leste</option> <option value="212">Togo</option> <option value="213">Tokelau</option> <option value="214">Tonga</option> <option value="215">Trinidad and Tobago</option> <option value="216">Tunisia</option> <option value="217">Turkey</option> <option value="218">Turkmenistan</option> <option value="219">Turks and Caicos Islands</option> <option value="220">Tuvalu</option> <option value="221">Uganda</option> <option value="222">Ukraine</option> <option value="223">United Arab Emirates</option> <option value="83">United Kingdom of Great Britain and Northern Ireland</option> <option value="226">United States Minor Outlying Islands</option> <option value="225">Uruguay</option> <option value="227">Uzbekistan</option> <option value="228">Vanuatu</option> <option value="230">Venezuela (Bolivarian Republic of)</option> <option value="231">Viet Nam</option> <option value="232">Virgin Islands (British)</option> <option value="233">Virgin Islands (U.S.)</option> <option value="234">Wallis and Futuna</option> <option value="235">Western Sahara*</option> <option value="236">Yemen</option> <option value="239">Zambia</option> <option value="240">Zimbabwe</option> </select> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'account.address.country'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['account.address.country']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> </body> <!-- Button --> <div class="col-md-12 neonfront_element"> <div class="row g-2" v-show="currentPage===2"> <div class="col"> <button type="button" class="btn neonfront-btn-primary btn-lg" @click="nextPage"> {{forwardButtons[currentPage-1]}} </button> </div> </div> </div> <!-- Google reCAPTCHA Policy --> <div v-if="currentPage===3" class="col-md-12 neonfront_element"> <div class="re-captcha-policy-border"> <i class="fal fa-lock"></i> Secure Payment </div> <div class="re-captcha-policy"> This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply. </div> </div> </div> </div> <div class="col-12" id="neon-page-3" v-show="currentPage===3"> <div class="row g-3 neonfront-form"> <div class="col-md-12 neonfront_element mt-0"> <div id="globalError" class="row mt-3 neonfront_form_failed_container" v-show="globalError!=''"> <div class="col-2"> <span class="fa fa-exclamation-circle mt-1" style="font-size: 2.25rem;"></span> </div> <div class="col-10"> <h5 class="fs-6 mb-1" v-text="globalErrorTitle"></h5> <p class="mb-0" style="font-size: 0.875rem;" v-text="globalError"></p> </div> </div> </div> <!-- Fields --> <body> <div class="neonfront_element col-md-12"> <!-- Section --> <!-- Label --> <!-- Input --> <!-- Double-The-Donation --> <!-- password update start --> <!-- password update end --> <!-- Date/Time --> <!-- Dropdown --> <!-- CheckBox Single --> <!-- Checkbox --> <!-- Radio --> <!-- Textarea --> <!-- Phone --> <!-- Line1 --> <!-- DOB --> <!-- Payment --> <!DOCTYPE html> <html lang="en"> <body> <div v-if="showPayment" v-show="!withoutPayment"> <div class="row mx-0 neonfront_payment_tab"> <input type="hidden" name="payment.type" v-model="paymentType"> <div class="col" :class="{'active':paymentType==='CARD'}" @click="changePaymentType('CARD')">Card</div> </div> <div class="row g-3 mt-0" v-show="paymentType==='CARD'"> <div v-show="donorCoveredFeeEnabled" class="neonfront_element col-md-12" v-if="cardDonorCoveredFeeDesc!=null&&!googleAndApplePayIncompatible"> <div class="form-check"> <input class="form-check-input neonfront_checkbox" type="checkbox" v-model="cardDonorCoveredFeeOpt" value="true" name="payment.card.donorCoveredFeeOpt" id="payment.card.donorCoveredFeeOpt"> <label class="form-check-label neonfront_checkbox_label" for="payment.card.donorCoveredFeeOpt">{{cardDonorCoveredFeeDesc}}</label> </div> </div> <div class="neonfront_element col-md-12" v-show="!googleAndApplePayIncompatible"> <input type="hidden" name="payment.card.payWithApplePay" v-model="payWithApplePay"> <input type="hidden" name="payment.card.payWithGooglePay" v-model="payWithGooglePay"> <div id="payment-apple-container" v-if="!applepayIncompatible" v-show="!submitting"></div> <div id="payment-google-container" v-if="!googlepayIncompatible" v-show="!submitting"></div> <div v-show="submitting"> <button class="btn neonfront-btn-primary btn-lg" type="button" disabled> Processing <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </button> </div> </div> <div class="neonfront_element col-md-12" v-show="!googleAndApplePayIncompatible"> <div class="line-text-splitter"> <div class="line"></div> <div class="text">or enter your card details below</div> </div> </div> <div class="neonfront_element col-md-12" v-show="!showCardFields"> <button type="button" class="btn neonfront-btn-primary btn-lg phone-card-button" @click="showCardFields=true" :disabled="submitting" style="padding: 0 0 !important;"> <i class="fas fa-credit-card"></i> <span>Pay With Card</span> </button> </div> <div class="neonfront_element col-md-12" v-show="showCardFields"> <label for="payment.card.holderFirstName" class="form-label">Cardholder First Name <span>*</span></label> <input id="payment.card.holderFirstName" name="payment.card.holderFirstName" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.holderFirstName')}" aria-describedby="payment.card.holderFirstName_feedback" v-model="formData.payment.card.holderFirstName" @blur="onFieldBlur"> <div id="payment.card.holderFirstName_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.holderFirstName']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12" v-show="showCardFields"> <label for="payment.card.holderLastName" class="form-label">Cardholder Last Name <span>*</span></label> <input id="payment.card.holderLastName" name="payment.card.holderLastName" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.holderLastName')}" aria-describedby="payment.card.holderLastName_feedback" v-model="formData.payment.card.holderLastName" @blur="onFieldBlur"> <div id="payment.card.holderLastName_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.holderLastName']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12" v-show="showCardFields"> <label for="payment.card.holderEmail" class="form-label">Cardholder Email </label> <input id="payment.card.holderEmail" name="payment.card.holderEmail" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.holderEmail')}" aria-describedby="payment.card.holderEmail_feedback" v-model="formData.payment.card.holderEmail" @blur="onFieldBlur"> <div id="payment.card.holderEmail_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.holderEmail']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="col-md-12" v-show="showCardFields"> <input type="hidden" name="payment.card.token" id="payment.card.token"> <label class="form-label" for="payment-card-container">Card *</label> <div id="payment-card-container" class="form-control" :class="{'is-invalid': checkFieldInvalid('payment-card-container')}"></div> <div id="card-swipe-container"> <a id="swipe">Swipe</a> </div> <div class="invalid-feedback" v-for="item in invalidField['payment-card-container']"><i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> <div class="neonfront_element col-md-12" v-show="showCardFields && showSameAsBillingAddress"> <div class="form-check"> <input class="form-check-input neonfront_checkbox" type="checkbox" v-model="sameAsBillingAddress" value="true" id="sameAsBillingAddress" checked> <label class="form-check-label neonfront_checkbox_label" for="sameAsBillingAddress">Billing address is the same as mailing address</label> </div> </div> <div class="neonfront_element col-md-12" v-show="showCardFields && !sameAsBillingAddress"> <label for="payment.card.address.line1.line1" class="form-label">Address Line 1 </label> <input id="payment.card.address.line1.line1" name="payment.card.address.line1.line1" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.address.line1.line1')}" aria-describedby="payment.card.address.line1.line1_feedback" v-model="formData.payment.card.address.line1.line1" @blur="onFieldBlur"> <div id="payment.card.address.line1.line1_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.address.line1.line1']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-12" v-show="showCardFields && !sameAsBillingAddress"> <label for="payment.card.address.line2" class="form-label">Address Line 2 </label> <input id="payment.card.address.line2" name="payment.card.address.line2" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.address.line2')}" aria-describedby="payment.card.address.line2_feedback" v-model="formData.payment.card.address.line2" @blur="onFieldBlur"> <div id="payment.card.address.line2_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.address.line2']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6" v-show="showCardFields && !sameAsBillingAddress"> <label for="payment.card.address.city" class="form-label">City </label> <input id="payment.card.address.city" name="payment.card.address.city" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.address.city')}" aria-describedby="payment.card.address.city_feedback" v-model="formData.payment.card.address.city" @blur="onFieldBlur"> <div id="payment.card.address.city_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.address.city']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6" v-show="showCardFields && !sameAsBillingAddress"> <label for="payment.card.address.stateOrProvince" class="form-label">State/Province </label> <select id="payment.card.address.stateOrProvince" name="payment.card.address.stateOrProvince" class="form-select neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.address.stateOrProvince')}" aria-describedby="payment.card.address.stateOrProvince_feedback" v-model="formData.payment.card.address.stateOrProvince" @change="onFieldBlur"> <option></option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> <option value="CO">Colorado</option> <option value="CT">Connecticut</option> <option value="DE">Delaware</option> <option value="DC">District of Columbia</option> <option value="FL">Florida</option> <option value="GA">Georgia</option> <option value="HI">Hawaii</option> <option value="ID">Idaho</option> <option value="IL">Illinois</option> <option value="IN">Indiana</option> <option value="IA">Iowa</option> <option value="KS">Kansas</option> <option value="KY">Kentucky</option> <option value="LA">Louisiana</option> <option value="ME">Maine</option> <option value="MD">Maryland</option> <option value="MA">Massachusetts</option> <option value="MI">Michigan</option> <option value="MN">Minnesota</option> <option value="MS">Mississippi</option> <option value="MO">Missouri</option> <option value="MT">Montana</option> <option value="NE">Nebraska</option> <option value="NV">Nevada</option> <option value="NH">New Hampshire</option> <option value="NJ">New Jersey</option> <option value="NM">New Mexico</option> <option value="NY">New York</option> <option value="NC">North Carolina</option> <option value="ND">North Dakota</option> <option value="OH">Ohio</option> <option value="OK">Oklahoma</option> <option value="OR">Oregon</option> <option value="PA">Pennsylvania</option> <option value="RI">Rhode Island</option> <option value="SC">South Carolina</option> <option value="SD">South Dakota</option> <option value="TN">Tennessee</option> <option value="TX">Texas</option> <option value="UT">Utah</option> <option value="VT">Vermont</option> <option value="VA">Virginia</option> <option value="WA">Washington</option> <option value="WV">West Virginia</option> <option value="WI">Wisconsin</option> <option value="WY">Wyoming</option> <option value="AS">American Samoa</option> <option value="FM">Federated States of Micronesia</option> <option value="GU">Guam</option> <option value="MH">Marshall Islands</option> <option value="MP">Northern Mariana Islands</option> <option value="PW">Palau</option> <option value="PR">Puerto Rico</option> <option value="UM">U.S. Minor Outlying Islands</option> <option value="VI">Virgin Islands</option> <option value="AA">Armed Forces Americas</option> <option value="AE">Armed Forces Europe, the Middle East, an</option> <option value="AP">Armed Forces Pacific</option> <option value="AB">Alberta</option> <option value="BC">British Columbia</option> <option value="MB">Manitoba</option> <option value="NB">New Brunswick</option> <option value="NL">Newfoundland and Labrador</option> <option value="NS">Nova Scotia</option> <option value="NT">Northwest Territories</option> <option value="NU">Nunavut Territory</option> <option value="ON">Ontario</option> <option value="PE">Prince Edward Island</option> <option value="QC">Quebec</option> <option value="SK">Saskatchewan</option> <option value="YT">Yukon Territory</option> </select> <div id="payment.card.address.stateOrProvince_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.address.stateOrProvince']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6" v-show="showCardFields && !sameAsBillingAddress"> <label for="payment.card.address.zipCode" class="form-label">Zip <span>*</span></label> <input id="payment.card.address.zipCode" name="payment.card.address.zipCode" type="text" class="form-control neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.address.zipCode')}" aria-describedby="payment.card.address.zipCode_feedback" v-model="formData.payment.card.address.zipCode" @blur="onFieldBlur"> <div id="payment.card.address.zipCode_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.address.zipCode']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div class="neonfront_element col-md-6" v-show="showCardFields && !sameAsBillingAddress"> <label for="payment.card.address.country" class="form-label">Country </label> <select id="payment.card.address.country" name="payment.card.address.country" class="form-select neonfront_input" :class="{'is-invalid': checkFieldInvalid('payment.card.address.country')}" aria-describedby="payment.card.address.country_feedback" v-model="formData.payment.card.address.country" @change="onFieldBlur"> <option></option> <option value="1">United States of America</option> <option value="2">Canada</option> <option value="3">Afghanistan</option> <option value="247">Åland Islands</option> <option value="4">Albania</option> <option value="5">Algeria</option> <option value="6">American Samoa</option> <option value="7">Andorra</option> <option value="8">Angola</option> <option value="242">Anguilla</option> <option value="9">Antarctica</option> <option value="10">Antigua and Barbuda</option> <option value="11">Argentina</option> <option value="12">Armenia</option> <option value="13">Aruba</option> <option value="14">Australia</option> <option value="15">Austria</option> <option value="16">Azerbaijan</option> <option value="17">Bahamas</option> <option value="18">Bahrain</option> <option value="19">Bangladesh</option> <option value="20">Barbados</option> <option value="21">Belarus</option> <option value="22">Belgium</option> <option value="23">Belize</option> <option value="24">Benin</option> <option value="25">Bermuda</option> <option value="26">Bhutan</option> <option value="27">Bolivia (Plurinational State of)</option> <option value="248">Bonaire, Sint Eustatius and Saba</option> <option value="28">Bosnia and Herzegovina</option> <option value="29">Botswana</option> <option value="30">Bouvet Island</option> <option value="31">Brazil</option> <option value="32">British Indian Ocean Territory</option> <option value="33">Brunei Darussalam</option> <option value="34">Bulgaria</option> <option value="35">Burkina Faso</option> <option value="36">Burundi</option> <option value="39">Cabo Verde</option> <option value="37">Cambodia</option> <option value="38">Cameroon</option> <option value="40">Cayman Islands</option> <option value="41">Central African Republic</option> <option value="42">Chad</option> <option value="43">Chile</option> <option value="44">China</option> <option value="45">Christmas Island</option> <option value="46">Cocos (Keeling) Islands</option> <option value="47">Colombia</option> <option value="48">Comoros</option> <option value="49">Congo</option> <option value="238">Congo (the Democratic Republic of the)</option> <option value="50">Cook Islands</option> <option value="51">Costa Rica</option> <option value="106">Côte d'Ivoire</option> <option value="52">Croatia</option> <option value="53">Cuba</option> <option value="249">Curaçao</option> <option value="54">Cyprus</option> <option value="55">Czechia</option> <option value="56">Denmark</option> <option value="57">Djibouti</option> <option value="58">Dominica</option> <option value="59">Dominican Republic</option> <option value="61">Ecuador</option> <option value="62">Egypt</option> <option value="63">El Salvador</option> <option value="64">Equatorial Guinea</option> <option value="65">Eritrea</option> <option value="66">Estonia</option> <option value="67">Ethiopia</option> <option value="68">Falkland Islands [Malvinas]</option> <option value="69">Faroe Islands</option> <option value="70">Fiji</option> <option value="71">Finland</option> <option value="73">France</option> <option value="75">French Guiana</option> <option value="171">French Polynesia</option> <option value="76">French Southern Territories</option> <option value="77">Gabon</option> <option value="78">Gambia</option> <option value="79">Georgia</option> <option value="80">Germany</option> <option value="81">Ghana</option> <option value="82">Gibraltar</option> <option value="84">Greece</option> <option value="85">Greenland</option> <option value="86">Grenada</option> <option value="87">Guadeloupe</option> <option value="88">Guam</option> <option value="89">Guatemala</option> <option value="250">Guernsey</option> <option value="90">Guinea</option> <option value="91">Guinea-Bissau</option> <option value="92">Guyana</option> <option value="93">Haiti</option> <option value="94">Heard Island and McDonald Islands</option> <option value="229">Holy See</option> <option value="95">Honduras</option> <option value="96">Hong Kong</option> <option value="97">Hungary</option> <option value="98">Iceland</option> <option value="99">India</option> <option value="100">Indonesia</option> <option value="101">Iran (Islamic Republic of)</option> <option value="102">Iraq</option> <option value="103">Ireland</option> <option value="251">Isle of Man</option> <option value="104">Israel</option> <option value="105">Italy</option> <option value="107">Jamaica</option> <option value="108">Japan</option> <option value="252">Jersey</option> <option value="109">Jordan</option> <option value="110">Kazakhstan</option> <option value="111">Kenya</option> <option value="112">Kiribati</option> <option value="158">Korea (the Democratic People's Republic of)</option> <option value="198">Korea (the Republic of)</option> <option value="113">Kuwait</option> <option value="114">Kyrgyzstan</option> <option value="115">Lao People's Democratic Republic</option> <option value="116">Latvia</option> <option value="117">Lebanon</option> <option value="118">Lesotho</option> <option value="119">Liberia</option> <option value="120">Libya</option> <option value="121">Liechtenstein</option> <option value="122">Lithuania</option> <option value="123">Luxembourg</option> <option value="124">Macao</option> <option value="125">Macedonia (the former Yugoslav Republic of)</option> <option value="126">Madagascar</option> <option value="127">Malawi</option> <option value="128">Malaysia</option> <option value="129">Maldives</option> <option value="130">Mali</option> <option value="131">Malta</option> <option value="132">Marshall Islands</option> <option value="133">Martinique</option> <option value="134">Mauritania</option> <option value="135">Mauritius</option> <option value="136">Mayotte</option> <option value="137">Mexico</option> <option value="138">Micronesia (Federated States of)</option> <option value="139">Moldova (the Republic of)</option> <option value="140">Monaco</option> <option value="141">Mongolia</option> <option value="253">Montenegro</option> <option value="142">Montserrat</option> <option value="143">Morocco</option> <option value="144">Mozambique</option> <option value="145">Myanmar</option> <option value="146">Namibia</option> <option value="147">Nauru</option> <option value="148">Nepal</option> <option value="149">Netherlands</option> <option value="151">New Caledonia</option> <option value="152">New Zealand</option> <option value="153">Nicaragua</option> <option value="154">Niger</option> <option value="155">Nigeria</option> <option value="156">Niue</option> <option value="157">Norfolk Island</option> <option value="159">Northern Mariana Islands</option> <option value="160">Norway</option> <option value="161">Oman</option> <option value="162">Pakistan</option> <option value="163">Palau</option> <option value="246">Palestine, State of</option> <option value="164">Panama</option> <option value="165">Papua New Guinea</option> <option value="166">Paraguay</option> <option value="167">Peru</option> <option value="168">Philippines</option> <option value="169">Pitcairn</option> <option value="170">Poland</option> <option value="172">Portugal</option> <option value="173">Puerto Rico</option> <option value="174">Qatar</option> <option value="175">Réunion</option> <option value="176">Romania</option> <option value="177">Russian Federation</option> <option value="178">Rwanda</option> <option value="254">Saint Barthélemy</option> <option value="180">Saint Helena, Ascension and Tristan da Cunha</option> <option value="181">Saint Kitts and Nevis</option> <option value="182">Saint Lucia</option> <option value="255">Saint Martin (French part)</option> <option value="183">Saint Pierre and Miquelon</option> <option value="185">Saint Vincent and the Grenadines</option> <option value="186">Samoa</option> <option value="187">San Marino</option> <option value="184">Sao Tome and Principe</option> <option value="188">Saudi Arabia</option> <option value="189">Senegal</option> <option value="256">Serbia</option> <option value="190">Seychelles</option> <option value="191">Sierra Leone</option> <option value="192">Singapore</option> <option value="245">Sint Maarten (Dutch part)</option> <option value="193">Slovakia</option> <option value="194">Slovenia</option> <option value="195">Solomon Islands</option> <option value="196">Somalia</option> <option value="197">South Africa</option> <option value="179">South Georgia and the South Sandwich Islands</option> <option value="243">South Sudan</option> <option value="199">Spain</option> <option value="200">Sri Lanka</option> <option value="201">Sudan</option> <option value="202">Suriname</option> <option value="203">Svalbard and Jan Mayen</option> <option value="204">Swaziland</option> <option value="205">Sweden</option> <option value="206">Switzerland</option> <option value="207">Syrian Arab Republic</option> <option value="209">Taiwan (Province of China)</option> <option value="208">Tajikistan</option> <option value="210">Tanzania, United Republic of</option> <option value="211">Thailand</option> <option value="60">Timor-Leste</option> <option value="212">Togo</option> <option value="213">Tokelau</option> <option value="214">Tonga</option> <option value="215">Trinidad and Tobago</option> <option value="216">Tunisia</option> <option value="217">Turkey</option> <option value="218">Turkmenistan</option> <option value="219">Turks and Caicos Islands</option> <option value="220">Tuvalu</option> <option value="221">Uganda</option> <option value="222">Ukraine</option> <option value="223">United Arab Emirates</option> <option value="83">United Kingdom of Great Britain and Northern Ireland</option> <option value="226">United States Minor Outlying Islands</option> <option value="225">Uruguay</option> <option value="227">Uzbekistan</option> <option value="228">Vanuatu</option> <option value="230">Venezuela (Bolivarian Republic of)</option> <option value="231">Viet Nam</option> <option value="232">Virgin Islands (British)</option> <option value="233">Virgin Islands (U.S.)</option> <option value="234">Wallis and Futuna</option> <option value="235">Western Sahara*</option> <option value="236">Yemen</option> <option value="239">Zambia</option> <option value="240">Zimbabwe</option> </select> <div id="payment.card.address.country_feedback" class="invalid-feedback"> <div v-for="item in invalidField['payment.card.address.country']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> <div v-show="donorCoveredFeeEnabled" class="neonfront_element col-md-12" v-if="cardDonorCoveredFeeDesc!=null && (!isNeonPay || googleAndApplePayIncompatible)"> <div class="form-check"> <input class="form-check-input neonfront_checkbox" type="checkbox" v-model="cardDonorCoveredFeeOpt" value="true" name="payment.card.donorCoveredFeeOpt" id="payment.card.donorCoveredFeeOpt"> <label class="form-check-label neonfront_checkbox_label" for="payment.card.donorCoveredFeeOpt">{{cardDonorCoveredFeeDesc}}</label> </div> </div> </div> </div> <div v-else v-show="!withoutPayment"> {{ccfpInfo.notInGoodMessage || ''}} </div> </body> </html> <!-- Start: Donation Frequency & Amount is linked --> <!-- Donation Frequency --> <!-- Donation Amount --> <!-- End: Donation Frequency & Amount --> <!-- Tribute --> <!-- Description --> <!-- Invalid --> <div id="'payment'+'_feedback'" class="invalid-feedback"> <div v-for="item in invalidField['payment']"> <i class="fa fa-exclamation-triangle"></i>{{item}} </div> </div> </div> </body> <!-- Button --> <div class="col-md-12 neonfront_element"> <div v-show="currentPage===3" class="row gx-1 gy-2" v-if="showSummary"> <!-- Multi Page --> <div v-if="isMultiPage" :class="[submitting?'col':'col-auto']" v-show="paymentType!=='PAYPAL'&&paymentType!=='PAY_LATER'"> <!-- Placeholder button --> <button v-show="!showSubmitBtn && !submitting" class="btn btn-link" style="color: #fff;">{{submitText}}</button> <button v-show="showSubmitBtn" type="button" class="btn neonfront-btn-primary btn-lg" @click="submitNeonForm" v-bind:disabled="disableSubmitButton" name="submitBtn">{{submitText}}</button> <button class="btn neonfront-btn-primary btn-lg" type="button" disabled v-show="submitting"> Processing <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </button> </div> <!-- Single Page --> <div v-if="!isMultiPage" class="col-auto" v-show="paymentType!=='PAYPAL'&&paymentType!=='PAY_LATER'" style="margin-right: 14px;"> <button type="button" class="btn neonfront-btn-primary btn-lg" @click="submitNeonForm" v-show="showSubmitBtn" v-bind:disabled="disableSubmitButton" name="submitBtn">{{submitText}} </button> <button class="btn neonfront-btn-primary btn-lg" type="button" disabled v-show="submitting"> Processing <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </button> </div> <div v-show="payPal && paymentType==='PAYPAL'" class="col"> <button type="button" class="btn neonfront-btn-primary neonfront-btn-paypal btn-lg" @click="submitNeonForm" v-show="!submitting" v-bind:disabled="previewMode"></button> <button class="btn neonfront-btn-primary btn-lg" type="button" disabled v-show="submitting"> Processing <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </button> </div> <div v-show="paymentType==='PAY_LATER'" class="col"> <button type="button" class="btn neonfront-btn-primary btn-lg" @click="submitNeonForm" v-show="!submitting" v-bind:disabled="previewMode">Pay Later </button> <button class="btn neonfront-btn-primary btn-lg" type="button" disabled v-show="submitting"> Processing <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> </button> </div> <div v-show="paymentType!=='PAYPAL' && paymentType!=='PAY_LATER'" class="col" v-bind:class="{'ms-02': amountBrClass()}"> <div class="neonfront-recurring-amount neonfront-recurring-amount-single"> <label class="form-label mb-0">Amount:</label> <div class="amount-content"> <span class="amount">{{donationAmountStr}}<span v-if="showRecurringAmount">/</span><span v-if="showRecurringAmount" class="fs-625">{{recurringUnitText}}</span><span class="form-label fs-625" style="font-size: 0.625rem !important;"> USD</span></span> </div> <div v-show="paymentType==='CARD'&&cardDonorCoveredFeeOpt" class="fee-content">{{cardTotalAmountIncludeFeeList}}</div> </div> </div> </div> </div> <!-- Google reCAPTCHA Policy --> <div v-if="currentPage===3" class="col-md-12 neonfront_element"> <div class="re-captcha-policy-border"> <i class="fal fa-lock"></i> Secure Payment </div> <div class="re-captcha-policy"> This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply. </div> </div> </div> </div> </form> <form id="paypal_xclick" name="_xclick" :action="paypal.paypalUrl" method="post" class="d-none"> <input v-for="(value,name) in paypal.items" type="hidden" :name="name" :value="value"> </form> </div> <div class="neonfront_content d-sm-block"> <!DOCTYPE html> <html lang="en"> <div class="neonfront_content_campaign"> </div> </html> </div> </div> </html> </div> </div> <!DOCTYPE html> <html> <body> <div class="container-fluid neonfront_footer" id="footer-content"> <div class="row neonfront_footer_lv_info"> <div class="col-md-6" style="padding-left: 30px;"><p><strong>Quick Links</strong></p> <p><a href="https://kingdomnil.com">Kingdom Home Page</a></p> <p><a href="https://kingdomnil.com/collections/donate-today">Make a Contribution</a></p> <p><a href="https://twitter.com/kingdomnil" target="_blank" rel="noopener">Follow us on Twitter</a></p> <p><a href="https://www.instagram.com/kingdomnil/">Follow us on Instagram</a></p> <p> </p> <p> </p> <p> </p></div> <div class="col-md-6" style="padding-right: 30px;"> <div class="float-md-end float-none"><p><a title="Become a member today!" href="https://kingdomnil.com/collections/donate-today">Donate Today!</a></p> <p>Our mission is to enrich, enhance, and empower the lives of UCF Student-Athletes.</p> <p>The Kingdom NIL, LLC is the Official NIL of UCF Athletics. Please note that contributions to The Kingdom NIL are not considered tax-deductible gifts to UCF Athletics or the UCF Foundation. Please Contact info@KingdomNIL.com for potential tax deductible donations.</p></div> </div> </div> <div class="neonfront_footer_lv_media text-center text-dark"> <a href="https://instagram.com/kingdomnil" class="text-reset social-link-icon"> <img width="24" height="24" v-bind:src="getSocialMediaIcon('Instagram', 'D')"> </a><a href="https://twitter.com/kingdomnil" class="text-reset social-link-icon"> <img width="24" height="24" v-bind:src="getSocialMediaIcon('Twitter', 'D')"> </a> </div> <div class="footer-root"> <div class="footer-root-left"><a class="footer-root-link" href="https://neonone.com/privacypolicy/" target="_blank">Privacy Statement</a> | <a class="footer-root-link" href="https://neonone.com/productterms/" target="_blank">Terms of Service</a></div> <div class="footer-root-right"> <a href="https://neonone.com/" target="_blank"> <div class="footer-root-right-header"><img width="60" height="20" src="/nx/portal-static/img/logo-variations.svg"/></div> <div class="footer-root-right-footer"><img width="60" height="20" src="/nx/portal-static/img/merchant-copy.svg"/></div> </a> </div> </div> </div> </body> </html> </div> <!DOCTYPE html> <html lang="en"> <body> <div class="modal fade" id="encourageLoginModal" tabindex="-1" aria-labelledby="encourageLoginModalLabel" aria-hidden="true"> <div id="login-toast-container" aria-live="polite" aria-atomic="true" class="position-relative"> <div class="toast-container position-absolute top-50 end-0 p-3 login_toast"> <div id="recover-success-alert" class="toast d-flex align-items-center text-white bg-info border-0 w-100" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-body"> Your email has been submitted. If that email address exists in our system, you should receive a recovery information email shortly. If you do not receive an email, please check your spam folder. If you still don't receive an email, then there is no account associated with the submitted email address. </div> <button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button> </div> </div> </div> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <button v-if="!requireLogin" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="login_header" v-if="encourageLoginConfig.header" v-html="encourageLoginConfig.header"></div> <fieldset class="neon_en_field_set"> <legend class="neon_en_legend">Log in to your existing account</legend> <div class="row justify-content-center"> <div class="login_errors col-9" v-if="loginHasError" v-for="errMsg in loginErrorMessages">{{errMsg}}</div> <div class="mb-3 col-9"> <label for="loginName" class="col-form-label">Login Name:</label> <input type="text" class="form-control" id="loginName" name="loginName" /> </div> <div class="mb-3 col-9"> <label for="loginPassword" class="col-form-label">Password:</label> <input type="password" class="form-control" id="loginPassword" name="loginPassword" autocomplete="new-password" /> </div> <div class="mb-3 d-grid gap-2 col-9 mx-auto"> <button class="btn btn-primary" type="button" @click="doLogin">Log In</button> </div> <div v-if="encourageLoginConfig.facebookLogin || encourageLoginConfig.twitterLogin" class="d-grid gap-2 col-9 mx-auto"> <div class="third_part_login_label">Or sign in with</div> <div class="third_part_login_type"> <span class="third_part_login_item" @click="openAuthWin('facebook')" v-if="encourageLoginConfig.facebookLogin" style="margin-right:2px"> <img width="40" src="/nx/static/img/icons/social-media/Facebook.png"> </span> <span class="third_part_login_item" @click="openAuthWin('twitter')" v-if="encourageLoginConfig.twitterLogin" style="margin-left:2px"> <img width="40" src="/nx/static/img/icons/social-media/Twitter.png"> </span> </div> </div> </div> </fieldset> <div> <div class="recover_account_label">Forgot your password?</div> <div class="recover_account_label" style="opacity:0.8;">Enter the e-mail address associated with your account and we'll send you a link to recover your login information.</div> <div class="mb-3 col-9"> <label for="forgot_email" class="col-form-label">Email:</label> <input type="text" class="form-control" id="forgot_email"> <div v-if="recoverEmailInValid" class="email_invalid_message">Please enter a valid email address</div> </div> <div class="row justify-content-end" style="width:349px"> <div class="mb-3 col-7"> <button type="button" class="btn btn-outline-primary" @click="sendRecoverAccountEmail">Recover Account</button> </div> </div> </div> <div class="login_footer" v-if="encourageLoginConfig.footer" v-html="encourageLoginConfig.footer"></div> </div> </div> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <body> <!DOCTYPE html> <html lang="en"> <body> <!-- Modal --> </body> </html> <!DOCTYPE html> <html lang="en"> <body> <!-- Modal --> </body> </html> <!DOCTYPE html> <html lang="en"> <body> <!-- Modal --> </body> </html> <!DOCTYPE html> <html lang="en"> <body> <!-- Modal --> </body> </html> </body> </html> </div> <script src="/nx/portal-static/component/vue/vue-3.1.2.min.js"></script> <script src="/nx/portal-static/component/axios/axios.min.js"></script> <script src="/nx/portal-static/component/qs/qs.min.js"></script> <script src="/nx/portal-static/component/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/nx/portal-static/component/laydate/laydate.js"></script> <script src="/nx/portal-static/component/multi-select/multi-select.js"></script> <script src="/nx/portal-static/component/file-upload/file-upload.js"></script> <script src="/nx/portal-static/component/neon-img-cutter/neon-img-cutter.js"></script> <script src="/nx/portal-static/component/cropperjs/cropper.min.js"></script> <script src="/nx/portal-static/component/advanced-search/advanced-search.js"></script> <script src="/nx/portal-static/component/neon-select/neon-select.js"></script> <script src="/nx/portal-static/component/moment-js/moment-2.29.4.min.js"></script> <script src="/nx/portal-static/component/moment-js/moment-timezone.min.js"></script> <script src="/nx/portal-static/js/common.js"></script> <script src="/nx/portal-static/js/err-collect.js"></script> <!-- <th:block th:if="${churnZeroEnabled && !#strings.isEmpty(churnZeroAccountExternalId)}"> <script src="https://neonone.us1app.churnzero.net/churnzero.js"></script> <script type="application/javascript"> var ChurnZero = ChurnZero || [] ChurnZero.push(['setAppKey', '1!MFdwDlKbVUgVpSRtljcqdO9tOYWtqDKqGG7trJX5JYwtE02']) // AppKey from ChurnZero ChurnZero.push(['setContact', '', '']) </script> </th:block> --> <script type="application/javascript"> // Common JS Code </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-E5PVK7VDYC"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-E5PVK7VDYC'); </script> <script async src='https://www.googletagmanager.com/gtag/js?id=G-CZSQTZFWZP'></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-CZSQTZFWZP'); </script> <script> // I remove checkbox v-model, because FormDate doesn't collect uncheck checkbox, the related field miss, that will cause vue doesn't work correctly (Vue can't found related property) // I remove date/time v-model, because there are conflict with Laydate const formData = JSON.formAll('neonform_15') const appData = { formType: "DONATION", fieldRules: {"account.email1":[{"fieldName":"account.email1","fieldLabel":"Email","message":"Email is invalid.","extra":[],"rule":"email","preconditions":[]}],"payment.card.holderEmail":[{"fieldName":"payment.card.holderEmail","fieldLabel":"Cardholder Email","message":"Cardholder Email is invalid.","extra":[],"rule":"email","preconditions":[]}],"amount":[{"fieldName":"amount","fieldLabel":"Amount","message":"Amount is required.","extra":[],"rule":"required","preconditions":[]},{"fieldName":"amount","fieldLabel":"Amount","message":"Amount is invalid.","extra":[],"rule":"amount","preconditions":[]},{"fieldName":"amount","fieldLabel":"Amount","message":"Amount must be less than 999,999,999,999.99.","extra":["999,999,999,999.99"],"rule":"max","preconditions":[]},{"fieldName":"amount","fieldLabel":"Amount","message":"Amount must be at least $.","extra":["$",""],"rule":"min","preconditions":[{"name":"frequency","value":"donationOnce"}]}],"account.name.lastName":[{"fieldName":"account.name.lastName","fieldLabel":"Last Name","message":"Last Name is required.","extra":[],"rule":"required","preconditions":[]}],"payment.card.holderLastName":[{"fieldName":"payment.card.holderLastName","fieldLabel":"Cardholder Last Name","message":"Cardholder Last Name is required.","extra":[],"rule":"required","preconditions":[]}],"payment.card.expiration.year":[{"fieldName":"payment.card.expiration.year","fieldLabel":"Expiration (YY)","message":"Expiration (YY) is required.","extra":[],"rule":"required","preconditions":[]}],"frequency":[{"fieldName":"frequency","fieldLabel":"Donation Frequency","message":"Donation Frequency is required.","extra":[],"rule":"required","preconditions":[]}],"account.company.name":[{"fieldName":"account.company.name","fieldLabel":"Company Name","message":"Company Name is required.","extra":[],"rule":"required","preconditions":[{"name":"account.asCompany","value":"true"}]}],"payment.card.address.zipCode":[{"fieldName":"payment.card.address.zipCode","fieldLabel":"Zip","message":"Zip is required.","extra":[],"rule":"required","preconditions":[]}],"payment.card.number":[{"fieldName":"payment.card.number","fieldLabel":"Card Number","message":"Card Number is required.","extra":[],"rule":"required","preconditions":[]},{"fieldName":"payment.card.number","fieldLabel":"Card Number","message":"Your credit card number must consist of numbers and be between 12 and 19 digits.","extra":[],"rule":"creditCardNumber","preconditions":[]}],"payment.card.expiration.month":[{"fieldName":"payment.card.expiration.month","fieldLabel":"Expiration (MM)","message":"Expiration (MM) is required.","extra":[],"rule":"required","preconditions":[]}],"account.name.firstName":[{"fieldName":"account.name.firstName","fieldLabel":"First Name","message":"First Name is required.","extra":[],"rule":"required","preconditions":[]}],"payment.card.cvv":[{"fieldName":"payment.card.cvv","fieldLabel":"CVV","message":"CVV is required.","extra":[],"rule":"required","preconditions":[]}],"payment.card.holderFirstName":[{"fieldName":"payment.card.holderFirstName","fieldLabel":"Cardholder First Name","message":"Cardholder First Name is required.","extra":[],"rule":"required","preconditions":[]}]}, orgInfo: {"createdBy":null,"createdDate":null,"lastModifiedBy":null,"lastModifiedDate":null,"id":null,"orgParentId":null,"orgCode":"kingdomnil","orgName":"The Kingdom","orgLegalName":null,"address":{"createdBy":null,"createdDate":null,"lastModifiedBy":null,"lastModifiedDate":null,"id":null,"notes":null,"street1":"2544 CONNECTION PT","street2":"","street3":null,"street4":null,"city":"Oviedo","state":"FL","province":null,"zip":"32765","zipSuffix":null,"county":{"createdBy":null,"createdDate":null,"lastModifiedBy":null,"lastModifiedDate":null,"id":null,"code":null,"name":null,"stateAbbreviation":null,"stateName":null,"empty":true,"createdDateMMddyyyy":null,"lastModifiedDateMMddyyyy":null,"createdDateDisplay":null,"lastModifiedDateDisplay":null,"createdDisplay":"","lastModifiedDisplay":"","debugId":null,"new":true},"country":{"createdBy":null,"createdDate":null,"lastModifiedBy":null,"lastModifiedDate":null,"id":"1","name":null,"code":null,"dataStatus":null,"createdDateMMddyyyy":null,"lastModifiedDateMMddyyyy":null,"createdDateDisplay":null,"lastModifiedDateDisplay":null,"createdDisplay":"","lastModifiedDisplay":"","debugId":"1","new":false},"addressType":null,"phone1Number":null,"phone2Number":null,"phone3Number":null,"phone1Area":null,"countyStr":"","countryStr":"","invalidStr":"","shippingToName":null,"shippingToOrganization":null,"shippingEmail":null,"formatedStreetAddress":"2544 CONNECTION PT","formatedStreetAddressByXsl":"<div>2544 CONNECTION PT<\/div>","federalDistrict":null,"stateHouseDistrict":null,"stateSenateDistrict":null,"latitude":null,"longitude":null,"geoCodingTime":null,"tableState":null,"phone2Area":null,"phone3Area":null,"phone1Type":null,"phone2Type":null,"phone3Type":null,"faxNumber":null,"faxArea":null,"faxType":null,"primaryAddress":null,"shippingAddress":false,"defaultShippingAddress":false,"invalid":null,"invalidAddressDisplay":"","deliveryPoint":null,"noMail":null,"startDate":null,"endDate":null,"startDateMMdd":null,"endDateMMdd":null,"startDateMMddyyyy":null,"endDateMMddyyyy":null,"yearlyRepeat":null,"dataStatus":{"available":true,"name":"Active","value":1},"userId":null,"ownerId":null,"countryName":null,"ncoaDate":null,"addressTypeStr":"","updateAdd":"","noteParentType":{"available":true,"name":"ADDRESS","value":3},"zipDisplay":"32765","userAddress":false,"billingAddress":null,"phone1TypeName":null,"phone2TypeName":null,"phone3TypeName":null,"phone1WithType":null,"phone2WithType":null,"phone3WithType":null,"fax":null,"faxWithType":null,"monthValidDisplay":"","oneLineFullAddress":"2544 CONNECTION PT, Oviedo, FL 32765","oneLineFullAddressForGoogle":"2544+CONNECTION+PT,+Oviedo,+FL+32765","oneLineStreetAddress":"2544 CONNECTION PT","defaultPhoneNumber":null,"formatedStreetAddressByThymeleaf":"\u0026lt;div\u0026gt;2544 CONNECTION PT\u0026lt;\/div\u0026gt;","phone3":null,"phone2":null,"phone1":null,"stateOrProvince":"FL","blank":false,"primary":false,"empty":false,"createdDateMMddyyyy":null,"lastModifiedDateMMddyyyy":null,"createdDateDisplay":null,"lastModifiedDateDisplay":null,"createdDisplay":"","lastModifiedDisplay":"","debugId":null,"new":true},"orgPhone":null,"orgFax":null,"orgEmail":null,"orgContactName":null,"orgContactPhone":null,"orgContactPhoneExt":null,"orgContactEmail":null,"orgMission":null,"neonURLRoot":null,"orgURLRoot":null,"donationTaxDeductable":null,"fiscalYearStartDate":null,"fiscalYearStartMonth":null,"homePageURL":"https:\/\/kingdomnil.com","url2":null,"homePageURLName":null,"url2Name":null,"forumHome":null,"liveHelpHome":null,"blogHome":null,"dataBackupURL":null,"isCustomer":null,"useYearType":1,"refCustomerId":null,"registrationDate":null,"reputationLevel":null,"wealthEngineUserName":null,"wealthEnginePassword":null,"wealthEngineUID":null,"donorSearchUserName":null,"donorSearchPassword":null,"donorSearchKey":null,"facebookMediaLink":null,"twitterMediaLink":null,"charityRegistrationNum":null,"salesforceId":null,"salesforceIdCreatedTime":null,"salesforceIdUpdatedTime":null,"countryType":null,"instanceType":null,"organizationId":null,"instanceId":null,"defaultTimeZone":null,"formCurrency":null,"taxId":null,"nteeDivision":null,"crmPackage":null,"httpneonURLRoot":null,"httporgURLRoot":null,"createdDateMMddyyyy":null,"lastModifiedDateMMddyyyy":null,"createdDateDisplay":null,"lastModifiedDateDisplay":null,"createdDisplay":"","lastModifiedDisplay":"","debugId":null,"new":true}, formCurrency: {"id":0,"name":null,"code":"USD","sign":"$"}, orgId: "kingdomnil", loggedIn: false, loginMode: "PUBLIC_ONLY", previewMode: false, accountBasicInfo: null, profilePhoto: { url: null, approved: null, entity: null, uploading: false, deleting: false }, requireLogin: false, isExitPage: false, initMethods: [], success: false, submitting: false, created: false, customExitPage: false, customExitPageUrl: null, errors: [], invalidField: {}, globalError: '', globalErrorTitle: 'Oh no, your submit failed', isMultiPage: true, currentPage: 1, dateFields: [], withoutPayment: false, withoutPaymentParentUrl: '', redirectingToPayment: false, paymentRequestId: '', separatePayment: false, paymentType: "CARD", cardType: '', paypal: {}, payLater: false, payLaterCheck: false, showCardFields: true, sameAsBillingAddress: false, formData: formData, encourageLoginConfig: {"facebookLogin":false,"footer":"","header":"","defaultShow":false,"twitterLogin":false}, googleReCaptchaEnabled: true, recaptchaResponse: null, pageDescription: null, pageTitles: ["Donation Amount","Your information","Payment Details"], forwardButtons: ["Next","Next"], submitText: "Donate Now", hiddenFields: [], donorCoveredFeeEnabled: true, hideTheme: "0", popDomainUrl: '', tempFileDirUUid:'', //manual validate isEnableVisibleReCaptcha: false, isReCaptchaPassed: false, ccfpInfo: {"notInGood":false,"nonCaOrgNotInGood":false,"notInGoodMessage":null,"adminNotInGoodMessage":null}, caZipCodeList: ["90001","90001","90001","90002","90002","90003","90003","90004","90004","90005","90005","90006","90006","90007","90007","90008","90008","90008","90008","90008","90009","90009","90009","90009","90010","90010","90011","90012","90012","90013","90013","90014","90015","90016","90016","90017","90017","90018","90018","90018","90019","90019","90020","90020","90021","90021","90022","90022","90022","90022","90023","90023","90023","90024","90024","90025","90025","90025","90025","90026","90026","90026","90026","90027","90027","90027","90028","90028","90029","90029","90030","90031","90031","90031","90032","90033","90033","90034","90034","90035","90035","90036","90036","90036","90036","90037","90037","90038","90038","90038","90038","90038","90039","90039","90040","90040","90040","90041","90041","90042","90042","90043","90043","90043","90043","90044","90044","90044","90045","90045","90045","90045","90046","90046","90046","90047","90047","90048","90048","90048","90048","90048","90049","90049","90050","90051","90051","90052","90053","90054","90055","90056","90056","90056","90056","90057","90057","90058","90058","90059","90059","90059","90060","90061","90061","90061","90062","90062","90063","90063","90064","90064","90065","90065","90065","90066","90066","90066","90067","90067","90068","90068","90069","90069","90069","90070","90071","90071","90071","90072","90072","90073","90073","90073","90073","90073","90074","90074","90075","90076","90077","90077","90078","90078","90079","90080","90081","90082","90083","90084","90084","90086","90087","90088","90088","90089","90089","90091","90091","90091","90093","90094","90094","90095","90095","90096","90096","90099","90099","90099","90134","90134","90140","90140","90189","90189","90189","90201","90201","90201","90202","90202","90205","90205","90209","90210","90211","90212","90213","90220","90220","90220","90220","90221","90221","90221","90222","90222","90223","90224","90224","90224","90230","90230","90231","90232","90239","90240","90241","90242","90245","90247","90248","90249","90250","90250","90250","90251","90254","90255","90255","90255","90260","90261","90262","90263","90263","90264","90265","90266","90266","90267","90267","90270","90270","90272","90272","90274","90274","90274","90274","90274","90274","90274","90275","90275","90275","90275","90275","90275","90275","90275","90277","90278","90280","90290","90291","90291","90292","90292","90292","90293","90293","90294","90295","90295","90295","90296","90296","90301","90302","90303","90304","90305","90306","90307","90308","90309","90310","90311","90312","90401","90402","90403","90404","90405","90406","90407","90408","90409","90410","90411","90501","90502","90503","90504","90505","90506","90507","90508","90509","90510","90601","90601","90601","90601","90602","90603","90604","90605","90606","90606","90607","90608","90609","90610","90610","90620","90621","90622","90623","90623","90624","90630","90631","90631","90631","90631","90632","90633","90637","90638","90638","90638","90639","90639","90640","90650","90651","90652","90660","90661","90662","90670","90670","90671","90671","90680","90701","90701","90702","90703","90703","90704","90704","90704","90706","90707","90710","90711","90712","90713","90714","90715","90716","90716","90716","90717","90720","90720","90720","90721","90723","90731","90731","90731","90731","90732","90733","90734","90740","90742","90743","90744","90745","90745","90746","90746","90747","90747","90747","90747","90748","90749","90749","90755","90755","90755","90801","90802","90803","90803","90803","90804","90804","90805","90805","90805","90806","90807","90807","90807","90808","90809","90810","90810","90810","90810","90813","90814","90815","90822","90822","90831","90832","90833","90840","90840","90840","90842","90842","90844","90844","90846","90846","90847","90847","90848","90848","90848","90853","90895","90895","90895","91001","91003","91006","91007","91008","91008","91009","91010","91011","91011","91011","91011","91011","91012","91012","91012","91016","91017","91020","91021","91023","91024","91025","91030","91030","91031","91031","91040","91040","91041","91042","91043","91046","91066","91077","91101","91102","91103","91104","91105","91106","91107","91108","91108","91109","91110","91110","91114","91115","91116","91117","91118","91118","91121","91121","91123","91123","91124","91124","91125","91125","91126","91126","91129","91129","91182","91182","91184","91184","91185","91185","91188","91188","91189","91189","91199","91199","91201","91202","91203","91204","91205","91206","91207","91208","91209","91210","91210","91214","91214","91221","91222","91224","91224","91225","91226","91301","91301","91301","91301","91301","91301","91301","91301","91301","91301","91302","91302","91302","91302","91302","91303","91303","91303","91304","91304","91304","91305","91306","91306","91307","91307","91307","91308","91308","91309","91310","91310","91311","91313","91316","91316","91319","91319","91320","91320","91320","91321","91321","91321","91322","91322","91324","91325","91325","91325","91326","91326","91327","91327","91328","91330","91330","91331","91331","91331","91331","91333","91334","91334","91335","91335","91337","91340","91341","91342","91342","91342","91342","91342","91342","91343","91343","91343","91344","91344","91345","91345","91346","91346","91350","91350","91350","91350","91350","91350","91350","91351","91351","91351","91352","91352","91352","91352","91353","91354","91354","91355","91355","91356","91357","91358","91359","91359","91359","91359","91360","91361","91361","91361","91361","91361","91362","91362","91362","91364","91364","91365","91365","91367","91367","91371","91371","91371","91372","91372","91372","91376","91376","91377","91377","91380","91380","91381","91381","91381","91381","91381","91382","91383","91384","91384","91384","91385","91385","91386","91386","91386","91387","91387","91387","91387","91390","91390","91390","91390","91390","91390","91390","91390","91392","91393","91393","91394","91395","91396","91396","91401","91401","91401","91402","91402","91403","91403","91404","91405","91405","91406","91406","91407","91408","91409","91410","91411","91411","91412","91412","91413","91413","91416","91416","91423","91423","91426","91426","91436","91436","91470","91470","91482","91482","91499","91499","91501","91501","91502","91503","91504","91505","91506","91507","91507","91508","91510","91521","91521","91522","91522","91523","91523","91526","91526","91601","91601","91601","91601","91601","91601","91602","91602","91602","91602","91602","91602","91603","91603","91604","91604","91604","91605","91605","91606","91606","91606","91607","91607","91607","91607","91607","91607","91607","91608","91608","91608","91608","91609","91609","91610","91610","91610","91614","91614","91614","91615","91615","91616","91616","91617","91617","91617","91617","91618","91618","91618","91701","91701","91701","91702","91702","91706","91706","91708","91709","91710","91710","91710","91711","91714","91714","91715","91715","91716","91716","91722","91723","91724","91724","91729","91729","91729","91730","91730","91730","91731","91732","91732","91732","91733","91733","91733","91734","91735","91735","91737","91737","91737","91739","91739","91739","91740","91741","91743","91744","91744","91744","91745","91745","91745","91745","91745","91746","91746","91746","91746","91747","91748","91748","91748","91748","91748","91748","91749","91750","91752","91752","91752","91754","91755","91756","91756","91756","91756","91756","91758","91759","91761","91762","91762","91763","91764","91765","91765","91766","91766","91766","91767","91768","91769","91770","91771","91771","91772","91772","91773","91775","91776","91778","91780","91784","91785","91786","91788","91789","91789","91789","91789","91790","91791","91792","91793","91801","91802","91803","91804","91896","91899","91901","91902","91903","91905","91906","91908","91909","91910","91911","91912","91913","91914","91915","91916","91917","91921","91931","91932","91932","91933","91933","91934","91935","91941","91942","91943","91944","91945","91946","91948","91950","91950","91951","91962","91963","91976","91977","91978","91979","91980","91987","91987","92003","92004","92004","92007","92007","92008","92009","92009","92009","92010","92011","92011","92011","92013","92014","92018","92019","92020","92021","92021","92021","92022","92023","92024","92024","92024","92025","92026","92026","92027","92028","92028","92029","92029","92030","92033","92036","92037","92038","92039","92040","92046","92049","92051","92052","92054","92054","92054","92055","92055","92055","92055","92056","92057","92058","92059","92060","92060","92061","92061","92064","92065","92066","92066","92066","92067","92067","92068","92068","92069","92069","92070","92071","92072","92074","92075","92078","92078","92079","92081","92082","92083","92084","92085","92086","92086","92088","92091","92091","92092","92092","92092","92093","92093","92093","92096","92096","92101","92102","92103","92104","92105","92106","92107","92107","92108","92109","92109","92110","92111","92112","92113","92114","92115","92116","92117","92118","92118","92119","92120","92121","92122","92123","92124","92126","92127","92128","92128","92129","92130","92131","92132","92132","92134","92134","92135","92135","92135","92136","92136","92137","92138","92139","92140","92140","92142","92143","92143","92145","92145","92147","92147","92149","92150","92152","92152","92153","92153","92154","92155","92155","92158","92158","92159","92160","92161","92161","92163","92165","92166","92167","92168","92169","92170","92171","92172","92173","92173","92174","92175","92176","92177","92178","92178","92179","92182","92182","92186","92187","92187","92191","92192","92193","92195","92196","92197","92198","92199","92201","92201","92201","92202","92203","92203","92210","92210","92211","92220","92222","92223","92223","92225","92225","92225","92226","92227","92230","92231","92231","92232","92233","92234","92234","92235","92235","92236","92239","92239","92239","92240","92240","92241","92241","92241","92241","92242","92242","92243","92244","92247","92248","92249","92250","92250","92251","92252","92253","92254","92254","92255","92256","92256","92257","92257","92258","92258","92258","92258","92259","92260","92261","92262","92262","92262","92262","92263","92264","92266","92267","92267","92268","92268","92270","92273","92274","92274","92274","92274","92274","92274","92274","92274","92275","92275","92276","92276","92276","92276","92276","92276","92277","92277","92277","92278","92278","92278","92278","92280","92280","92280","92281","92282","92282","92283","92283","92284","92285","92285","92285","92285","92286","92301","92301","92304","92304","92305","92305","92307","92308","92308","92309","92309","92310","92310","92311","92311","92312","92313","92314","92315","92315","92316","92316","92317","92318","92320","92321","92322","92322","92322","92323","92324","92324","92325","92325","92325","92327","92328","92328","92328","92328","92329","92331","92332","92332","92333","92334","92335","92336","92337","92338","92338","92338","92339","92339","92340","92341","92341","92342","92342","92344","92344","92345","92346","92347","92347","92350","92350","92352","92352","92354","92354","92356","92356","92357","92357","92358","92359","92359","92363","92363","92363","92363","92364","92364","92365","92365","92366","92368","92369","92371","92372","92373","92373","92373","92373","92374","92375","92376","92377","92378","92382","92382","92382","92382","92384","92385","92386","92386","92389","92389","92391","92392","92393","92394","92394","92395","92395","92395","92397","92398","92399","92399","92401","92401","92402","92402","92403","92403","92404","92404","92404","92405","92405","92406","92406","92407","92407","92407","92407","92407","92407","92407","92407","92407","92408","92408","92410","92410","92410","92411","92411","92413","92413","92413","92415","92415","92415","92418","92418","92418","92423","92423","92427","92427","92501","92502","92503","92503","92504","92504","92504","92505","92505","92506","92507","92507","92507","92508","92509","92509","92513","92514","92516","92517","92518","92518","92518","92519","92521","92521","92522","92522","92530","92530","92531","92531","92532","92532","92536","92536","92539","92543","92544","92544","92545","92546","92548","92549","92551","92552","92553","92554","92555","92555","92556","92557","92561","92561","92561","92562","92562","92563","92563","92564","92564","92567","92567","92570","92570","92571","92572","92581","92582","92583","92583","92583","92584","92584","92584","92584","92585","92585","92585","92585","92586","92586","92586","92586","92587","92587","92587","92587","92587","92589","92589","92590","92590","92591","92591","92592","92592","92593","92593","92595","92596","92596","92599","92599","92602","92603","92604","92605","92605","92606","92607","92607","92609","92609","92610","92610","92610","92610","92612","92614","92615","92615","92616","92617","92618","92619","92620","92623","92624","92624","92624","92625","92625","92626","92627","92628","92629","92629","92629","92630","92630","92637","92637","92646","92646","92646","92647","92647","92648","92648","92648","92649","92649","92650","92650","92651","92652","92652","92653","92653","92653","92653","92654","92654","92654","92655","92656","92656","92656","92657","92657","92658","92659","92660","92661","92662","92662","92662","92663","92672","92673","92674","92675","92675","92675","92676","92676","92676","92677","92677","92678","92678","92679","92679","92679","92679","92679","92679","92679","92679","92679","92683","92684","92685","92688","92688","92688","92688","92690","92690","92690","92691","92691","92691","92692","92692","92692","92693","92693","92694","92694","92694","92694","92694","92697","92697","92697","92698","92698","92701","92702","92703","92703","92704","92704","92704","92705","92705","92705","92706","92706","92707","92707","92707","92708","92708","92708","92711","92712","92728","92728","92728","92735","92780","92781","92782","92799","92801","92802","92802","92803","92804","92804","92805","92805","92806","92806","92807","92807","92808","92808","92809","92809","92811","92812","92814","92815","92816","92817","92817","92821","92822","92823","92825","92831","92832","92833","92834","92835","92836","92837","92838","92840","92841","92842","92843","92844","92845","92846","92850","92850","92856","92857","92859","92860","92861","92861","92862","92863","92864","92865","92866","92867","92867","92868","92869","92870","92871","92877","92878","92879","92880","92880","92881","92882","92883","92883","92883","92885","92886","92887","92899","93001","93001","93001","93001","93002","93003","93003","93004","93004","93004","93005","93006","93007","93009","93009","93010","93011","93012","93012","93012","93013","93014","93015","93016","93020","93021","93022","93023","93023","93024","93030","93031","93032","93033","93034","93035","93036","93040","93041","93041","93041","93041","93042","93042","93042","93042","93042","93043","93043","93043","93043","93043","93044","93044","93044","93060","93061","93062","93063","93063","93064","93064","93064","93065","93066","93067","93094","93099","93099","93101","93102","93103","93105","93105","93106","93106","93106","93106","93107","93107","93108","93108","93109","93110","93110","93111","93111","93116","93116","93117","93117","93117","93117","93118","93118","93120","93121","93130","93140","93150","93150","93160","93190","93199","93199","93199","93201","93202","93203","93203","93203","93204","93205","93206","93207","93207","93208","93208","93210","93212","93215","93216","93218","93219","93219","93220","93221","93222","93222","93222","93223","93224","93225","93226","93227","93230","93232","93234","93235","93237","93238","93238","93239","93239","93240","93240","93241","93242","93243","93243","93243","93244","93245","93245","93246","93246","93246","93246","93246","93247","93247","93247","93249","93250","93251","93252","93254","93254","93255","93256","93257","93257","93257","93258","93260","93260","93261","93262","93262","93263","93265","93266","93267","93268","93270","93271","93272","93274","93275","93276","93277","93278","93279","93280","93282","93282","93283","93285","93285","93286","93286","93287","93290","93291","93292","93301","93302","93303","93304","93305","93306","93307","93308","93309","93311","93312","93313","93313","93313","93314","93314","93380","93383","93383","93383","93384","93385","93386","93387","93388","93389","93390","93401","93401","93402","93402","93402","93402","93403","93403","93405","93405","93406","93406","93407","93407","93407","93407","93408","93408","93408","93409","93409","93409","93410","93410","93410","93410","93412","93412","93412","93420","93421","93422","93423","93424","93426","93426","93426","93426","93427","93428","93429","93430","93432","93433","93434","93435","93436","93436","93437","93437","93437","93437","93438","93440","93441","93442","93443","93444","93445","93446","93446","93446","93446","93446","93446","93447","93448","93448","93449","93449","93450","93451","93451","93451","93452","93452","93453","93453","93453","93453","93454","93454","93454","93454","93455","93455","93456","93457","93457","93458","93460","93461","93461","93463","93463","93464","93465","93475","93483","93501","93501","93501","93502","93504","93504","93505","93505","93510","93512","93512","93513","93514","93514","93514","93514","93514","93514","93514","93514","93514","93515","93516","93516","93516","93516","93517","93518","93518","93518","93519","93519","93522","93523","93523","93523","93523","93523","93524","93524","93524","93524","93526","93526","93527","93527","93528","93529","93529","93530","93531","93532","93532","93532","93532","93532","93532","93532","93534","93534","93534","93534","93534","93534","93535","93535","93535","93535","93535","93535","93536","93536","93536","93536","93536","93536","93539","93541","93541","93541","93542","93543","93543","93543","93544","93544","93545","93545","93545","93545","93545","93546","93546","93546","93546","93549","93549","93550","93550","93550","93551","93551","93551","93551","93552","93553","93553","93554","93554","93554","93555","93555","93555","93556","93558","93558","93560","93560","93560","93560","93561","93561","93561","93561","93561","93561","93561","93561","93561","93561","93562","93562","93562","93562","93563","93563","93581","93584","93586","93586","93590","93591","93591","93591","93592","93596","93599","93599","93601","93601","93602","93602","93603","93603","93604","93605","93606","93607","93607","93608","93608","93609","93610","93610","93610","93611","93611","93612","93613","93614","93615","93616","93618","93618","93619","93620","93621","93622","93623","93624","93625","93626","93627","93628","93628","93630","93631","93633","93633","93633","93633","93633","93634","93634","93635","93636","93637","93637","93638","93639","93640","93641","93641","93642","93642","93642","93643","93644","93645","93646","93647","93647","93648","93649","93650","93650","93651","93652","93653","93654","93654","93656","93657","93657","93657","93657","93660","93661","93661","93662","93662","93664","93665","93665","93666","93667","93668","93669","93669","93670","93673","93675","93675","93675","93701","93702","93703","93704","93705","93706","93706","93707","93708","93709","93710","93711","93712","93714","93715","93716","93717","93718","93720","93721","93722","93723","93724","93724","93725","93725","93725","93726","93727","93728","93729","93730","93737","93740","93740","93740","93741","93741","93744","93745","93745","93747","93750","93750","93755","93760","93760","93761","93761","93764","93764","93765","93765","93771","93772","93773","93774","93775","93776","93777","93778","93779","93786","93786","93790","93791","93792","93793","93794","93844","93844","93888","93888","93901","93902","93905","93905","93906","93907","93907","93908","93908","93908","93912","93915","93920","93920","93920","93920","93921","93921","93921","93922","93923","93923","93924","93924","93924","93924","93925","93926","93927","93928","93928","93928","93930","93932","93933","93933","93940","93940","93940","93940","93942","93943","93944","93944","93944","93950","93950","93953","93954","93955","93955","93960","93962","93962","94002","94005","94010","94010","94011","94014","94014","94015","94015","94016","94017","94018","94019","94019","94020","94021","94022","94022","94022","94023","94024","94024","94024","94025","94025","94025","94026","94027","94027","94028","94028","94028","94028","94030","94035","94035","94035","94037","94038","94039","94040","94040","94040","94041","94042","94043","94044","94044","94060","94061","94061","94062","94062","94062","94062","94063","94064","94065","94066","94070","94074","94080","94080","94080","94080","94083","94083","94083","94085","94086","94087","94088","94088","94089","94102","94103","94104","94105","94107","94108","94109","94110","94111","94112","94114","94115","94116","94117","94118","94119","94120","94121","94122","94123","94124","94125","94126","94127","94128","94128","94129","94129","94130","94131","94132","94133","94134","94137","94137","94139","94139","94139","94140","94141","94142","94143","94143","94144","94144","94145","94145","94146","94147","94151","94151","94158","94159","94160","94160","94161","94161","94163","94163","94164","94172","94177","94177","94188","94203","94203","94204","94204","94205","94205","94206","94206","94207","94207","94208","94208","94209","94209","94211","94211","94229","94229","94230","94230","94232","94232","94234","94234","94235","94235","94236","94236","94237","94237","94239","94239","94240","94240","94244","94244","94245","94245","94247","94247","94248","94248","94249","94249","94250","94250","94252","94252","94254","94254","94256","94256","94257","94257","94258","94258","94259","94259","94261","94261","94262","94262","94263","94263","94267","94267","94268","94268","94269","94269","94271","94271","94273","94273","94274","94274","94277","94277","94278","94278","94279","94279","94280","94280","94282","94282","94283","94283","94284","94284","94285","94285","94287","94287","94288","94288","94289","94289","94290","94290","94291","94291","94293","94293","94294","94294","94295","94295","94296","94296","94297","94297","94298","94298","94299","94299","94301","94302","94303","94303","94303","94304","94305","94305","94306","94309","94309","94401","94402","94403","94404","94404","94497","94497","94501","94501","94502","94503","94503","94503","94505","94505","94506","94506","94507","94508","94509","94510","94511","94512","94513","94514","94514","94515","94516","94517","94518","94519","94520","94520","94521","94522","94523","94523","94524","94525","94526","94527","94528","94529","94529","94529","94530","94531","94533","94534","94534","94535","94535","94536","94537","94538","94539","94540","94541","94542","94543","94544","94545","94546","94546","94547","94547","94548","94549","94550","94551","94552","94552","94553","94553","94553","94555","94556","94557","94557","94558","94558","94559","94560","94561","94562","94563","94564","94565","94565","94565","94565","94566","94567","94568","94568","94569","94570","94571","94572","94573","94574","94575","94576","94576","94577","94578","94579","94580","94581","94582","94583","94585","94585","94586","94587","94588","94589","94589","94589","94590","94591","94592","94592","94595","94595","94596","94597","94597","94598","94599","94601","94602","94602","94603","94604","94605","94606","94607","94608","94608","94609","94610","94610","94611","94611","94612","94612","94613","94614","94615","94617","94618","94618","94619","94620","94620","94621","94622","94622","94623","94624","94649","94649","94659","94659","94660","94660","94661","94662","94662","94666","94666","94701","94702","94703","94704","94705","94706","94706","94706","94707","94707","94707","94708","94708","94709","94710","94710","94712","94720","94720","94801","94801","94801","94801","94801","94802","94803","94803","94803","94804","94805","94805","94806","94806","94806","94806","94807","94808","94820","94820","94850","94901","94901","94903","94903","94903","94903","94904","94904","94904","94912","94913","94914","94914","94915","94915","94920","94920","94920","94920","94922","94923","94923","94924","94925","94926","94926","94926","94927","94927","94928","94928","94929","94930","94931","94933","94937","94938","94939","94940","94941","94941","94941","94941","94942","94945","94945","94945","94946","94947","94948","94949","94949","94949","94950","94951","94952","94952","94952","94952","94952","94953","94954","94955","94956","94956","94957","94960","94963","94964","94965","94965","94965","94966","94970","94971","94972","94973","94974","94975","94976","94977","94978","94979","94998","94998","94999","95001","95002","95002","95003","95003","95003","95003","95004","95005","95006","95006","95007","95008","95009","95010","95011","95012","95013","95014","95014","95014","95015","95017","95018","95018","95019","95020","95021","95023","95024","95026","95026","95026","95030","95030","95031","95032","95033","95035","95036","95037","95038","95039","95041","95042","95043","95043","95043","95043","95043","95044","95044","95044","95045","95045","95046","95050","95051","95052","95053","95053","95054","95055","95056","95060","95060","95060","95060","95061","95062","95063","95064","95065","95066","95066","95067","95067","95070","95071","95073","95075","95076","95076","95076","95076","95076","95076","95076","95076","95077","95101","95103","95106","95108","95109","95110","95111","95112","95113","95115","95116","95117","95118","95119","95120","95121","95122","95123","95124","95125","95126","95127","95128","95129","95130","95131","95132","95133","95134","95135","95136","95138","95139","95140","95140","95140","95141","95148","95150","95151","95152","95153","95154","95155","95156","95157","95158","95159","95160","95161","95164","95170","95172","95173","95190","95190","95191","95191","95192","95192","95193","95193","95194","95194","95196","95196","95201","95201","95202","95202","95203","95203","95204","95204","95205","95205","95206","95206","95207","95207","95208","95208","95209","95209","95210","95210","95211","95211","95211","95211","95211","95212","95212","95212","95213","95213","95214","95214","95215","95215","95219","95219","95220","95221","95221","95222","95223","95223","95223","95223","95224","95225","95226","95226","95226","95227","95228","95229","95229","95230","95231","95232","95233","95233","95234","95236","95237","95240","95241","95242","95245","95245","95246","95246","95246","95246","95247","95248","95248","95248","95249","95251","95252","95252","95253","95254","95255","95257","95258","95267","95267","95269","95269","95296","95296","95296","95297","95297","95301","95303","95304","95304","95305","95306","95306","95307","95309","95310","95311","95312","95313","95315","95316","95317","95318","95319","95320","95321","95322","95322","95323","95324","95325","95326","95327","95328","95329","95330","95333","95334","95335","95335","95336","95337","95338","95340","95341","95343","95344","95345","95346","95346","95347","95348","95350","95351","95352","95353","95354","95355","95356","95357","95358","95360","95361","95361","95361","95363","95363","95363","95364","95364","95365","95366","95367","95368","95369","95370","95372","95373","95373","95374","95375","95375","95376","95377","95378","95379","95380","95381","95382","95383","95385","95386","95387","95388","95389","95389","95389","95389","95389","95389","95391","95391","95391","95397","95397","95401","95402","95403","95403","95404","95405","95406","95407","95407","95409","95409","95410","95412","95415","95416","95416","95416","95416","95416","95417","95417","95418","95418","95419","95420","95421","95422","95423","95423","95423","95424","95424","95425","95425","95425","95426","95427","95427","95428","95429","95430","95431","95432","95433","95435","95436","95437","95437","95437","95437","95437","95437","95437","95439","95441","95442","95443","95444","95445","95445","95446","95446","95448","95449","95450","95450","95451","95452","95453","95454","95454","95456","95456","95457","95458","95459","95459","95460","95461","95461","95461","95462","95462","95462","95463","95464","95465","95466","95467","95467","95468","95468","95469","95470","95470","95471","95472","95472","95473","95476","95476","95476","95480","95480","95480","95481","95482","95485","95486","95487","95488","95488","95490","95492","95493","95493","95493","95494","95497","95501","95502","95503","95511","95514","95518","95519","95521","95521","95521","95521","95524","95525","95526","95526","95526","95527","95528","95531","95531","95532","95532","95534","95534","95536","95537","95537","95538","95538","95540","95542","95543","95545","95546","95546","95546","95547","95548","95549","95550","95551","95552","95553","95554","95555","95556","95558","95559","95560","95562","95563","95564","95565","95567","95568","95568","95569","95570","95571","95573","95585","95587","95589","95589","95595","95601","95602","95603","95603","95603","95603","95603","95604","95604","95605","95605","95605","95605","95605","95606","95607","95607","95608","95609","95610","95610","95611","95611","95612","95613","95614","95614","95615","95615","95615","95615","95616","95617","95618","95618","95619","95619","95620","95620","95621","95621","95623","95623","95624","95625","95626","95627","95628","95629","95630","95630","95630","95630","95630","95631","95631","95631","95631","95632","95633","95634","95634","95634","95634","95634","95635","95636","95637","95638","95638","95639","95640","95640","95640","95640","95641","95641","95641","95641","95642","95642","95644","95644","95645","95645","95646","95646","95646","95646","95646","95646","95646","95646","95648","95648","95648","95650","95651","95652","95653","95654","95654","95655","95655","95655","95656","95658","95659","95659","95659","95659","95659","95660","95660","95661","95661","95662","95662","95663","95664","95665","95666","95666","95667","95667","95667","95667","95667","95667","95667","95667","95667","95667","95668","95668","95669","95670","95670","95670","95670","95671","95671","95672","95673","95674","95675","95675","95676","95677","95677","95678","95679","95680","95681","95682","95682","95682","95682","95683","95683","95683","95684","95684","95684","95684","95685","95685","95686","95687","95688","95688","95689","95690","95690","95690","95690","95690","95690","95690","95690","95690","95691","95691","95692","95693","95694","95695","95696","95697","95698","95699","95699","95701","95703","95703","95709","95709","95709","95709","95712","95713","95713","95713","95713","95713","95713","95714","95715","95715","95715","95717","95717","95720","95720","95721","95721","95722","95724","95724","95726","95726","95726","95728","95728","95728","95728","95728","95735","95736","95741","95741","95742","95742","95746","95746","95747","95757","95758","95759","95762","95762","95762","95763","95765","95776","95798","95798","95798","95799","95799","95811","95812","95813","95814","95815","95815","95816","95817","95818","95819","95820","95820","95821","95822","95823","95824","95825","95826","95826","95827","95828","95829","95830","95831","95832","95833","95834","95835","95836","95837","95838","95840","95840","95841","95841","95842","95843","95843","95851","95852","95853","95860","95864","95865","95866","95867","95867","95894","95894","95899","95901","95901","95901","95901","95901","95903","95903","95910","95910","95912","95912","95913","95914","95915","95915","95915","95915","95916","95916","95917","95918","95919","95920","95920","95922","95923","95923","95923","95923","95924","95925","95925","95926","95927","95928","95928","95928","95928","95929","95929","95930","95930","95932","95934","95934","95935","95936","95937","95938","95939","95939","95940","95940","95941","95942","95942","95943","95943","95943","95944","95945","95945","95945","95945","95945","95945","95945","95945","95945","95945","95945","95945","95945","95946","95946","95947","95947","95948","95948","95948","95949","95950","95951","95951","95953","95953","95954","95954","95954","95955","95956","95956","95957","95957","95958","95958","95959","95959","95959","95959","95959","95960","95960","95960","95960","95961","95961","95961","95961","95962","95962","95963","95963","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95965","95966","95967","95968","95969","95970","95970","95971","95971","95971","95971","95971","95971","95972","95973","95973","95973","95973","95974","95975","95975","95976","95976","95977","95977","95977","95977","95978","95979","95979","95979","95979","95980","95980","95980","95980","95980","95980","95980","95981","95981","95982","95983","95983","95984","95984","95986","95987","95987","95987","95988","95988","95991","95991","95992","95993","96001","96001","96002","96003","96006","96007","96007","96008","96009","96010","96011","96013","96013","96014","96015","96016","96017","96017","96019","96019","96019","96020","96021","96022","96023","96024","96025","96027","96027","96028","96028","96029","96029","96031","96031","96032","96033","96034","96035","96037","96038","96039","96040","96041","96041","96044","96044","96046","96047","96047","96048","96048","96049","96050","96050","96051","96052","96054","96055","96056","96056","96056","96057","96058","96059","96061","96062","96063","96063","96064","96065","96065","96067","96068","96069","96070","96070","96071","96073","96074","96075","96076","96076","96078","96079","96079","96079","96079","96080","96080","96084","96084","96085","96086","96087","96088","96088","96089","96089","96090","96091","96091","96092","96093","96094","96094","96094","96095","96096","96097","96099","96101","96101","96101","96101","96103","96103","96103","96103","96103","96103","96104","96105","96106","96107","96107","96108","96108","96109","96110","96111","96112","96112","96113","96113","96113","96114","96115","96116","96117","96118","96119","96120","96120","96120","96120","96120","96120","96120","96121","96122","96122","96123","96124","96124","96125","96125","96126","96127","96128","96129","96129","96130","96130","96130","96130","96130","96132","96133","96134","96134","96134","96134","96134","96135","96136","96137","96137","96137","96140","96140","96140","96140","96140","96140","96141","96141","96142","96142","96142","96143","96143","96145","96145","96145","96146","96146","96146","96146","96146","96148","96150","96150","96151","96151","96151","96152","96152","96154","96154","96155","96155","96155","96155","96156","96156","96156","96156","96157","96157","96157","96158","96158","96158","96160","96161","96161","96161","96161","96161","96161","96161","96161","96162","96162","96162"], constituentZipCode: null, isProfilePhoto: false, } appData.initMethods.push(function(){ if (this.formData.account && this.formData.account.address && this.formData.account.address.line1 !== undefined) { if(this.formData.payment && this.formData.payment.card) { this.sameAsBillingAddress = true } } if (this.formData.payment && this.formData.payment.card) { this.formData.payment.card.holderFirstName = this.firstName this.formData.payment.card.holderLastName = this.lastName this.formData.payment.card.holderEmail = this.email } if (this.formData.payment && this.formData.payment.ach) { this.formData.payment.ach.holderFirstName = this.firstName this.formData.payment.ach.holderLastName = this.lastName this.formData.payment.ach.holderEmail = this.email } }) const appMethods = { showField: function (fieldName){ fieldName = this.filterFieldName(fieldName); if(this.hiddenFields.includes(fieldName)){ return false } return true }, nextPage: function () { if(this.checkWithoutPayment()){ return } // validate if (this.validatePage(this.currentPage)) { this.currentPage = this.currentPage + 1 } }, previousPage: function () { this.currentPage = this.currentPage - 1 }, isOtherPaymentField: function (element) { let fieldName = element.getAttribute('name') if (fieldName === null) { return true } if(this.withoutPayment && fieldName.indexOf('payment.') === 0){ return true } if(this.separatePayment && fieldName.indexOf('payment.') !== 0){ return true } if (this.paymentType === 'CARD' && this.payingWithAppleOrGooglePay && fieldName.indexOf('payment.') === 0) { return true } if (this.paymentType === 'CARD' && fieldName.indexOf('payment.ach.') === 0) { return true }else if(this.paymentType==='ACH' && fieldName.indexOf('payment.card.')===0){ return true }else if((this.paymentType==='PAY_LATER' || this.paymentType==='PAYPAL') && fieldName.indexOf('payment.')===0){ return true } return false }, isNeedValidation:function(element){ if(this.isOtherPaymentField(element)){ return false } if(element.disabled){ return false } if(this.hiddenFields.includes(this.filterFieldName(element.getAttribute('name')))){ return false } return true }, validatePage: function(pageNumber){ let page = document.getElementById('neon-page-'+pageNumber) let itemObj={} for(let et of ['input','select','textarea']) { for (let item of page.getElementsByTagName(et)) { itemObj[item.getAttribute('name')] = item } } let pass = true let firstElement = null // FormData don't return un-checked checkbox let formData = this.getFormData() let es=document.getElementById('neonform_15').elements for(let e of es){ let fieldName=e.getAttribute('name') if(itemObj[fieldName]){ if(!this.isNeedValidation(e)){ continue } if(!this.validateField(e,formData.getAll(fieldName))){ if(firstElement===null){ firstElement = e } pass = false } } } if(firstElement!=null) { this.$nextTick(function(){ firstElement.focus() // donation amount special logic if(firstElement.getAttribute('name')==='amount'){ firstElement = document.getElementsByName('frequency')[0] firstElement.focus() } // Custom file upload box if(firstElement.getAttribute('type') === 'hidden' && firstElement.getAttribute('id').indexOf('customFields') > -1) { let uploadBox = document.getElementById('neon-file-upload-box-' + firstElement.getAttribute('id')) if (uploadBox) { uploadBox.focus() } } }) } if (!this.validateGDPRSmsFieldValue(true)) { pass = false } return pass }, clearInvalidFieldByPrecondition: function(fieldName,fieldValue){ // Here I hard code only apply to Territory & State/Province fields if(!fieldName.endsWith('address.territory') && !fieldName.endsWith('address.stateOrProvince')){ return } let fieldName2 = this.filterFieldName(fieldName) for(let f in this.fieldRules){ for(const r of this.fieldRules[f]){ if(r.preconditions.filter((pc) => pc.name===fieldName2 && pc.value !== fieldValue).length>0){ this.invalidField[this.filterPreconditionFieldName(fieldName,f)] = null } } } }, filterPreconditionFieldName: function(fieldName, preconditionName){ if(fieldName && preconditionName){ if(!fieldName.includes('subMembers[') || !preconditionName.includes('subMembers[')){ return preconditionName } let subMemberMatchStr = fieldName.match(/subMembers\[\d+\]/) if(subMemberMatchStr && subMemberMatchStr.length>0) { let indexedPreconditionName = preconditionName.replace('subMembers[index]', subMemberMatchStr[0]) return indexedPreconditionName } } return preconditionName }, filterFieldName: function(fieldName){ if(fieldName) { fieldName = fieldName.replace(/subMembers\[\d+\]/, 'subMembers[index]') } return fieldName }, validateField: function(element,value) { let fieldName = element.getAttribute('name') let fieldRules = this.fieldRules[this.filterFieldName(fieldName)] if (!fieldRules) { return true } let valid = true let fieldVal = value.toString() if( element.getAttribute('type') === 'file' && value[0].name === ''){ fieldVal = '' } element.getAttribute('type') this.invalidField[fieldName] = null for (let vt of fieldRules) { let preconditionNotHit = false for (let precondition of vt.preconditions) { let preconditionFieldName = this.filterPreconditionFieldName(fieldName, precondition.name) if (precondition !== null && this.getFormData().get(preconditionFieldName) !== precondition.value) { preconditionNotHit = true break } } if (preconditionNotHit) { continue } if(Validator[vt.rule].check(fieldVal,vt.extra)){ if(this.invalidField[fieldName]===null){ this.invalidField[fieldName] = [] } this.invalidField[fieldName].push(vt.message) valid = false if(fieldName.startsWith('payment.card.address')){ this.sameAsBillingAddress = false } } } return valid }, onFieldBlur: function (event) { this.checkNameField(event) this.checkSubMemberNameField(event) let val = this.getFormData().getAll(event.target.getAttribute('name')) this.validateField(event.target, val) this.clearInvalidFieldByPrecondition(event.target.getAttribute('name'), val) }, validateZipCode(){ const zipCodeNames = ['account.address.zipCode','payment.card.address.zipCode'] const zipCodeName = this.sameAsBillingAddress ? zipCodeNames[0] : this.paymentType !== 'CARD' ? zipCodeNames[0] : zipCodeNames[1] let zipCode = this.getFormData().get(zipCodeName) // If there is no zipCode for account in the form, use the code from login status if(zipCode === null){ zipCode = this.constituentZipCode } this.ccfpInfo.isCAZipCode = this.caZipCodeList.includes(zipCode) }, setDoubleTheDonation(toHide) { try { let doubleDonationField = document.getElementById('dd-company-name-input') let parentContainer = doubleDonationField.parentNode if (toHide) { parentContainer.style.display = 'none' } else { parentContainer.style.display = '' } } catch (e) { console.log('change the display css of double donation field error', e) } }, checkAsCompanyField(event) { try { if ('DONATION' !== this.formType) { return } let fieldId = event.target.getAttribute('id') if (fieldId && 'account.asCompany' === fieldId) { let val = this.getFormData().getAll(event.target.getAttribute('name')) if (val && 'true' === val[0]) { this.setDoubleTheDonation(true) } else { this.setDoubleTheDonation(false) } } } catch (e) { console.log('validate as company name field error', e) } }, setSmsPhoneNumberField(toHide) { try { let fileLabelId = null let fileId = null let fileRequiredToolTipId = null let fileInvalidToolTipId = null if (fileId) { let smsPhoneNumberFieldLabel = document.getElementById(fileLabelId) let smsPhoneNumberField = document.getElementById(fileId) let smsPhoneNumberFieldRequiredToolTip = document.getElementById(fileRequiredToolTipId) let smsPhoneNumberFieldInvalidToolTip = document.getElementById(fileInvalidToolTipId) if (smsPhoneNumberFieldLabel && smsPhoneNumberField) { if (toHide) { smsPhoneNumberFieldLabel.style.display = 'none' smsPhoneNumberField.style.display = 'none' smsPhoneNumberField.style.borderColor = '#ced4da' if (smsPhoneNumberFieldRequiredToolTip) { smsPhoneNumberFieldRequiredToolTip.style.display = 'none' } if (smsPhoneNumberFieldInvalidToolTip) { smsPhoneNumberFieldInvalidToolTip.style.display = 'none' } } else { smsPhoneNumberFieldLabel.style.display = '' smsPhoneNumberField.style.display = '' } } } } catch (e) { console.log('change the display css of sms number field error', e) } }, linkagePhone1WithSmsPhoneNumber(event) { try { let smsConsentFieldId = null let smsPhoneNumberFieldId = null let fieldId = event.target.getAttribute('id') if (smsConsentFieldId && smsPhoneNumberFieldId && fieldId && smsConsentFieldId === fieldId) { let smsPhoneNumberField = document.getElementById(smsPhoneNumberFieldId) let phone1 let smsPhoneNumber = smsPhoneNumberField ? smsPhoneNumberField.value : null if ('ACCOUNT' === this.formType) { phone1 = this.formData.address.phone1.number } else { phone1 = this.formData.account.address.phone1.number } if (phone1 && phone1.trim() !== '' && (!smsPhoneNumber || smsPhoneNumber.trim() === '')) { smsPhoneNumberField.value = phone1 this.validateGDPRSmsFieldValue(false) } } } catch (e) { console.log('linkage phone1 with sms phone number error', e) } }, validateGDPRSmsFieldValue(needFocus) { try { let fileId = null let gdprSmsFieldId = null let fileRequiredToolTipId = null let fileInvalidToolTipId = null if (fileId && gdprSmsFieldId) { let smsPhoneNumberField = document.getElementById(fileId) let smsPhoneNumberRequiredFieldToolTip = document.getElementById(fileRequiredToolTipId) let smsPhoneNumberInvalidFieldToolTip = document.getElementById(fileInvalidToolTipId) let val = this.getFormData().getAll(gdprSmsFieldId) let isInvalid = false let isRequired = false if (smsPhoneNumberField && val) { if ('true' === val[0]) { let smsPhoneNumberValue = smsPhoneNumberField.value if (smsPhoneNumberValue && smsPhoneNumberValue.trim() !== '') { let usPhoneReg = /^(\+?1)?[2-9]\d{2}[2-9](?!11)\d{6}$/ if (!usPhoneReg.test(smsPhoneNumberValue.replaceAll(' ', '').replaceAll('-', '').replaceAll('\\(', '').replaceAll('\\)', ''))) { isInvalid = true } } else { isRequired = true } } } if(smsPhoneNumberField && this.isNeedValidateGDPRSmsField(smsPhoneNumberField)){ if (isInvalid) { smsPhoneNumberField.style.borderColor = '#dc3545' if (smsPhoneNumberInvalidFieldToolTip) { smsPhoneNumberInvalidFieldToolTip.style.fontSize = '0.75rem' smsPhoneNumberInvalidFieldToolTip.style.width = '100%' smsPhoneNumberInvalidFieldToolTip.style.marginTop = '.25rem' smsPhoneNumberInvalidFieldToolTip.style.fontFamily = 'Lato' smsPhoneNumberInvalidFieldToolTip.style.color = '#DC143C' smsPhoneNumberInvalidFieldToolTip.style.display = '' } } else { if (smsPhoneNumberInvalidFieldToolTip) { smsPhoneNumberInvalidFieldToolTip.style.display = 'none' } } if (isRequired) { smsPhoneNumberField.style.borderColor = '#dc3545' if (smsPhoneNumberRequiredFieldToolTip) { smsPhoneNumberRequiredFieldToolTip.style.fontSize = '0.75rem' smsPhoneNumberRequiredFieldToolTip.style.width = '100%' smsPhoneNumberRequiredFieldToolTip.style.marginTop = '.25rem' smsPhoneNumberRequiredFieldToolTip.style.fontFamily = 'Lato' smsPhoneNumberRequiredFieldToolTip.style.color = '#DC143C' smsPhoneNumberRequiredFieldToolTip.style.display = '' } } else { if (smsPhoneNumberRequiredFieldToolTip) { smsPhoneNumberRequiredFieldToolTip.style.display = 'none' } } if (isInvalid || isRequired) { if (needFocus) { smsPhoneNumberField.focus() } return false } else { smsPhoneNumberField.style.borderColor = '#ced4da' } } } return true } catch (e) { console.log('validate GDPR sms field value error', e) return true } }, isNeedValidateGDPRSmsField(element) { let parentElement = element.parentNode; while (parentElement) { const parentId = parentElement.id; if (parentId.startsWith('neon-page-')) { return parentElement.style.display !== 'none'; } parentElement = parentElement.parentNode; } return false }, checkGDPRSmsField(event) { try { let fieldId = event.target.getAttribute('id') let gdprSmsFieldId = null if (gdprSmsFieldId && fieldId && gdprSmsFieldId === fieldId) { let val = this.getFormData().getAll(event.target.getAttribute('name')) if (val && 'true' === val[0]) { this.setSmsPhoneNumberField(false) } else { this.setSmsPhoneNumberField(true) } } } catch (e) { console.log('validate gdpr sms field error', e) } }, checkSubMemberNameField(event) { if ('MEMBERSHIP' !== this.formType && 'SUB_MEMBER' !== this.formType) { return } try { let firstNamePro = 'account.name.firstName' let preferredNamePro = 'account.name.preferredName' let fieldId = event.target.getAttribute('id') if (!fieldId || fieldId.indexOf('subMembers') < 0) { return; } if (fieldId.indexOf(firstNamePro) < 0 && fieldId.indexOf(preferredNamePro) < 0) { return; } let subMemberIndex let firstNameReg = /subMembers\[(.*)\].account.name.firstName/g let result = firstNameReg.exec(fieldId) if (result && result.length > 0 && result[1] !== null) { subMemberIndex = Number(result[1]) } let preferredNameReg = /subMembers\[(.*)\].account.name.preferredName/g result = preferredNameReg.exec(fieldId) if (result && result.length > 0 && result[1] !== null) { subMemberIndex = Number(result[1]) } firstNamePro = 'subMembers[' + subMemberIndex + '].' + firstNamePro preferredNamePro = 'subMembers[' + subMemberIndex + '].' + preferredNamePro let firstNameField = document.getElementById(firstNamePro) let preferredNameField = document.getElementById(preferredNamePro) if (!preferredNameField || !firstNameField) { return } let firstName = this.formData.subMembers[subMemberIndex].account.name.firstName let preferredName = this.formData.subMembers[subMemberIndex].account.name.preferredName if ((!preferredName || preferredName.replaceAll(' ', '') === '') && firstName && firstName.replaceAll(' ', '') !== '') { this.formData.subMembers[subMemberIndex].account.name.preferredName = firstName preferredNameField.value = firstName this.validateField(preferredNameField, firstName) } } catch (e) { console.log('validate sub member name field error', e) } }, checkNameField(event) { try { let firstNamePro = 'account.name.firstName' let preferredNamePro = 'account.name.preferredName' if ('ACCOUNT' === this.formType) { firstNamePro = 'name.firstName' preferredNamePro = 'name.preferredName' } let fieldId = event.target.getAttribute('id') if (fieldId && (fieldId === firstNamePro || fieldId === preferredNamePro)) { this.processNameField(firstNamePro, preferredNamePro) } } catch (e) { console.log('validate name field error', e) } }, processNameField(firstNamePro, preferredNamePro) { try { let firstNameField = document.getElementById(firstNamePro) let preferredNameField = document.getElementById(preferredNamePro) if (!preferredNameField || !firstNameField) { return } let firstName let preferredName if ('ACCOUNT' === this.formType) { firstName = this.formData.name.firstName preferredName = this.formData.name.preferredName } else { firstName = this.formData.account.name.firstName preferredName = this.formData.account.name.preferredName } if ((!preferredName || preferredName.replaceAll(' ', '') === '') && firstName && firstName.replaceAll(' ', '') !== '') { if ('ACCOUNT' === this.formType) { this.formData.name.preferredName = firstName } else { this.formData.account.name.preferredName = firstName } preferredNameField.value = firstName this.validateField(preferredNameField, firstName) } } catch (e) { console.log('process name field error', e) } }, onFieldChange: function (event) { this.checkAsCompanyField(event) this.linkagePhone1WithSmsPhoneNumber(event) this.checkGDPRSmsField(event) }, onFileCustomUploaded: function (resp) { if (resp.obj.success) { this.tempFileDirUUid = resp.obj.data.uuid this.$nextTick(function () { let el = document.getElementById(resp.key) el.value = resp.obj.data.tempPath let elVal = this.getFormData().getAll(resp.key) this.validateField(el, elVal) }) } }, onRemoveCustomFile: function (obj) { this.$nextTick(function () { let el = document.getElementById(obj.key) el.value = '' let elVal = this.getFormData().getAll(obj.key) this.validateField(el, elVal) }) }, getDefaultCustomFile: function (fileInfo) { if (fileInfo) { let infos = fileInfo.split(':') if (infos.length > 1) { return [{name: infos[0], size: infos[1]}] } } return [] }, unsupportedFileType:function (fileName) { const SUPPORTED_FILE_TYPES = ['mobi', 'km', 'me', 'ppk ', 'jtl', 'dat', 'one', 'kdc', 'stl', 'midi', 'png', 'thmx', 'conf', 'pnm', 'mht', 'dwg', 'mj2', 'xroles', 'onepkg', 'csv', 'jar', 'exr', 'exp', 'fh50', 'crw', 'srf', 'scala', 'aifc', 'slddrw', 'ecelp7470', 'aiff', 'jb2', 'iso19139', 'css', 'perl', 'f90', 'fh40', 'am', 'amr', 'f77', 'as', 'au', 'mef', 'sql', 'pkg', 'bpg', 'ad', 'ac', 'dtd', 'bash', 'dts', 'heif', 'junit', 'al', 'bpm', 'properties', 'kar', 'aj', 'bpk', 'heic', 'mli', 'sxi', 'sxw', 'webp', 'html', 'idl', 'data', 'mmpt', 'jfi', 'pro', 'mp4v', 'xbm', 'psd', 'mhtml', 'icb', 'mkd', 'asx', 'cs', 'rw2', 'mp4a', 'mkv', 'ics', 'webm', 'ico', 'cc', 'cxx', 'sxc', 'sxd', 'cl', 'ppj', 'arw', 'rtf', 'svg', 'lha', 'pps', 'txt', 'flac', 'ppm', 'ppz', 'ft12', 'ft11', 'asm', 'ft10', 'lhs', 'ppt', 'asf', 'r3d', 'xsamples', 'mka', 'asp', 'htaccess', 'groovy', 'mmmp', 'mid', 'abs-menulinks', 'g3', 'pod', 'dxf', 'rst', 'dxb', 'pom', 'mp2a', 'pot', 'jfif', 'el', 'ppa', 'ft', 'mjp2', 'pict', 'mpg', 'fv', 'nrw', 'mpt', 'mpp', 'xmind', 'fbs', 'fh', 'mpx', 'wdb', 'sldasm', 'mime', 'fn', 'gv', 'vsdm', 'markdown', 'jif', 'xdp', 'distz', 'ost', 'mos', 'diff', 'install', 'mov', 'mpe', 'wcm', 'zip', 'i3', 'vsdx', 'go', 'mng', 'sldprt', 'roles', 'ifb', 'hx', 'mp3', 'mp4', 'wax', 'xweb', 'mp2', 'wav', 'npx', 'fb2', 'ptx', 'awk', 'hh', 'mod', 'hs', 'xfdf', 'hp', 'ief', 'mmr', 'mmp', 'pst', 'xcf', 'ig', 'rest', 'avi', 'rwz', 'orf', 'in', 'xlog', 'jx', 'fff', 'list', 'lrm', 'fh4', 'fh5', 'dwfx', 'm2v', 'jp2', 'sldm', 'mdtext', 'jbig2', 'm3a', 'potm', 'fh8', 'jpgm', 'fh9', 'jl', 'fh7', 'sldx', 'coffee', 'xargs', 'jpgv', 'js', 'pptx', 'msp', 'owl', 'xht', 'm1v', 'mst', 'pyv', 'xif', 'jmx', 'm4', 'lisp', 'm3', 'jng', 'lrf', 'm2a', 'ppsx', 'pxn', 'vcs', 'keys', 'icns', 'mrw', 'md', 'vda', 'jpeg', 'xcat', 'mb', 'ma', 'wsdd', 'mg', 'mf', 'pya', 'pptm', 'ecelp9600', 'xltx', 'msi', 'xltm', 'n3', 'msg', 'rexx', 'epub', 'kml', 'opus', 'log', 'dotm', 'nb', 'iiq', 'readme', 'xlsb', 'ml', 'dotx', 'kmz', 'vcf', 'ppsm', 'xlsx', 'haml', 'xlsm', 'ntf', 'mxu', 'raw', 'lvp', 'tex', 'ras', 'config', 'cdr', 'bibtex', 'xquery', 'movie', 'project', 'makefile', 'aac', 'adoc', 'text', '3fr', 'cwiki', 'xlz', 'def', 'ocaml', 'smil', 'h263', 'h261', 'h264', 'ipa', 'bay', 'xmp', 'bau', 'xml', 'raf', 'bas', 'bat', 'rar', 'viv', 'ram', 'wks', 'scm', '3g2', 'jpm', 'ini', 'sas', 'vhd', 'xlf', 'json', 'inx', 'xld', 'xwelcome', 'k25', 'm4u', 'xlc', 'm4v', 'xla', 'xhtml', 'cbl', 'btif', 'xll', 'lua', 'pm', 'xlm', 'pl', 'pp', 'xlw', 'xlt', 'xlr', 'xls', 'py', 'ra', 'abs-linkmap', 'caf', 'h++', 'lsp', 'cab', 'gif', 'rb', 'ims', 'm3u', 'potx', 'dcl', 'm4a', 'mseq', 'm4b', 'dcx', 'cat', 'qt', 'dcs', 'jpf', 'jpg', 'fhc', 'jpe', 'tcl', 'chm', 'dist', 'wpl', 'sh', 'djv', 'ads', 'adp', 'wps', 'pbm', 'php3', 'oxps', 'shw', 'wbmp', 'emf', 'aspx', 'cgm', 'dtshd', 'cgi', 'tk', 'tif', 'mpeg', 'lzh', 'so', 'mpg4', 'st', 'pas', 'itk', 'less', 'ada', 'adb', 'elc', 'cfm', 'hpp', 'xgrm', 'cfg', 'flv', 'asnd', 'xps', 'rdf', 'nitf', 'xpm', 'restx', 'dif', 'dib', 'wma', 'cfml', 'jsp', 'vm', 'sed', 'classpath', 'wmf', 'tga', 'ihtml', 'j2c', 'wmx', 'fli', 'cfc', 'wmv', '3gp', 'flc', 'ft8', 'sfdu', 'ft9', 'ft7', 'java', 'wm', 'odf', 'xlam', 'cmd', 'doc', 'ppam', 'patch', 'docm', 'aif', 'odt', 'xegrm', 'dms', 'eot', 'x3f', 'bin', 'pef', 'vstx', 'xq', 'meta', 'ibooks', 'pen', 'clj', 'nar', 'dng', 'applescript', 'ent', 'xmap', 'pcx', 'pdf', 'fpx', 'vssx', 'tld', 'vstm', 'bib', 'manifest', 'tiff', 'eol', 'c++', 'dump', 'xsd', 'for', 'cil', 'mpga', 'eml', 'emz', 'php4', 'types', 'xsl', 'djvu', 'rgb', 'mmas', 'vssm', 'mmat', 'asciidoc', 'mmap', 'xsp', 'grm', 'pct', 'htm', 'xlex', 'mdb', 'rng', '4th', 'f4v', 'etx', 'asice', 'rnc', 'fvt', 'yaml', 'mdi', 'sr2', 'spx', 'deploy', 'vhdl', 'rnx', 'c', 'pic', 'd', 'e', 'f', 'oga', 'g', 'xliff', 'ecelp4800', 'h', 'bmp', 'l', 'm', 'rmi', 'p', 'ogg', 'nef', 'r', 's', 'asics', 'drf', 'v', 'svgz', 'y', 'rmp', 'drc', 'ogm', 'cr2', 'cpp', 'ogv', 'egrm', 'hxx', 'snd', 'rlc', 'fh12', 'dpr', 'fh11', 'fh10', 'aart', 'dpx', 'php', 'wvx', 'vtt', 'cob', 'xconf', 'dot', 'vsd', 'fst', 'docx', 'xwd', 'sml', 'cmx', 'smi', 'vsl', 'vsw', 'erf', 'vss', 'pgm', 'vst', 'erl'] if (fileName.indexOf('.') > -1) { let type = fileName.substring(fileName.lastIndexOf('.') + 1) return SUPPORTED_FILE_TYPES.indexOf(type.toLowerCase()) < 0 } return false }, div: function (arg1, arg2) { arg1 = parseFloat(arg1); arg2 = parseFloat(arg2); var t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(".")[1].length; } catch (e) { } try { t2 = arg2.toString().split(".")[1].length; } catch (e) { } r1 = Number(arg1.toString().replace(".", "")); r2 = Number(arg2.toString().replace(".", "")); return this.Mul(r1 / r2, Math.pow(10, t2 - t1)); }, Mul: function (arg1, arg2) { arg1 = parseFloat(arg1); arg2 = parseFloat(arg2); var m = 0, s1 = arg1.toString(), s2 = arg2.toString(); try { m += s1.split(".")[1].length } catch (e) { } try { m += s2.split(".")[1].length } catch (e) { } return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); }, getLoginName: function(){ axios.post('/nx/portal/constituent/getLoginName').then(response => { this.formData.newLoginName = response.data.data }).catch(error => { if(error.response.data){ this.errors = error.response.data console.log('error: ',error) } }) }, validateCurrentPassword: function (event) { let val = this.getFormData().getAll(event.target.getAttribute('name')) this.validateField(event.target, val) this.sendCurrentPasswordToServer(this.getNeonFormJson()) }, changePasswordType(event){ const pid = event.target.getAttribute('pid') const eyeId = pid + '_eye' const input = document.getElementById(pid) const eyesIcon = document.getElementById(eyeId) if (input.type === "password"){ input.type = "text" eyesIcon.setAttribute( 'class', 'fa fa-eye neon-password-eye-icon' ) } else { input.type = "password" eyesIcon.setAttribute( 'class', 'fa fa-eye-slash neon-password-eye-icon' ) } }, sendCurrentPasswordToServer: function(neonFormData){ neonFormData.hiddenFields = this.hiddenFields axios.post('/nx/portal/constituent/checkCurrentPassword', neonFormData).then(response => { }).catch(error => { if(error.response.data){ this.errors = error.response.data let fields = {} this.errors.forEach(function(e){ if(e.type==='GLOBAL'){ }else { if (fields[e.field] === undefined) { fields[e.field] = [] } fields[e.field].push(e.message) } }) this.invalidField['oldPassword'] = fields['oldPassword'] } }) }, checkFieldInvalid: function (fieldName) { if (this.invalidField[fieldName]) { return true } return false }, validateBeforeSubmit() { if (!this.validateGDPRSmsFieldValue(true)) { return false } // validate current page if (this.validatePage(this.currentPage)) { return true } return false }, submitNeonForm: function (event,ach) { if(this.previewMode){ alert('Preview Mode') return } if(!this.validateBeforeSubmit()){ return } if(!this.neonPayEnable) { if(this.paymentType==='ACH' && ach===undefined){ let achConfirmModal = bootstrap.Modal.getInstance(document.getElementById('achConfirmModal')) achConfirmModal.show() return }else if(this.paymentType==='ACH' && ach){ let achConfirmModal = bootstrap.Modal.getInstance(document.getElementById('achConfirmModal')) achConfirmModal.hide() } this.errors = [] this.invalidField = {} if(this.googleReCaptchaEnabled){ this.validateReCaptcha() }else{ this.submitting = true this.invokePrepareSendToServer() } } else { this.errors = [] this.invalidField = {} if(ach) { this.submitting = true this.invokePrepareSendToServer(ach) } else { if(this.googleReCaptchaEnabled){ this.validateReCaptcha(ach) }else{ this.submitting = true this.invokePrepareSendToServer(ach) } } } }, invokePrepareSendToServer: function(ach){ const neonFormJson = this.getNeonFormJson() this.prepareSendToServer(neonFormJson, ach) }, prepareSendToServer: function(neonFormData){ // You can override this method If you want do something before send to server this.sendToServer(neonFormData) }, validateReCaptcha:function (ach) { if(window.grecaptcha) { if(this.isEnableVisibleReCaptcha){ if(this.recaptchaResponse !== null){ this.submitting = true this.isReCaptchaPassed = true; let neonFormData = this.getNeonFormJson() neonFormData.recaptchaResponse = this.recaptchaResponse this.prepareSendToServer(neonFormData, ach) }else{ this.globalError = 'reCAPTCHA verification failed.'; app.$nextTick(function(){ document.getElementById('globalError').scrollIntoView() }) this.isReCaptchaPassed = false; } }else{ this.recaptchaResponse = null window.grecaptcha.execute() } } else { this.submitting = true this.invokePrepareSendToServer(ach) } }, sendToServer: function(neonFormData){ if(this.selectEditTerm) { neonFormData.membershipTermId = this.selectEditTerm.id } let url = "\/nx\/portal\/donation-form" if(url && url.indexOf('/membership-form') > -1 && (!neonFormData.subMemberChecked || neonFormData.subMemberChecked && neonFormData.subMemberChecked !== 'true') && neonFormData.subMembers) { delete neonFormData.subMembers } neonFormData.hiddenFields = this.hiddenFields axios.post("\/nx\/portal\/donation-form", neonFormData).then(response => { console.info(response) try { if (window.doublethedonation && response.data.extraParameters.donationStatus === 'SUCCEEDED') { sessionStorage.dtdCompanyId = neonFormData.doublethedonation_company_id } } catch (e) { console.error(e) } if (this.paymentType === 'PAYPAL' && this.totalAmount > 0.0) { this.paypal = response.data.paypalFormRequest this.$nextTick(function () { console.log('redirects to paypal'); document.getElementById('paypal_xclick').submit(); }) } else { // tell the pop button iframe close try { let doubleDonationInvalid = 'DONATION' !== this.formType || (response.data && response.data.extraParameters && response.data.extraParameters.isCompanyDonor) if (this.popDomainUrl && this.hideTheme && this.hideTheme === '1' && (doubleDonationInvalid || !window.doublethedonation)) { let data = {target: 'closeModal', data: true} parent.postMessage(data, this.popDomainUrl) } } catch (ignore) { } if (this.customExitPage && this.customExitPageUrl !== null) { location.href = this.customExitPageUrl } else { let redirectUrl = '/nx/portal/forms/result/' + response.data.exitPageResponse.shareToken if (this.hideTheme && this.hideTheme === '1') { redirectUrl += '?hideTheme=1' } if(response.data && response.data.originalUrl){ redirectUrl += '?originalUrl=' + encodeURIComponent(response.data.originalUrl) } location.href = redirectUrl } this.success = true this.submitting = false this.success = true } }).catch(error => { this.catchError(error) }) }, checkWithoutPayment: function() { if(this.withoutPayment){ if(this.currentPage === 2){ this.submitFormWithoutPayment() return true } } return false }, submitFormWithoutPayment: function(){ if (this.validatePage(this.currentPage)) { console.info('Redirect to payment...') this.submitting = true var neonFormJson = this.getNeonFormJson(); neonFormJson.withoutPayment = true neonFormJson.withoutPaymentParentUrl = this.withoutPaymentParentUrl axios.post("\/nx\/portal\/donation-form", neonFormJson).then(response => { console.info(response) this.redirectingToPayment = true this.paymentRequestId = response.data setTimeout(() => { document.getElementById('redirectToPaymentForm').submit() },2000) }).catch(this.catchError) } }, catchError: function(error){ this.submitting = false if(error.response && error.response.data){ this.errors = error.response.data let fields = {} let globalMessage='' let created= false this.errors.forEach(function(e){ if(e.type==='GLOBAL'){ globalMessage = e.message if(e.code==='E-0020'){ created = true } else if(e.code === 'E-0021' && globalMessage){ document.location.href = globalMessage } app.$nextTick(function(){ document.getElementById('globalError').scrollIntoView() }) }else { if (fields[e.field] === undefined) { fields[e.field] = [] } fields[e.field].push(e.message) } }) this.invalidField = fields this.globalError = globalMessage if(created) { this.created = created this.payLater = false } if(this.globalError =='' && Object.keys(this.invalidField).length>0){ this.globalError='Some field is invalid, please check the form' } if(this.onSubmitError){ this.onSubmitError(this.globalError) } } console.error(error.response) }, getFormData:function(){ return new FormData(document.getElementById('neonform_15')) }, getNeonFormJson(){ return JSON.form('neonform_15') }, initDateField:function (){ this.$nextTick(function(){ for(let f of this.dateFields){ this.renderLayDate(f) } }) // currentLoginName this.getLoginName() }, renderLayDate: function(f){ let format = f.fieldType==='DATE'?'MM/dd/yyyy':'HH:mm:ss' let type = f.fieldType==='DATE'?'date':'time' let elem = document.getElementById(f.fieldName) laydate.render({ elem: elem, lang: 'en', type: type, format: format, ready: function (value){ app.validateField(elem,elem.value) }, done:function(value){ setObjectValueByPath('app.formData',f.fieldName,value) app.validateField(elem,value) } }); }, changePaymentType: function(type){ if(this.submitting){ return } this.paymentType=type }, reCaptchaInit: function () { this.reCaptchaPlaceholder() }, reCaptchaPlaceholder: function () { if(this.isEnableVisibleReCaptcha){ let tagArr = document.getElementsByName("name:reCaptcha"); tagArr.forEach(tag => { let timer = setInterval(() => { if(window.grecaptcha){ window.grecaptcha.render(tag,{ sitekey: '6LerUSscAAAAABvvEeo9zpqVYshHv-ncy2l0kHQL', callback: ($token) => { this.recaptchaResponse = $token // remove error messages this.globalError = ''; }, 'expired-callback' : () => { // expired this.recaptchaResponse = null; }, }); clearInterval(timer); } },500); }) }else{ window.ReCaptchaLoaded = this.reCaptchaCallback; let tag = document.createElement("div") tag.className = 'g-recaptcha' tag.setAttribute('data-sitekey', '6LerUSscAAAAABvvEeo9zpqVYshHv-ncy2l0kHQL') tag.setAttribute('data-callback', 'ReCaptchaLoaded') tag.setAttribute('data-size', 'invisible') document.body.appendChild(tag); } }, reCaptchaCallback: function ($token) { this.recaptchaResponse = $token if(window.grecaptcha) { window.grecaptcha.reset() } this.submitting = true let neonFormData = this.getNeonFormJson() neonFormData.recaptchaResponse = $token this.prepareSendToServer(neonFormData) }, isprofilePhotoChange: function () { this.isProfilePhoto = true }, closeprofilePhoto: function () { this.isProfilePhoto = false }, profilePhotoChange: function(e){ let file = e.target.files[0] if(file){ if(file.type!=='image/png' && file.type!=='image/gif' && file.type!=='image/jpeg'){ alert('Please choose jpg/gif/png format picture.') this.resetProfilePhoto() return } const fileSize = file.size const isLt10M = fileSize/1024 < 500 if (!isLt10M) { alert('The uploaded photo size cannot exceed 500KB.') file = '' this.resetProfilePhoto() return } this.profilePhoto.entity = file let fr = new FileReader(); fr.readAsDataURL(file) fr.onload = function(e){ // if(e.target.result.startsWith('data:image/')) { // app.$data.profilePhoto.url = e.target.result // } app.uploadProfilePhoto() } } }, uploadProfilePhoto: function(cfile) { this.profilePhoto.uploading = true let fileData = new FormData(); if(cfile){ fileData.append('file',cfile,'file') }else { fileData.append('file',this.profilePhoto.entity,'file') } axios.post('/nx/portal/constituent/profile/photo',fileData,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { this.profilePhoto.uploading = false this.profilePhoto.url = response.data.imgUrl + '?t=' + new Date().getTime() this.profilePhoto.approved = response.data.approved this.profilePhoto.entity = null if(!cfile){ this.resetProfilePhoto() } }).catch(error => { console.log(error.response) this.profilePhoto.uploading = false this.profilePhoto.entity = null if(!cfile){ this.resetProfilePhoto() } alert('Upload fail, please try again.') }) }, deleteProfilePhoto: function () { if(!window.confirm('Are you sure you want to delete this photo?')){ return } // delete server this.profilePhoto.deleting = true axios.delete('/nx/portal/constituent/profile/photo').then(response => { this.profilePhoto.deleting = false this.profilePhoto.url = null this.profilePhoto.approved = null this.profilePhoto.entity = null }).catch(error => { console.log(error.response) this.profilePhoto.deleting = false alert('Delete fail, please try again.') }) }, resetProfilePhoto: function() { this.$nextTick(function (){ document.getElementById('account-profile-photo').value='' }) }, getSocialMediaIcon: function (name, style) { if (style === 'D') { return '/nx/static/img/icons/social-media/darkicons/' + name + '.svg' } else { return '/nx/static/img/icons/social-media/lighticons/' + name + '.svg' } }, onAmountKeyPress: function(event){ let keyCode = String.fromCharCode(event.keyCode) if(keyCode==='+' || keyCode==='-' || keyCode.toLowerCase()==='e'){ event.preventDefault() return false } return true }, formatAmount: function (number) { return Formatter.numberFormat(number, 2, this.formCurrency.sign) }, formatAmountWithoutCurrency: function(number){ return Formatter.numberFormat(number, 2, '') }, doBindSubmitBtnTooltip: function (tooltip){ this.$nextTick(() => { const submitNeedDisabledButtons = document.getElementsByName('submitBtn') if(submitNeedDisabledButtons.length > 0){ [...submitNeedDisabledButtons].map(submitBtn => { submitBtn.setAttribute('data-bs-placement','top') submitBtn.setAttribute('data-bs-title',tooltip) submitBtn.setAttribute('data-bs-toggle','tooltip') submitBtn.style.pointerEvents = 'auto' new bootstrap.Tooltip(submitBtn) }) } }) }, initTooltip: function () { this.$nextTick(function () { setTimeout(() => { let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl, {container: 'body'}) }) }, 700) }) }, } const appComputed = { profilePhotoStatus: function (){ return this.profilePhoto.url!==null && !this.profilePhoto.url.startsWith('data:image/') }, showSubmitBtn: function () { return (this.paymentType === 'CARD' && !this.submitting && this.showCardFields) || (this.paymentType === 'ACH' && !this.submitting) }, formCurrencySignClass: function() { switch (this.formCurrency.sign){ case '$': return {'fa-dollar-sign':true} case '€': return {'fa-euro-sign':true} case '£': return {'fa-pound-sign':true} default: return {'fa-dollar-sign':true} } }, asCompany: function () { if (this.formData.account && this.formData.account.asCompany) { return this.formData.account.asCompany } else if (this.formData.asCompany) { return this.formData.asCompany } return null }, disableSubmitButton: function (){ if(this.previewMode){ return true } if(!this.ccfpInfo.nonCaOrgNotInGood){ return false } const result = this.paymentType === 'CARD' && this.ccfpInfo.isCAZipCode this.doBindSubmitBtnTooltip(result ? this.ccfpInfo.notInGoodMessage : '') return result }, showAchMessage: function (){ if(this.previewMode){ return true } if(!this.ccfpInfo.nonCaOrgNotInGood){ return true } return !this.ccfpInfo.isCAZipCode }, showSummary: function(){ if(this.previewMode){ return true } if(this.ccfpInfo.notInGood){ return false } if(this.paymentType !== 'ACH'){ return true } return this.showAchMessage }, showPayment: function (){ if(this.previewMode){ return true } return !this.ccfpInfo.notInGood }, showSameAsBillingAddress: function () { if (this.formData.account && this.formData.account.address) { if(this.formData.account.address.line1!==undefined){ return true } if(this.formData.account.address.line2!==undefined){ return true } if(this.formData.account.address.country!==undefined){ return true } if(this.formData.account.address.city!==undefined){ return true } if(this.formData.account.address.stateOrProvince!==undefined){ return true } if(this.formData.account.address.zipCode!==undefined){ return true } } return false }, addressLine1: function(){ if (this.formData.account && this.formData.account.address && this.formData.account.address.line1) { return this.formData.account.address.line1.line1 } return '' }, addressLine2: function(){ if(this.formData.account && this.formData.account.address) { return this.formData.account.address.line2 } return '' }, addressCountry: function(){ if(this.formData.account && this.formData.account.address) { return this.formData.account.address.country } return '' }, addressCity: function(){ if(this.formData.account && this.formData.account.address) { return this.formData.account.address.city } return '' }, addressStateOrProvince: function(){ if (this.formData.account && this.formData.account.address) { return this.formData.account.address.stateOrProvince } return '' }, addressZipCode: function () { if (this.formData.account && this.formData.account.address) { return this.formData.account.address.zipCode } return '' }, firstName: function () { if (this.formData.account && this.formData.account.name) { return this.formData.account.name.firstName } return '' }, lastName: function () { if (this.formData.account && this.formData.account.name) { return this.formData.account.name.lastName } return '' }, email: function () { if (this.formData.account && this.formData.account.email1) { return this.formData.account.email1 } return '' } } const appWatch ={ asCompany: function(val){ let account; if(this.formData.account){ account = this.formData.account }else{ account = this.formData } if(account.address){ for(let i=1;i<=3;i++){ if(account.address['phone'+i]){ account.address['phone'+i].type = (val?'W':'H') } } account.address.line1.type = (val ? '2' : '1') } }, sameAsBillingAddress: function(val){ if(val){ this.formData.payment.card.address.line1.line1 = this.addressLine1 this.formData.payment.card.address.line2 = this.addressLine2 this.formData.payment.card.address.country= this.addressCountry this.formData.payment.card.address.city= this.addressCity this.formData.payment.card.address.stateOrProvince= this.addressStateOrProvince this.formData.payment.card.address.zipCode= this.addressZipCode } this.validateZipCode() }, currentPage: function (val){ this.validateZipCode() this.initTooltip() }, addressLine1: function(val){ if(this.sameAsBillingAddress){ this.formData.payment.card.address.line1.line1 = val } }, addressLine2: function(val){ if(this.sameAsBillingAddress){ this.formData.payment.card.address.line2= val } }, addressCountry: function(val){ if(this.sameAsBillingAddress){ this.formData.payment.card.address.country= val } }, addressCity: function(val){ if(this.sameAsBillingAddress){ this.formData.payment.card.address.city= val } }, addressStateOrProvince: function (val) { if (this.sameAsBillingAddress) { this.formData.payment.card.address.stateOrProvince = val } }, addressZipCode: function (val) { if (this.sameAsBillingAddress) { this.formData.payment.card.address.zipCode = val } }, firstName: function (val) { if (this.formData.payment && this.formData.payment.card) { this.formData.payment.card.holderFirstName = val } if (this.formData.payment && this.formData.payment.ach) { this.formData.payment.ach.holderFirstName = val } }, lastName: function (val) { if (this.formData.payment && this.formData.payment.card) { this.formData.payment.card.holderLastName = val } if (this.formData.payment && this.formData.payment.ach) { this.formData.payment.ach.holderLastName = val } }, email: function (val) { if (this.formData.payment && this.formData.payment.card) { this.formData.payment.card.holderEmail = val } if (this.formData.payment && this.formData.payment.ach) { this.formData.payment.ach.holderEmail = val } }, 'formData.payment.card.address.zipCode': function (val){ this.validateZipCode() }, 'formData.account.address.zipCode': function (val){ this.validateZipCode() }, paymentType: function (val){ this.validateZipCode() } } const appConfig = { data: function () { return appData }, methods: appMethods, computed: appComputed, watch: appWatch, mounted: function (){ // Render Laydate this.initDateField() // Init google re captcha if(this.googleReCaptchaEnabled || this.googleReCaptchaEnabled0) { this.reCaptchaInit() } // Invoke other init methods for (let method of this.initMethods) { method.apply(this) } // listening the pop button iframe url try { let that = this window.addEventListener('message', function(e) { let domainUrl = e.data let re = new RegExp('^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$', 'i'); if (typeof(domainUrl === 'string') && re.test(domainUrl)) { if(!that.popDomainUrl) { that.popDomainUrl = domainUrl } that.withoutPaymentParentUrl = domainUrl } }); } catch (ignore) { } this.initTooltip() }, } </script> <script> appData.itemName = 'Amount' appData.campaignFundPurposeMap = {"fund":{},"purpose":{}} appData.neonPayMerchantMap = null appData.donationOnceChecked = true /** Donation Once is checked */ appData.donationAmount = null /** Donation amount */ appData.donationOnceAmount = null appData.donationRecurringAmount = null appData.donationOnceOtherSelected = false appData.donationRecurringOtherSelected = false appData.globalErrorTitle = 'Oh no, your payment failed' appData.isSingleCampaign = true appData.showCampaignStats = false appData.campaignStats={ config: { displayGoalMeter:false, goalMeterType: 1, displayTopSupportList: false, displayRecentDonationList: false }, goalMeter: {}, topSupporterPage: { searchCriteria: { formId: 15, }, loading: false, pageNo: 1, pageSize: 25, total: -1 }, recentDonationPage: { searchCriteria: { formId: 15, }, loading: false, pageNo: 1, pageSize: 25, total: -1 }, topSupporterList: [], recentDonationsList: [] } appData.payLater = true appData.payPal = true appData.selectedFrequency = "donationOnce" appData.optionSelectedModel = null appData.recurringUnitText = null appData.initMethods.push(function () { // read campaign stats this.readCampaignStats() }) appComputed.campaign = function () { return this.formData.campaign } appWatch.campaign = function (val) { if (this.campaignFundPurposeMap.fund[val]) { this.formData.fund = this.campaignFundPurposeMap.fund[val] } if (this.campaignFundPurposeMap.purpose[val]) { this.formData.purpose = this.campaignFundPurposeMap.purpose[val] } if(this.switchNeonPayMerchant) { this.switchNeonPayMerchant(val) } } appComputed.donationOtherAmountSelected = function () { if (this.donationOnceChecked) { return this.donationOnceOtherSelected } else { return this.donationRecurringOtherSelected } } appMethods.otherAmountFocus = function() { return } appComputed.donationOtherAmountLabel = function () { if (this.donationOnceChecked) { let label = "Other Amount" return false && label ==='Other Amount' ? 'Amount' : label } else { let label = "Other Amount" return false && label ==='Other Amount' ? 'Amount' : label } } appMethods.readCampaignStats = function () { if(!this.isSingleCampaign){ return } if (this.showCampaignStats) { this.readCampaignGoalMeter() } this.readCampaignTopSupporterList() this.readCampaignRecentDonationList() } appMethods.readCampaignGoalMeter = function () { if(!this.campaignStats.config.displayGoalMeter){ return } axios.get('/nx/portal/campaign-donation/stats?formId=15').then(response => { if(response.data != null) { this.campaignStats.goalMeter=response.data } if(this.campaignStats.goalMeter.raisedPercentage > 100) { this.$nextTick(function () { let r = document.querySelector(':root') let a = 1 * 0.7 r.style.setProperty('--campaign-progress-meter-a',a); }) } }).catch(error => { if (error.response.data) { alert(error.response.data[0].message) } }) } appMethods.readCampaignTopSupporterListViewMore = function () { this.campaignStats.topSupporterPage.pageNo = this.campaignStats.topSupporterPage.pageNo + 1 this.readCampaignTopSupporterList() } appMethods.readCampaignTopSupporterList = function () { if(!this.campaignStats.config.displayTopSupportList){ return } this.campaignStats.topSupporterPage.loading = true axios.post('/nx/portal/campaign-donation/topSupporters', this.campaignStats.topSupporterPage).then(resp => { if (resp.data) { resp.data.rows.forEach(row => { this.campaignStats.topSupporterList.push(row) }) this.campaignStats.topSupporterPage.total = resp.data.total } this.campaignStats.topSupporterPage.loading = false }).catch(error => { this.campaignStats.topSupporterPage.loading = false if (error.response.data) { alert(error.response.data[0].message) } }) } appMethods.readCampaignRecentDonationListViewMore = function () { this.campaignStats.recentDonationPage.pageNo = this.campaignStats.recentDonationPage.pageNo + 1 this.readCampaignRecentDonationList() } appMethods.linkShare = function (value) { let u = window.location.href let t = "Give a One Time Contribution" if (t == null || t == '') { t = "Donate Today" } let previewMode = false if (!previewMode) { if (value == 'F') { window.open("https://www.facebook.com/sharer.php?u=" + encodeURIComponent(u) + "&t="+ encodeURIComponent(t), "sharer","toolbar=0,status=0,width=626,height=436") } else if (value == 'T') { window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(t) + '&url='+encodeURIComponent(u),"sharer","toolbar=0,status=0,width=626,height=436") } else if (value == 'L') { window.open('https://www.linkedin.com/shareArticle?mini=true&url=' + encodeURIComponent(u) + '&title=' + encodeURIComponent(t),"sharer","toolbar=0,status=0,width=626,height=436") } } } appComputed.raisedPercent = function () { if (this.campaignStats.goalMeter.raisedPercentage) { if(this.campaignStats.goalMeter.raisedPercentage > 100) { let percentAge = this.campaignStats.goalMeter.raisedPercentage % 100 if (percentAge == 0) { return 100 } return percentAge } return this.campaignStats.goalMeter.raisedPercentage } else { return 0 } } appComputed.showLine = function () { return document.documentElement.clientWidth <= 991 || this.campaignStats.config.goalMeterType == '1' } appComputed.showCircular = function () { return document.documentElement.clientWidth > 991 && this.campaignStats.config.goalMeterType == '2' } appMethods.handleFrequencyLabel = function (intervalCode, labelName) { const intervals = ['2w', '2m', '6m'] let isTooLongInterval = intervals.filter(item => item === intervalCode).length === 1 // chose 981 instead of 991, because there may be a scrollbar and width would be shorter if (document.documentElement.clientWidth < 981 && isTooLongInterval) { return labelName.replace('Donate ', '') } else { return labelName } } appMethods.donationFrequencyChecked = function (value){ if('options' === value) { let list = [] for(let i = 0; i < list.length; i++) { if(list[i].value === this.selectedFrequency){ return true } } return false } else { return this.selectedFrequency === value } } appMethods.readCampaignRecentDonationList = function () { if(!this.campaignStats.config.displayRecentDonationList){ return } this.campaignStats.recentDonationPage.loading = true axios.post('/nx/portal/campaign-donation/recentDonations', this.campaignStats.recentDonationPage).then(resp => { if (resp.data) { resp.data.rows.forEach(row => { this.campaignStats.recentDonationsList.push(row) }) this.campaignStats.recentDonationPage.total = resp.data.total } this.campaignStats.recentDonationPage.loading = false }).catch(error => { this.campaignStats.recentDonationPage.loading = false if (error.response.data) { alert(error.response.data[0].message) } }) } appMethods.changeDonationFrequency = function (frequency) { this.selectedFrequency = frequency if (frequency === 'donationOnce') { this.donationOnceChecked = true this.donationAmount = this.donationOnceAmount this.payLater = true this.payPal = true } else { this.donationOnceChecked = false this.donationAmount = this.donationRecurringAmount this.payLater = false this.payPal = false if(this.paymentType!=='ACH' && this.paymentType!=='CARD'){ this.paymentType="CARD" } this.recurringUnitTextBuild(frequency) } this.invalidField['amount'] = null } appMethods.recurringUnitTextBuild = function(val){ let termUnit = val.slice(val.length - 1); let needParse = false; if ("m" === termUnit) { termUnit = 'month'; needParse = true; } else if ("w" === termUnit) { termUnit = 'week'; needParse = true; } if (needParse) { let interval = val.slice(0, val.length - 1); this.recurringUnitText = ("1" === interval ? "" : interval) + termUnit + (Number(interval) > 1 ? "s" : "") } } appMethods.donationFrequencySelectOption = function (opt) { this.changeDonationFrequency(this.optionSelectedModel) } appMethods.changeDonationAmount=function(amount,isOnce){ this.donationAmount = amount if(isOnce){ this.donationOnceAmount = amount }else{ this.donationRecurringAmount = amount } this.invalidField['amount'] = null this.changeOtherSelected(isOnce) } appMethods.changeOtherSelected=function(isOnce){ if (isOnce) { if(this.donationAmount===''){ this.donationOnceOtherSelected = true }else{ this.donationOnceOtherSelected = false } }else{ if(this.donationAmount===''){ this.donationRecurringOtherSelected = true } else { this.donationRecurringOtherSelected = false } } } appComputed.tributeChecked = function(){ return this.formData.tribute.checked } appComputed.acknowledgeeChecked = function(){ return this.formData.acknowledgee.checked } appComputed.acknowledgeeNameCheckbox = function(){ return this.formData.acknowledgee.nameCheckbox } appWatch.acknowledgeeNameCheckbox = function(val){ if(val){ if(this.formData.acknowledgee.name){ if(this.formData.acknowledgee.name.fullName!==undefined){ this.formData.acknowledgee.name.fullName = this.formData.tribute.name.fullName } if(this.formData.acknowledgee.name.prefix!==undefined && this.formData.tribute.name.prefix!==undefined){ this.formData.acknowledgee.name.prefix = this.formData.tribute.name.prefix } if(this.formData.acknowledgee.name.suffix!==undefined && this.formData.tribute.name.suffix!==undefined){ this.formData.acknowledgee.name.suffix = this.formData.tribute.name.suffix } } } this.disableAcknowledgeeFields(val) } appComputed.tributeFullName = function (){ return this.formData.tribute.name.fullName } appWatch.tributeFullName = function (val){ if(!this.acknowledgeeNameCheckbox){ return } if(this.formData.acknowledgee.name && this.formData.acknowledgee.name.fullName!==undefined){ this.formData.acknowledgee.name.fullName = this.formData.tribute.name.fullName } if(val.trim().length>0){ this.invalidField['acknowledgee.name.fullName'] = null } } appComputed.tributePrefix = function (){ return this.formData.tribute.name.prefix } appWatch.tributePrefix = function (val){ if(!this.acknowledgeeNameCheckbox || val === undefined){ return } if(this.formData.acknowledgee.name && this.formData.acknowledgee.name.prefix!==undefined){ this.formData.acknowledgee.name.prefix = val } if(val.trim().length>0){ this.invalidField['acknowledgee.name.prefix'] = null } } appComputed.tributeSuffix = function (){ return this.formData.tribute.name.suffix } appWatch.tributeSuffix = function (val){ if(!this.acknowledgeeNameCheckbox || val === undefined){ return } if(this.formData.acknowledgee.name && this.formData.acknowledgee.name.suffix!==undefined){ this.formData.acknowledgee.name.suffix = val } if(val.trim().length>0){ this.invalidField['acknowledgee.name.suffix'] = null } } appMethods.disableAcknowledgeeFields = function(checked){ this.$nextTick(function(){ let fullNameEle = document.getElementById('acknowledgee.name.fullName'); let prefixEle = document.getElementById('acknowledgee.name.prefix'); let suffixEle = document.getElementById('acknowledgee.name.suffix'); if(checked){ if(fullNameEle) { fullNameEle.setAttribute('readonly',true) } if(prefixEle) { prefixEle.setAttribute('readonly',true) } if(suffixEle) { suffixEle.setAttribute('readonly',true) } }else{ if(fullNameEle) { fullNameEle.removeAttribute('readonly') } if(prefixEle) { prefixEle.removeAttribute('readonly') } if(suffixEle) { suffixEle.removeAttribute('readonly') } } }) } appMethods.showDonationAmountInvalidMessage = function () { return !this.donationOtherAmountSelected && this.invalidField['amount'] && this.invalidField['amount'].length > 0 } appMethods.amountBrClass = function () { return this.isMultiPage && ((!this.donationOnceChecked && this.totalAmount > 99999) || (this.donationOnceChecked && this.totalAmount > 999999)) } appComputed.totalAmount = function () { let realDonationAmount = this.donationAmount if (typeof (this.donationAmount) === 'string') { realDonationAmount = parseFloat(this.donationAmount.replaceAll(',', '')) } if (isNaN(parseFloat(realDonationAmount))) { return 0 } if (this.cardDonorCoveredFeeOpt && this.paymentType === 'CARD' && this.cardDonorCoveredFee) { return addAmountAndDonorCoveredFee(realDonationAmount, this.cardDonorCoveredFee) } else if (this.achDonorCoveredFeeOpt && this.paymentType === 'ACH' && this.achDonorCoveredFee) { return addAmountAndDonorCoveredFee(realDonationAmount, this.achDonorCoveredFee) } return realDonationAmount } appWatch.totalAmount = function (val) { if(typeof hasGooglePay!=='undefined') { if (googlepay) { console.info('set googlepay price '+val) googlepay.setPrice(parseFloat(val).toFixed(2)) }else{ console.warn('googlepay not ready or dev not available') } } if(typeof hasApplePay!=='undefined') { if (applepay) { console.info('set applepay price '+val) applepay.setPrice(parseFloat(val).toFixed(2)) }else{ console.warn('applepay not ready or dev not available') } } } appComputed.paymentAmount = function () { if (typeof (this.donationAmount) === 'string') { return parseFloat(this.donationAmount.replaceAll(',', '')) } return this.donationAmount } appComputed.donationAmountStr = function () { if (this.totalAmount === null || this.totalAmount === '' || isNaN(this.totalAmount)) { return '' } return this.formatAmount(this.totalAmount) } appComputed.amexDonationAmountStr = function () { if (this.paymentAmount === null || this.paymentAmount === '' || isNaN(this.paymentAmount)) { return '' } return addAmountAndDonorCoveredFee(this.paymentAmount, this.amexCardDonorCoveredFee) } appComputed.showRecurringAmount=function(){ return !this.donationOnceChecked && this.paymentType!=='PAYPAL' && this.paymentType!=='PAY_LATER' } </script> <script src="https://cdn.app.neononepay.com/3.0/neonpay.js"></script> <script src="/nx/portal-static/js/neonpay/neonpay-states.js"></script> <script src="/np/publicaccess/countryInfos.do"></script> <script> appData.payWithApplePay=false appData.payWithGooglePay=false appData.payingWithAppleOrGooglePay=false appData.neonPayEnable = true appMethods.prepareSendToServer=function(formData, ach) { this.payWithApplePay=false this.payWithGooglePay=false let fun = this.sendToServer if (this.paymentType === 'CARD') { if (window.createNeonPayCcToken) { fun = createNeonPayCcToken } } else if (this.paymentType === 'ACH') { if (window.createNeonPayAchToken && ach === undefined) { fun = createNeonPayAchToken } else if(ach) { let achConfirmModal = bootstrap.Modal.getInstance(document.getElementById('achConfirmModal')) achConfirmModal.hide() let achFormData = app.$data.formData.payment.ach formData.payment.ach.routingNumber = '' formData.payment.ach.accountNumber = '' formData.payment.ach.holderFirstName = achFormData.holderFirstName formData.payment.ach.holderLastName = achFormData.holderLastName formData.payment.ach.holderEmail = achFormData.holderEmail formData.payment.ach.accountType = achFormData.accountType formData.payment.ach.token = achFormData.token } } fun(formData) } appMethods.switchNeonPayMerchant = function (key) { if(this.neonPayMerchantMap === null || this.neonPayMerchantMap === undefined || this.neonPayMerchantMap.length===0){ return } let isNeonPay = true if (!isNeonPay) { return } let ccDonorCoveredFeeEnabled = true if (key === '') { key = 'default' } if (this.neonPayMerchantMap[key]) { let curMerchantId = this.neonPayMerchantMap[key].merchantId if(NeonPayCC) { NeonPayCC.merchant = curMerchantId } if (hasGooglePay) { NeonPayGoogle.merchant = curMerchantId } if (hasApplePay) { NeonPayApple.merchant = curMerchantId } if (ccDonorCoveredFeeEnabled) { this.ccPercentageFee = this.neonPayMerchantMap[key].ccFeeSetting.percentageFee this.ccFixedFee = this.neonPayMerchantMap[key].ccFeeSetting.fixedFee this.ccAePercentageFee = this.neonPayMerchantMap[key].ccAeFeeSetting.percentageFee this.ccAeFxiedFee = this.neonPayMerchantMap[key].ccAeFeeSetting.fixedFee this.ccMdPercentageFee = this.neonPayMerchantMap[key].ccMdFeeSetting.percentageFee this.ccMdFxiedFee = this.neonPayMerchantMap[key].ccMdFeeSetting.fixedFee } } } async function mountField(neonpay, field, container){ const result = await neonpay.canMakePayments(); if(result){ field.mount(container) }else{ console.log(result) } } </script> <script> const neonPayCcFieldMap = { first_name: 'payment.card.holderFirstName', last_name: 'payment.card.holderLastName', email: 'payment.card.holderEmail', address_line_1: 'payment.card.address.line1.line1', address_line_2: 'payment.card.address.line2', address_city: 'payment.card.address.city', address_state: 'payment.card.address.stateOrProvince', address_zip: 'payment.card.address.zipCode', address_country: 'payment.card.address.country' } appData.isNeonPay = true let NeonPayCC let neonPayCard appData.initMethods.push(function () { this.$nextTick(function () { NeonPayCC = createNeonPay(true) neonPayCard = NeonPayCC.createField('card', { hidePostalCode: true, hideBorders: true }) neonPayCard.on('cardbrand', function (event) { app.$data.cardType = event.brand }) mountField(NeonPayCC, neonPayCard, '#payment-card-container') }) }) function createNeonPayCcToken(formData) { let cardFormData = app.$data.formData.payment.card const neonPayCardData = { first_name: cardFormData.holderFirstName, last_name: cardFormData.holderLastName, email: cardFormData.holderEmail, address_line_1: cardFormData.address.line1.line1, address_line_2: cardFormData.address.line2, address_city: cardFormData.address.city, address_state: cardFormData.address.stateOrProvince, address_zip: cardFormData.address.zipCode, address_country: cardFormData.address.country } if (neonPayCardData.address_country != null) { neonPayCardData.address_country = window.countryInfos[neonPayCardData.address_country] } if (!isNeonPaySupportedState(neonPayCardData.address_state)) { neonPayCardData.address_state = null } NeonPayCC.createToken(neonPayCard, neonPayCardData).then(onPayTokenReturned, function (result) { let invalidField = {} for (let r in result) { if (result[r].message) { let fieldName = neonPayCcFieldMap[r] if (!fieldName) { fieldName = 'payment-card-container' } if (invalidField[fieldName] == undefined) { invalidField[fieldName] = [] } invalidField[fieldName].push(result[r].message) if (fieldName.startsWith('payment.card.address')) { app.$data.sameAsBillingAddress = false } } } app.$data.invalidField = invalidField app.$data.submitting = false }) } // ApplePay & Google Pay const hasGooglePay = true const hasApplePay = true appData.googlepayIncompatible = !hasGooglePay appData.applepayIncompatible = !hasApplePay appData.googleAndApplePayIncompatible = appData.googlepayIncompatible && appData.applepayIncompatible appData.showCardFields = false let NeonPayGoogle = null let NeonPayApple = null let googlepay = null let applepay =null if (hasGooglePay) { NeonPayGoogle = createNeonPay() googlepay = NeonPayGoogle.createField('googlepay',{buttonSizeMode:'fill', price:'0.00'}) googlepay.on('googlepayReady', function () { console.log('googlepayReady') }) googlepay.on('googlepayButtonReady', function () { console.log('googlepayButtonReady') if(app && app.totalAmount>0) { console.info('ready, set googlepay price '+app.totalAmount) // Make sure the price setting is correct googlepay.setPrice(parseFloat(app.totalAmount).toFixed(2)) } let paymentGoogleContainer = document.getElementById('payment-google-container') if(paymentGoogleContainer){ paymentGoogleContainer.style.display = appData.isMultiPage ? 'block' : 'inline'; } }) googlepay.on('googlepayButtonClick', function () { console.log('googlepayButtonClick') appData.payWithGooglePay=true }) googlepay.on('googlepayIncompatible',function(){ console.log('googlepayIncompatible') appData.googlepayIncompatible=true processGoogleAndApplePayIncompatible() }) googlepay.on('googlepayAuthorized', function () { console.log('googlepayAuthorized') onPayAuthorized(NeonPayGoogle,googlepay) }) appData.initMethods.push(function () { this.$nextTick(function () { mountField(NeonPayGoogle, googlepay, '#payment-google-container') }) }) } if (hasApplePay) { NeonPayApple = createNeonPay() applepay = NeonPayApple.createField('applepay', { buttonSizeMode:'fill', price:'0.00', label: appData.itemName, storeName: "The Kingdom".replace(new RegExp('\\||/|\\\\','gm'),"") }) applepay.on('applepayButtonClick', function () { console.log('applepayButtonClick') appData.payWithApplePay=true }) applepay.on('applepayIncompatible', function (){ console.log('applepayIncompatible') appData.applepayIncompatible=true processGoogleAndApplePayIncompatible() }) applepay.on('applepayAuthorized', function () { console.log('applepayAuthorized') onPayAuthorized(NeonPayApple,applepay) }) appData.initMethods.push(function () { this.$nextTick(function () { mountField(NeonPayApple, applepay, '#payment-apple-container') }) }) } function processGoogleAndApplePayIncompatible(){ if(appData.googlepayIncompatible && appData.applepayIncompatible){ appData.googleAndApplePayIncompatible = true app.showCardFields = true } } function createNeonPay(swipe){ let publicKey="public_0ed09e4e40d71a17b04f69e3e593fea7055a3d884270adf36d4f3b36" let merchant = "7243" if(swipe){ return new NeonPay(publicKey, merchant, {swipe: true}) }else{ return new NeonPay(publicKey, merchant) } } function onPayAuthorized(NeonPayInstance,neonPayField) { if (app.previewMode) { return } // validate on one-page app.payingWithAppleOrGooglePay = true if (!app.validateBeforeSubmit()) { app.payingWithAppleOrGooglePay = false return } // validate google ReCaptcha let validated = false if (app.googleReCaptchaEnabled) { if (window.grecaptcha && !app.isEnableVisibleReCaptcha) { console.log('execute google captcha') // switch google captcha call back function window.ReCaptchaLoaded = function ($token) { console.log('google captcha call back') app.recaptchaResponse = $token if (window.grecaptcha) { window.grecaptcha.reset() } app.payingWithAppleOrGooglePay = false window.ReCaptchaLoaded = app.reCaptchaCallback app.submitting = true NeonPayInstance.createToken(neonPayField, {}).then(onPayTokenReturned,onPayError) } this.recaptchaResponse = null window.grecaptcha.execute() } else { validated = true } } else { validated = true } app.payingWithAppleOrGooglePay = false if (validated) { app.submitting = true NeonPayInstance.createToken(neonPayField, {}).then(onPayTokenReturned,onPayError) } } function onPayError(result){ console.log("ApplePay or GooglePay get token error") console.log(result) app.submitting = false for (let r in result) { if (result[r].message) { alert(result[r].message) } } } function onPayTokenReturned(result) { //callback methods to handle result.error or result.token console.log(result) if (result.token) { let formData = app.getNeonFormJson() formData.payment.card.token = result.token app.sendToServer(formData) } } </script> <script src="/nx/portal-static/component/math/math.min.js"></script> <script src="/nx/portal-static/js/donor-covered-fee/calculation.js"></script> <script> appData.cardDonorCoveredFeeOpt = true appData.ccPercentageFee = 0.0319 appData.ccFixedFee = 0.35 appData.ccAePercentageFee = 0.0419 appData.ccAeFxiedFee = 0.35 appData.ccMdPercentageFee = 0.0329 appData.ccMdFxiedFee = 0.35 appData.formCurrencyCode = 'USD' appComputed.cardDonorCoveredFee = function () { if (this.cardType === 'amex') { return calcDonorCoveredFee(this.paymentAmount, this.ccAePercentageFee, this.ccAeFxiedFee) } else if (this.cardType === 'mastercard' || this.cardType === 'discover') { return calcDonorCoveredFee(this.paymentAmount, this.ccMdPercentageFee, this.ccMdFxiedFee) } else { return calcDonorCoveredFee(this.paymentAmount, this.ccPercentageFee, this.ccFixedFee) } } appComputed.amexCardDonorCoveredFee = function(){ if(!this.paymentAmount || isNaN(this.paymentAmount)){ return 0.00 } return calcDonorCoveredFee(this.paymentAmount, this.ccAePercentageFee, this.ccAeFxiedFee) } appComputed.mdCardDonorCoveredFee = function(){ if(!this.paymentAmount || isNaN(this.paymentAmount)){ return 0.00 } return calcDonorCoveredFee(this.paymentAmount, this.ccMdPercentageFee, this.ccMdFxiedFee) } appComputed.cardTotalAmountIncludeFeeList = function() { if(!this.paymentAmount || isNaN(this.paymentAmount)){ return 0.00 } let amexTotalAmount = addAmountAndDonorCoveredFee(this.paymentAmount, this.amexCardDonorCoveredFee) let mdTotalAmount = addAmountAndDonorCoveredFee(this.paymentAmount, this.mdCardDonorCoveredFee) return '(' + this.formatAmount(amexTotalAmount) + ' ' + this.formCurrencyCode + ' for AMEX cards / ' + this.formatAmount(mdTotalAmount) + ' ' + this.formCurrencyCode + ' for Mastercard or Discover cards)' } appComputed.cardDonorCoveredFeeDesc=function(){ if(isNaN(parseFloat(this.paymentAmount))){ return null } let desc = "I want to make an additional donation to cover online processing fees, so that my entire contribution goes to The Kingdom. (<<Fee Amount>>)" return desc.replace('<<Fee Amount>>', this.formatAmount(this.cardDonorCoveredFee)) } </script> <script> appData.achDonorCoveredFeeOpt = true appComputed.achDonorCoveredFee=function(){ return calcDonorCoveredFee(this.paymentAmount, 0.01, 1.25) } appComputed.achDonorCoveredFeeDesc=function(){ if(isNaN(parseFloat(this.paymentAmount))){ return null } let desc = "I want to make an additional donation to cover online processing fees, so that my entire contribution goes to The Kingdom. (<<Fee Amount>>)" return desc.replace('<<Fee Amount>>', this.formatAmount(this.achDonorCoveredFee)) } </script> <script> const vueApp = Vue.createApp(appConfig) vueApp.config.errorHandler = function (err, vm, info) { if (handleVueJSError) { handleVueJSError(err, vm, info) } console.log(err) } vueApp.component('neon-fileupload', window.NeonFileupload) vueApp.component('neon-img-cutter', window.NeonImgCutter) const app = vueApp.mount('#app') </script> </body> </html>