A method for PayPal, Stripe, MerchentPlus, 2Checkout, and InterKassa payments--Help with AJAX

[Craig Tucker]

My current project using the EasyBlue/Bullmoose build is to integrate the Wordpress WP-Invoice into Easy Appointments.  This will not work on the standard EA build because it does not fully hook into Wordpress.  The EasyBlue/Bullmoose build fully hooks in and allows the use of WP functions within the program.  My method requires using the WP-Invoice sortcode within Easy Appointments.  I have chosen WP-Invoice because it is fully managed on my server and therefore no patient data is stored on an external server.  That is good for HIPPA.  There are better invoicing systems but this really does do the job and it is very affordable.  The basic WP-Invoice plugin is free.  But you will need the Single Page Checkout feature for my approach to work.  There is a one time fee ($75) to get Single Page Checkout added to the plugin. Another advantage is that WP-Invoice already has interfaces for multiple payments options.  I do not have to write the API code and return codes for these.  I am focusing on Paypal.

I did some CSS things to eliminate a lot of the portions of this plugin and to just keep the button.  I styled the button like the confirm button.  It looks great.  I am not posting that here.  I have also made a settings switch to turn on and off the feature.  That is also not being shown here.  I have tried the approach by building the shortcode by hand in a PHP veriable and it works great.  Now to code it properly so that the short code changes with the service selection.


To do that we need to first build the short code using some Java Script:

        var serviceItem = $('#select-service option:selected').text();
        var shortcode= "[wpi_checkout item='" + serviceItem + "' customer_information='Date of Service' callback_function='enableconfirm']";

I have this triggered with an on click event within the book.php view (should be in frontend_book.js but it is in book.php for now):

    $('#button-next-1').on('click', function(){
        FrontendBookApi.getShortcode();
    });

Then we need to get this script into a this Wordpress function that sits in book.php that will replace the confirm button with the trigger to start the payment sequence:

<?php echo do_shortcode($shortcode); ?>

So what is needed is an ajax call that will take the JS shortcode and turn it in to the PHP $shortcode in the book.php view.

I have tried using a function like this:

    exports.getShortcode = function() {
        var serviceItem = $('#select-service option:selected').text();
        var serviceString = "[wpi_checkout item='" + serviceItem + "' customer_information='Date of Service' callback_function='enableconfirm']";
       
        var data = {'shortcode': serviceString};
       
        var postUrl = GlobalVariables.baseUrl + '/index.php/appointments/ajax_serviceitem';
        $.ajax({
            csrfToken: GlobalVariables.csrfToken,
            url: postUrl,
            method: 'post',
            data: data,
            dataType: 'json',
            success: function(data) {
                alert(data);
            }
        });
    };

This is then processed in the Appointments controller with something like this:

    //WP-Invoice Integration
    public function ajax_serviceitem() {
        $shortcode = $_POST['shortcode'];
        echo json_encode($shortcode);
    }

The result is an error:
HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it. (XHR)POST - https://pathtoEA/easy/index.php/appointments/ajax_serviceitem


I am not too good with Ajax and so obviously I am getting something wrong here.  So any better developers who can see my error I would love your input.  I will then include this code with the EasyBlue/Bullemoose build for all to use. 

The last step after making this step work the next step is the return function 'enableconfirm' that will move us to the success window.  This is very close to being done.  Please help.

One thing I have tried is to use a cookie in stead to move the JS variable to my PHP variable.  That works (kind of).  The problem is that it will only update on refresh of the screen and that is not so good.  But it did prove the concept.  Ajax is the way.  

[Craig Tucker]

Well I was over complicating things.  More Ajax is not needed.  My solution is to add following to book.php:

                    <?php foreach($available_services as $service) {
                        $shortcode = "[wpi_checkout item='" . $service['name'] . "' customer_information='Date of Service' callback_function='enableconfirm']"; ?>
                        <div id="<?php echo $service['id'] ?>" class="box"><?php echo do_shortcode($shortcode)?></div>
                    <?php } ?>

I put this above this div: `<div class="command-buttons">`

Then I add some JS at the bottom such as this:

        $("#select-service option:first").attr('selected','selected');
       
        $("#select-service").change(function(){
            $(this).find("option:selected").each(function(){
                var optionValue = $(this).attr("value");
                if(optionValue){
                    $('.box').hide();
                    $("#" + optionValue).show();
                  } else{
                    $(".box").hide();
                }
            });
        }).change();

    $('#button-next-2').on('click', function(){
        document.getElementById("wpi_checkout_payment_customer_information_date_of_service_wpi_paypal").value = selectedDate + ' ' +  $('.selected-hour').text();
    });

Now the button shows up and the fee is added to PayPal.  Now I just need to make a callback function that will complete the confirmation with verification of payment.  That should not be too difficult.

[Craig Tucker]

Success.  I have Paypal working now.  I will add it to my next build after all is done with Alex's 1.3.

I am running this in Wordpress and integrating a couple plugins to make this work:

• WP-Invoice: for a separate detailed invoice system.  I this requires the Single Page Checkout addon which is a $75 charge. 
  
• Insert PHP: This is not necessary, you can do the same thing by building a short code in functions.php but I like being able to just go right to my page and see what is happening there.  I used this to build my landing page for the short code
  

My purposes are not likely needed by most others but this is what I accomplished:

• Payment with Paypal's instant payment notification system
• A separate invoice database.  I used WP-Invoice
• The invoice on PayPal does not have any information about the service provided other than a cryptic number.  This is for HIPAA compliance because PayPal servers are not HIPAA compliant (each account would need to be on a VPN or they would need to cloak the services provided.  I am doing the cloaking on my end.
• Detailed invoice is found on my server such that it can be sent to insurance for reimbursement.
• The appointment is held in a pending mode for 10 minutes and deleted if there is inaction on the purchase, or if the purchase is canceled.
• PayPal service can be turned off or on in settings.
  

What is also nice is that in manage mode, the client can reschedule without having to pay a fee.  What I need to do is to limit selection of services in manage-mode to  that service that was selected in the first place.  Otherwise a client can book a more expensive service in manage mode with no charge.  I will change that. 

So, I will release the code with my new build.  I can see that it all can be simplified for those who do not have to comply with HIPAA standards by just building an IPN listener for EA. Someone who wants to take on that project can look at the principles I used for this and build from there. 

I do not plan to go Live with PayPal until September 2018 so I will not have any client feed back until that time.

[Alex Tselegidis]

Nice work Craig, thanks once again for sharing this :) 

Alex Tselegidis, Easy!Appointments Creator   Need a customization? Contact me in person!

[westyl...@gmail.com]

Hi

Is there a way to make this work on a none wordpress version please?

Thank you

[Craig Tucker]

My modification only works with Wordpress. I am waiting for 1.3.1 to come out before I start working on my new modification.  I will include the Paypal integration in that.  But to do a stand alone Paypal function what would be needed is to develop a Papal listener file.  If someone did that the rest of what I have done could be keyed to that listener.  I needed more than just a listener because PayPal is not HIPAA compliant.  I needed a listener that was linked to a financial management program that would keep protected healthcare information safely on my server while letting cryptic minimally descriptive billing information go to PayPal. So I am not interested in building such a thing and other plugins have very good listener features already built so I went that way.

[Gary Taylor]

Sent you an email about possible modifications, thanks Alex

[Jacob Andrews]

Hi! Thank you so much for the update.

I was wondering if it is possible to add a service like Stripe to the website. I use your build and do not connect through WordPress.