We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x
Private

PHP - WordPress - JavaScript - JQuery - Need assistance with Value Verification on Button

Netty Admin
Netty Admin asked
on
High Priority
50 Views
Last Modified: 2020-06-05
We have setup a Woocommerce checkout page on our wordpress site. We have Javascript listening to the postMessage sent from the WorldPay child iFrame. The script parses the data and outputs a "CardID" to the console and then after that it hides the iFrame and displays a "Credit Card Saved Successfully" message.

What we are now trying to accomplish is preventing the user from clicking Place Order button if the "CardID" value is not present in the console log and have the page display a message like "Valid Credit Card Info Required"


I have very little development experience so any suggestions or a point in the right direction would be greatly appreciated.

I have set this as High Priority because my team has missed our deadline a couple times already and I have been assigned these last tasks to help them get phase one completed for testing by our executives.
Comment
Watch Question

Netty AdminNetwork Administrator

Author

Commented:

Netty AdminNetwork Administrator

Author

Commented:

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
so if a user knowing that tips, open the console, find a way to capture this CartID and use console.log("98765"), it should be allowed to pass an order?
you MUST not rely on JavaScrip for any security process, you must check everything on the server side.

Netty AdminNetwork Administrator

Author

Commented:
The CardID is unique every time and comes back from a third party api. As long as a there is a value returned in the CardID then the user is allowed to proceed with the "Place Order" button submit but if no value is found then we want to return a message to the end user

Does that better explain it? let me know if you would like any more details
Netty AdminNetwork Administrator

Author

Commented:
I am reading I can add this to the button and have it execute a javascript function ...If I do this then where should I put the function? can I just add it to the script I already have in place or do I need to embed another script....I am trying to research how to write the function. Any tips in the right direction would be great.
onclick="myfunction()"
Netty AdminNetwork Administrator

Author

Commented:
This is not for security purposes. This is just to ensure the user does not submit an order without already submitting a credit card through our third party processor's iFrame. So this is purely for functionality of the website and so that a step does not get skipped on the user's end.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
you can use postMessage instead using console.log :
and use this on your page waiting for the cardID:

window.addEventListener("message", receiveMessage, false);

Netty AdminNetwork Administrator

Author

Commented:
I already have an event listener grabbing all the data and parsing out the CardID so would I need another one or can I just use the results from that one or add to it? And how would I get this to control the button ID="place_order" so that the button will display a message instead of moving forward if the value is not present.
Netty AdminNetwork Administrator

Author

Commented:
All of the security is done on server side through the WorldPay iFrame and the iFrame returns public values through postMessage. We just want to know that the public value "CardID" was returned before the button will allow a submit.
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Netty AdminNetwork Administrator

Author

Commented:
That is a cool Idea. I am running it by management in a teams chat. I will be back in one minute with whether or not they would approve of that method
Netty AdminNetwork Administrator

Author

Commented:
Yes!! they said that would work perfectly.......can you assist me in getting this accomplished? Should I hide it with CSS first or how should I initially hide it?
Netty AdminNetwork Administrator

Author

Commented:
or use jquery to hide it at first at the beginning of my already written javascript and and then add a jquery line after the parse to unhide it?

add_action( 'wp_head', function () { ?>
<script>

   window.addEventListener("message", (event) => {
    if (event.origin !== "https://api-east.pestpac.com")
        return;

    let ccInfo = JSON.parse(event.data)
    console.log(ccInfo.CardID)
    jQuery(document).ready(function($) {
    $('#cc_frame').hide().after(`<br><br><br><p>Credit Card Saved Successfully<br><br><br></p>`)
});
   
}, false);

</script>
<?php } );
Netty AdminNetwork Administrator

Author

Commented:
Any suggestions would be greatly appreciated. I have found a way to hide it with css, does anyone know if a Jquery line would supersede that after the successful parse? 
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hey Netty,

I think the easiest way to handle this is to just set you button to disabled by default, and then enable it in your message listener function:

<button id="place_order" disabled>Place Order</button>

Open in new window

Then in your handler:

let ccInfo = JSON.parse(event.data)

// do whatever checks you need to here
if (ccInfo.CardID != 'undefined' {
    $('#cc_frame').hide().after(`<p>Credit Card Saved Successfully</p>`)
    $('#place_order').prop('disabled', false)
}

Open in new window

Netty AdminNetwork Administrator

Author

Commented:
I like that method of hiding it as well Chris. Only thing is I am trying to avoid editing the main theme files as I am trying to work with the snippets features and I do have easy access to the "additional CSS" feature........I am under assumption that each way will work. Will there be any different functionality with using css display=none and then using Jquery show() at the end of that script?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Either way will work just fine. In your handler, instead of:

$('#place_order').prop('disabled', false)

Just put

$('#place_order').show()
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:

<iframe id="cc_frame" ....></frame>
<div id="cc_saved" class="alert alert-success" role="alert">
   <br><br><br><p>Credit Card Saved Successfully<br><br><br></p>
</div>

   $('#cc_frame').hide();
   $('#cc_saved').fadeIn('slow'); // https://api.jquery.com/fadeIn/
Netty AdminNetwork Administrator

Author

Commented:
leakim,

That would be a cool method of showing it, with the fade in but I would fade int he button or maybe I could fade in the button as well as the "Credit Card Saved Successfully" message

For some reason this is not hiding it when I add it to the custom CSS

#place_order { 
            display:none;
              }


Netty AdminNetwork Administrator

Author

Commented:
This is weird guys.

I can hide the Previous button when referencing its ID but not the Place Order button

Netty AdminNetwork Administrator

Author

Commented:

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
If it's not hiding it, make sure you don't have a more specific selector making it visible. Examine it in your console and see what CSS is applied to it.
Netty AdminNetwork Administrator

Author

Commented:
Yes, thank you Chris,
I found the selector #payment
But this is weird to me since the ID clearly says "place_order"
its working now though


Netty AdminNetwork Administrator

Author

Commented:
Now time to see if the script will unhide it by the ID or do I need to use "payment" even though that does not seem to be the ID

Netty AdminNetwork Administrator

Author

Commented:
Payment seems to be the enclosing DIV ID so I am going to try with that
Netty AdminNetwork Administrator

Author

Commented:


well that did not work.......I need to apply it only to the button but it now has hidden much more
Netty AdminNetwork Administrator

Author

Commented:
When I try this it does not seem to hide it in the wp-admin editor although it was hiding it correctly with only the #payment selector in the editor so maybe this will work when going live

#payment #place_order { 
            display:none;
              }
Netty AdminNetwork Administrator

Author

Commented:
No this way is not working live either....It does not hide anything when done this way
#payment #place_order { 
            display:none;
              }
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
So put it inline

style="display:none;"
Netty AdminNetwork Administrator

Author

Commented:
leakim,

I know you guys are true developers so you would just edit the themes. I am attempting to do it with the features within word press but it seems to be taking a while so I may just look up how to edit the theme/webpage and add it.
Netty AdminNetwork Administrator

Author

Commented:
It is seeming to be kind of complicated to edit the source code of a particular page. I am reading up on it now.
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Lol the inline just for testing ..
Ok , no comma between id ?
What about adding !important ?

#payment, #place_order {                  display:none !important;              
 }
Netty AdminNetwork Administrator

Author

Commented:



What about this class "button alt" ............I did not think that there could be spaces in classes
Netty AdminNetwork Administrator

Author

Commented:
Yes adding important worked!

#place_order { 
            display:none!important;
              }
Netty AdminNetwork Administrator

Author

Commented:

Now time to see if the script will unhide it
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Netty,

A class can't have a space in it but you can assign more than one class to an element:

<button class="big blue">Click Me</button>

That has 2 different classes added to it. In CSS, if you want to select an element that has both, you join them together (no spaces)

button.big.blue { display: none; }

CSS works on something called specificity - the more specific a rule is the more important it is. If you're not getting the place_order button hidden by simply applying :

#place_order { display:none; }

then it's likely that somewhere else in your CSS (maybe within the theme) there is a style with a higher specificity overruling it. Something like this:

#payment #place_order { display: block; }

In your WebDev tools, if you select the button with the Inspector tool, you should be able to see all the CSS that's applied to an element. That will help you identify why your rule isn't hiding it. If there's a more specific rule being applied, then you just need to match it

#payment #place_order { display: none; }

With multi selectors like this, it's going to select an element with in ID of place_order that exists within an element with an ID of payment. If you add a comma, like so:

#payment,  #place_order { display: none; }

That's going to select 2 separate elements and apply the rule
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Personally, I would always try and avoid using !important. It'll break the standard CSS specificity rules and should only be used as a last resort. It feels like a hack to me !
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Right there you're going to have a problem because you've added !important. That will effectivly overule (take a higher precedence) that the show() method, so it's unlikely that you'll now be able to show it.
Netty AdminNetwork Administrator

Author

Commented:
Chris,
It is working with !Important but when I do it like this it is not working

#payment #place_order { display: none; }
Netty AdminNetwork Administrator

Author

Commented:
Can I combine the 2 ID selectors with the class maybe?

#payment #place_order.button.alt
Netty AdminNetwork Administrator

Author

Commented:
Yes that worked!!

#payment #place_order.button.alt
Netty AdminNetwork Administrator

Author

Commented:
That is the most specific I can get and it worked

#payment #place_order.button.alt
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
That will depend on yoru HTML structure and the CSS you already have in place.

The easiest way to identify the CSS that's being applied is with the WebDev tools. If you right click on the button, you should see an option that says something like Inspect Element. That will select the button in the DOM explorer and show you the CSS (along with the selectors) that are being applied.
Netty AdminNetwork Administrator

Author

Commented:
Now that I have it hiding correctly with the following CSS selector

#payment #place_order.button.alt

Do I need to modify the selector in the script or do I still use the "place_order" ID?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
You may need the full selector:

("#payment #place_order.button.alt").show()
Netty AdminNetwork Administrator

Author

Commented:
It is working now! it is hidden at first and the appears after at the right moment

Now can I have it fade in like leakim suggested?

where would I put this, in place of show or add it to show?

.fadeIn('slow')
Netty AdminNetwork Administrator

Author

Commented:
I did end up using the full selector:
$("#payment #place_order.button.alt").show()
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
The fadeIn() method just replaces the show()

$("#payment #place_order.button.alt").fadeIn('slow')
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.