wordpress javascript error in functions.php

Question

i am trying to make a checkout page with wp-invoice and a custom booking page. Here is the code i put into my functions.php

    function paypalpayment() {
    global $wpdb;
    $user = wp_get_current_user();
    $user_ID = $user->ID;
    $shortcode = $wpdb->get_row("SELECT MAX(ap.pending) AS pending, ap.book_datetime, ap.id, ap.hash FROM ea_appointments AS ap "
            ."INNER JOIN ea_users AS us ON ap.id_users_customer = us.id "
            ."WHERE us.wp_id ='".$user_ID."'");
    $html = '';

    if ($shortcode->pending == ''){
        $html .= '<h1>Processing Error: Appointment has been deleted. </h1>';
        $html .= '<p align="center"><a class="fep-button" style="width: 195px; text-align: center;" href="http://lectiotutoring.co.za/EasyBlue" /> Schedule an appointment</a></p>';
    } else {
        $html .= '<h2>Fee Policy</h2>';
        $html .= '<p>You may reschedule an appointment without charge within 24 hours of your appointment.  Cancelation of an appointment within 24 hours can either result in a refund or a credit for your next appointment per your request. You will need to inform Lectio Tutoring on the discussion board about how you would like your cancelation to be handled. If you would like a refund, refunds will be the full amount of the cost of your session minus the PayPal processing fees. There are no refunds for cancelations later than 24 hours in advance. <span class="bigger"><b>If payment is not completed within 10 minutes the appointment will be deleted.</b></span></p>';
        date_default_timezone_set('Africa/Johannesburg');
        $refreshtime = strtotime($shortcode->book_datetime) - strtotime("-10 minutes");

        $html .= '<meta http-equiv="refresh" content="';
        $html .=   $refreshtime;
        $html .=  '">';

        $html .= '<style>
            ul.wpi_checkout_block.wpi_checkout_billing_address {
                display: none;
            } 
            ul.wpi_checkout_block.wpi_checkout_customer_information {
                display: none;
            }   
            ul.wpi_checkout_block.wpi_checkout_billing_information {
                display: none;
            }
            .wpi_checkout_submit_btn.btn.btn-success.wpi_checkout_process_payment.wpi_paypal {
                margin: -1px;
            }
            input {
                margin-top: 10px;
                width: 130px;
            }
            form.wpi_checkout .total_price {
                top: 1px;
            }
            .loader {
              border: 4px solid #f3f3f3;
              border-radius: 50%;
              border-top: 4px solid #3498db;
              width: 30px;
              height: 30px;
              -webkit-animation: spin 2s linear infinite; /* Safari */
              animation: spin 2s linear infinite;
            }

            /* Safari */
            @-webkit-keyframes spin {
              0% { -webkit-transform: rotate(0deg); }
              100% { -webkit-transform: rotate(360deg); }
            }

            @keyframes spin {
              0% { transform: rotate(0deg); }
              100% { transform: rotate(360deg); }
            } 

            div#spinner {
                margin-left: 160px;
                position: absolute;
            }

            input#stepone {
                position: absolute;
                margin-top: -2px;
                padding: 0px;
            }

            .bigger { 
                font-size:125%; 
            }
        </style>';

        $html .= '<input type="button" id="stepone" onclick="processpaypal()" value="Process Payment">';
        $html .= '<div id="spinner" class="loader" style="display:none"></div>';
        $html .= do_shortcode($shortcode->pending);
        $html .= '<input type="button" onclick="deletapt()" value="Delete Apt.">';
        $html .= '<script>
            cancelurl = "http://lectiotutoring.co.za/EasyBlue/index.php/appointments/cancel/' . $shortcode->hash . '";
            function deletapt(){
                window.location = cancelurl;
            }
            jQuery(document).ready(function($) {
                $("input[name=return]").val("http://lectiotutoring.co.za/payment-success/");
                $("input[name=cancel_return]").val(cancelurl);
            });  
            jQuery(document).ready(function($) {
            function processpaypal($){
                $("#spinner").css("display","block");
                $("#stepone").css("display","none");
                setTimeout(
                function() 
                {
                    $(".wpi_checkout_submit_btn").click();
                }, 250);                
            }
            });  

        </script>';

    }   
    return $html;
}
add_shortcode("paypalpay", "paypalpayment");

when i look for errors in my console it shows Uncaught ReferenceError: processpaypal is not defined in this area $html .= '<div id="spinner" class="loader" style="display:none"></div>';

I have converted my jquery to be compatible with wordpress but it does not seem to be working as i get that error as said above, what would be the problem? have i converted my js wrong in this area jQuery(document).ready(function($) { function processpaypal($){

Answer 1

...comment are not enought i guess

1. Make your processpaypal function global, move it outside of the document ready. Learn more about scope here
2. To resolve $ conflict in wordpress, you do this.

a.

   var $ = jQuery; // make sure to make it global

b.

   //using jQuery instead of $ like so, (like you did it here jQuery(document))
   function processpaypal(){
            jQuery("#spinner").css("display","block");
            jQuery("#stepone").css("display","none");
            setTimeout(
            function() 
            {
                jQuery(".wpi_checkout_submit_btn").click();
            }, 250);                
     }

Also consider this recommendations:

1. it's better to use separate css and js files instead of making it inline.
2. Create separate template file with your html output and include it using output buffering inside your function
3. date_default_timezone_set('Africa/Johannesburg'); you can put this at the beginning of your functions.php and this function will set timezone globaly for the whole file. reference