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 - Javascript - Wordpress - Need help editing scripts to accomplish business needs

High Priority
51 Views
Last Modified: 2020-06-25
Need to edit PHP script to initiate by clicking a button titled "Add Card"

Once it initiates, I need it to first run a curl call and POST the Customer ID to a specified URL.
After the POST is complete I need the script to continuously run the remainder of the script (for at least a minute) until it finds the value populated in the "order_url_string" field as it may take up to 30 seconds for the field to populate after the inital POST was completed.

The URL in the iFrame is valid for 10min. After it times out I would like another button to pop back up and allow the user to click it again to reload the process.

Also during each reload I would like the client to see a "Retrieving Secure Window..." message and some sort of time processing indicator


Currently I also have a Javascript running that displays a "Credit Card Saved Successfully" message when the card is entered correctly into the iFrame and it unhides the "Place Order" button. And if the transaction is canceled, the "Place Order" button remains hidden and I have it displaying "Credit Card Not Saved" message and directs them to call the company since there is no reload available. I would like the button to reappear for a reload at this point as well.

With this new config the client will always have the ability to get a new Credit Card window regardless if they canceled it or if it times out.

It seems like we may be able to get this working with just editing the Javascript but I will need your help with that decision
Comment
Watch Question

Netty AdminNetwork Administrator

Author

Commented:


^^^^JavaScript
Netty AdminNetwork Administrator

Author

Commented:

^^^PHP
Netty AdminNetwork Administrator

Author

Commented:
<?php
  $curl = curl_init();
  curl_setopt_array($curl, array(
  CURLOPT_URL => "https://weburl.com",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => array(
    "Authorization: Basic Tc1NGRmOTpjc185ZmE3MmU2NWFmNmYwMTczN2NkMzcwNmMzMmI5NjA0NTdhNzNiZjYy"
  ),
));
  $response = curl_exec($curl);
  curl_close($curl);

^^^Curl Call template for WordPress --- this template has "GET" in it and I would chane that to "POST" and put the correct URL that my other guy has created a listener on 
Netty AdminNetwork Administrator

Author

Commented:
add_action('woocommerce_review_order_before_submit', 'show_cc_iframe');
function show_cc_iframe() {
    $current_user = get_current_user_id();
    $url = get_user_meta($current_user, 'order_url_string', true);
 print "<p>Please enter your credit card information below and click the ADD CARD button.  When your card is succesfully saved, please press the PLACE ORDER button.</p>
 <hr>
 <h4>Credit Card info:</h4>
<p>A credit card is required to complete your order but is not being charged at this time. Your credit card will be charged when service is completed. We accept Debit Cards, Visa, MasterCard, Discover and American Express cards.</p>";
    echo '<iframe id="cc_frame" src="' . urldecode($url) . '"></iframe>';
 
}
Netty AdminNetwork Administrator

Author

Commented:
<script>
 window.addEventListener("message", (event) => {
    if (event.origin !== "https://api-east.pestpac.com")
        return;
  
    let ccInfo = JSON.parse(event.data)
    
 if (ccInfo.BillToID) {
 
    jQuery(document).ready(function($) {
    $('#cc_frame').hide().after(`<br><br><br><p>Credit Card Saved Successfully<br><br><br></p>`)
 $("#payment #place_order.button.alt").fadeIn('slow')
});
 
 } else if (ccInfo.Error) { 
 
  jQuery(document).ready(function($) {
    $('#cc_frame').hide().after(`<br><br><br><hr class="redrule"><p style="color:red">Credit card not saved. Because you canceled the credit card transaction, we cannot reinitialize the card entry window. This is done to insure the security of your credit card information. Please call the number on the top of the page and speak to one of our customer care team members to complete your purchase.</p><hr class="redrule"><br><br><br>`)
 
});
  
 }
  
}, false);
</script>
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hi Netty,

I would suggest you break this problem down into manageable chunks and address each one separately. The first part of your question doesn't quite sound right, so can you clear that up first. Whenever your code finds itself hanging around for an arbitrary amount of time it usually signals a logic problem. You say it might take 30 seconds or it might take a minute. What if it takes 2 minutes - it's very difficult to code around this randomness, so we usually try and hook into events of some kind. What is it that might take 30 seconds / 1 minute. Is there some code or event you can hook into when that 'thing' occurs.

It seems that you're making curl request to a 3rd party end-point. Does that request not return some data back to you that you then insert into your database (i.e order_url_string). That would be the normal way of doing things, and you'd code accordingly.

Regarding the 10 minutes timeout - does the iFrame fire an event that tells you it's timed out, or are you just left guessing?
Netty AdminNetwork Administrator

Author

Commented:
Hey Chris,
Thank you for your quick response.

1. The way the URL is currently being generated is by a call to the third party pest pac. It makes this call upon initial account creation with the clients info also being posted to the third party and it gets a response with the secure URL which my coworker then has the logic populating the “order_url_string” with this value. And the problem is it times out after 10min so the executive team and other testers who have taken more than 10min from account creation-to-checkout have experienced timeouts. I know the proper way to do this would be for my code to make the call to the third party, get the response, and then display the iFrame but in this scenario my coworker does not have the time to break the logic up more and give me the direct call to the third party so instead he has created a URL for me to POST the user ID to ( we defined this as $current_user in our script). When I POST this ID to the URL he created it then grabs all the other client info it needs makes the call to the third party and gets the response which then will populate the “order_url_string” and then the remainder of my script can pull that URL from that field and display it in the iframe. The reason I say 30-60 seconds is because it sometimes takes 15-20 or more seconds to populate the “order_url_string” field with the URL and my script will not show the iframe if nothing is the field. And another problem is if it times out then my script needs to make sure it pulls the new value once the curl call has completed again and populated the field with the new valid URL so maybe an “if”statement that checks if the value is the same as it was after the last call and if so then retry until a new value is populated in the field.

2.The curl call we are creating is going to hit a custom URL that my coworker made that then ends up triggering the official curl call to the third party. Yes you are right the normal way would be for my script to make the direct call but it is too much additional work on my coworkers end right now as we have a new deadline and have missed several deadlines. It may add some delay this way but we will fix that on the next revision of the site and I will then have my script do the direct curl call to the third party, receive the response string with the URL, and then display it via an iframe.


3.Yes the iFrame fires an event when the window times out after 10min passes since the original curl call to the third party.
Netty AdminNetwork Administrator

Author

Commented:
I need to send the $current_user value from   " $current_user = get_current_user_id(); " via POST
to the URL my coworker has provided me via a curl call first 
Netty AdminNetwork Administrator

Author

Commented:
I first need to test and see how the output gets sent to his URL. Once we see out this ID is sent he then can structure his logic to use that ID to initiate the process which then hits the official curl call to the third party and then after getting the URL back it will repopulate the “order_url_string”  

First I am thinking the first thing I need to get done is figure out how to send and what he needs to listen for as far as the ID goes so then he can get the logic working. Then I can start working on the rest and start testing but I can not do any testing until he knows what format the ID will come to him when he listens for it on the custom URL he gave me.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hmmm. That's a little clearer but I'm still missing some understanding. As I understand it, your user registers, and you make a curl request to an EndPoint that your co-worker has created. At that EndPoint, another curl request is made to a 3rd party URL. That 3rd party URL then returns the order_url_string and your co-worker inserts it into the database. At that point, surely your co-worker would just return that value back to your curl request. I'm sturggling to see where this random 30 second wait comes into play. What do you get back from your curl request to your co-workers endpoint?

This would be the proper way to do it. Your user registers, and you make a curl request to an endpoint. That curl request responds with the details you need in order to show the iFrame.

Regarding the 10 minute timeout. I'm guessing you're referring to the URL source of the iFrame timing out after 10 minutes. You say that triggers an event, so you'd just need to bind a listener to that event (in the same way that we bound to the postMessage event earlier. Once you capture that event, you can then update to DOM however you like - hide the iFrame, display a message, provide a 'Refresh' button to make another curl request and start the process all over again.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Ahh - we cross-posted there.

Generally, it's up to the creator of the API (your co-worker) to tell the consumer (you) how to submit data, not the other way around. You say you want to send the current UsersID (by means of get_current_user_id()). When POSTing data, you usually submit key-value pairs, so in your case, you might POST:

UserId : xxx

Where xxx is an integer value.

As the Author of the API, they would then read in that data from the POST request (assuming it's coded in PHP - that would be the $_POST array), so something like:

$userId = $_POST['UserId']

You co-worker should be saying to you something like "I need the User ID sent with the key of UserId". You then build your request around that. Once they've got the request, they would read in the value, process it (make a curl request to another URL / update a database etc) and then send a response. This response is what you get back as a result of making a curl request to your co-workers API
Netty AdminNetwork Administrator

Author

Commented:
Yes I want to send it to his URL with
Key of "UserID" with a integer value, the value we pulled from get_current_user_id()
Netty AdminNetwork Administrator

Author

Commented:
he is using azure dev GUI to listen to the POST which I believe is using .NET framework underneath the GUI
Netty AdminNetwork Administrator

Author

Commented:
So to follow your advice as to breaking the problem down into parts:

first I need to code the curl call to pull the user ID from "get_current_user_id()" and POST it to the given URL as a Key of "UserID" and the integer value
Netty AdminNetwork Administrator

Author

Commented:
Correct me if I am wrong or if you have a better approach as to which part to do first
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
OK. Well assuming the API endpoint has been set up to receive a POST['UserID'], then just add that to your curl request and wait for the response:

<?php
$userId = get_current_user_id();
$postData = [
    'UserID' => $userId,
];

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://weburl.com",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_TIMEOUT => 0,
  CURLOPT_HTTPHEADER => array(
    "Authorization: Basic Tc1NGRmOTpjc185ZmE3MmU2NWFmNmYwMTczN2NkMzcwNmMzMmI5NjA0NTdhNzNiZjYy"
  ),
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $postData, 
));

$response = curl_exec($curl);
curl_close($curl);

Open in new window

Here, we're POSTing the ID with the UserID key, and waiting for a response. Your co-worker will receive the UserID key/value, process it however they need to and then send you a response - I'm assuming that will be the order_url_string, but it's up to them what they return.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Sorry - cross posted again :)

Which bit you do first will depend on your own processes, but from a logic point of view, it makes sense that you manage the user registration / order_url_string bit first, as everything else seems to depend on that.

I can't see how the user registration part then moves onto displaying the iFrame with the order_url_string bit, so you might need to explain that bit to me.
Netty AdminNetwork Administrator

Author

Commented:
Great. I am not going to receive a response from this call. It will act as a trigger for him to kick off the official curl call which then will get the response from the third party and then his logic will populate the order_url_string and then my script will pull it from that field.
Netty AdminNetwork Administrator

Author

Commented:
The original user creation process kicks off the official curl call and then gets the secure URL from world pay and populates the order_url_string. So the URL (with the 10min timer started) is actually live from the time of account creation. Then the php script you and I originally worked on pulls that URL from that field later on when the customer hits the checkout page with that particular hook action we made and the URL timer is probably half way gone by then.
Netty AdminNetwork Administrator

Author

Commented:
So the new process will put the power of the initial "when" and the power of "reloading" the secure world pay URL in our hands instead of it being done at account creation and timing out and having no way of reloading.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Surely you're getting some response from your curl request. Would be very strange if it just died quietly!!
Netty AdminNetwork Administrator

Author

Commented:
Again, I know the best way to do this would be for me to make the official call and get the URL response from the third party and display it but he said that would require him doing more logic on his end and take more time that we do not have with are current deadlines

Netty AdminNetwork Administrator

Author

Commented:
Yes I see what you mean. What I mean is I do not need to look at the response or do anything with the response. Well at least I do not think so at the moment. Maybe one reason to listen is to see if it was successful and if not send it again. Well yes, can use the response as a trigger to run the rest of the script which then pulls the URL from the order_url_string.

But in general I should not need to listen to the response because if all goes well it will trigger the population of the order_url_string field and we can use the remainder of the previously written script to pull that from the field.
Netty AdminNetwork Administrator

Author

Commented:
^^He is not sending any type of specific response or data back to me, only the auto generated response data will come back^^^
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
OK. So when a user registers, they fill in a form and submit it. You handle this form and then make a request to your co-workers API - sending him the UserId as a POST field. He handles that request, does what he needs to, and makes a subsequent request to WorldPay. Worldpay return an order_url and he then saves that to your database (!) - he then sends a response of something (!). You receive that response into the $response variable ($response = curl_exec($curl)). Depending on what is returned from the request will dictate what you can do at this point.

The user then carries on through your process and eventually ends up at the Checkout. At this point, the order_url has been saved to the Database, so you can retrieve it and generate the code for the iFrame. It may be that the 10 minutes timeout is already half way through at this point.

Now - all good so far (a little odd but workable). If you user then sits on the checkout page for too long, then the page inside the iFrame (the order_url) will timeout and you say fire an event. So in your checkout page (the one with the iFrame) you need to bind a listener to whatever event that is. You'll do this with Javascript in a similar way to how we bound to the postMessage event. In this handler, you can then hide the iFrame, display a message, and maybe show a button that allows the user to Refresh.

That Refresh button will be bound to a click event handler, that when clicked would make an AJAX request to your server. The server I guess would then need to make another request to your co-workers API to ask for a new order_url. If that request responds with the order_url then you just return that to your AJAX request, update the src of the iFrame and re-display it, effectively starting a new 10 minute countdown.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
This seems very odd - you're saying that you make a request to your co-workers API and then what ... nothing .. you just wait for a indeterminate amount of time, not knowing whether your curl request was successful or not. That sounds like a fundamental flaw in the API. There's no additional logic here - he receives the data, processes it, makes a curl request to WorldPay and receives a response from them. He then inserts that info into your database, and then what - at that point, all he needs to do is send a response back - this is fundamentally how the entire Internet works - request / response.
Netty AdminNetwork Administrator

Author

Commented:
Currently the coworker has the account creation part handled and he has  all the logic setup to request the secure URL from world pay through pest pac however he has it set up, that is not my responsibility at the moment as I do not send him the user ID at the moment.

He is now breaking that logic up and giving me the ability to trigger the part of his logic that calls for the secure URL.

The way he is giving me that ability is for me to POST the current user ID via a curl call to a custom URL he provided me.

Instead of the account creation process kicking off the call for the secure URL, my script will be the initial trigger from here on out via the POST to his custom URL which then will kick off the rest of his logic that goes and gets the URL and populates the order_url_string

So on the checkout page management wants a button that says "Add Card" and this button will initiate the curl call to his custom URL by sending him the current user ID via POST. How he has the logic grabbing the URL after that is none of my concern as that is currently his responsibility.

After my button sends him the UserID , then his scripts/logic will get the secure world pay URL and populate the  "order_url_string"

 Then we can use the part of the script we already have written that will pull that URL from that field and present it via the iFrame.

Then if someone times out we want another button to appear giving them the option to reload (which will be the same thing the first button does)





Netty AdminNetwork Administrator

Author

Commented:
I see what you mean, maybe I can have him send me the URL in the response somehow instead of populating the order_url_string but the reason they have me doing it this way is so there is even more extra work on his end
Netty AdminNetwork Administrator

Author

Commented:
I understand it is not the best way to do it but I am limited at the moment. I have to send him the UserID and then pull the URL from the "order_url_string" and there could be a 15-20 second delay in that "order_url_string"  being populated with the secure URL from world pay. It may only take 2-5 seconds most of the time but at times up to 20 seconds.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
It's this bit where the flaw is:

After my button sends him the UserID , then his scripts/logic will get the secure world pay URL and populate the  "order_url_string"
That's absolutely fine, but his script will generate a 'response' object - that's just how the internet works. It's up to him to populate that response. It could be that he just sends back a true/false value. He could send back a string saying "Thanks a lot". But life gets a whole lot easier if he just sends back the URL - he's got it, so why not just send it. He has to send something! This way, you click your Add Card button, make a POST Request and you get the URL back in the Response. If it times out, you re-show a button that just makes another POST Request to his API and you get back another URL in the Response. What and how he does things at his end are irrelevant at this point - you send a UserId and in return he sends a URL - job done!
Netty AdminNetwork Administrator

Author

Commented:
Steps
 user clicks "Add Card" button
1. send him UserID
2. give the user a "Retrieving Secure Window" message with a spinning icon
3. Display the iframe
4. If iframe times out give the user a "Reload" button that reinitiates the same process all over again
5. If user clicks cancel give them the "Reload" button as well. This gets a different event then a timeout event so I can have the listener checking for both
Netty AdminNetwork Administrator

Author

Commented:
Ok , I am going to ask him if he can send back the URL. Thank you as that makes more sense but that is not how it was discussed in our meeting.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
You say this;

but the reason they have me doing it this way is so there is even more extra work on his end
If it's done like we talk about, there's actually less work. Instead of inserting the value he gets from WordPay in your database, he simply sends the value back to you. I don't know how he's coding the backend, but in PHP, it's literally a case of doing this:

echo json_encode(['order_url' => $orderUrl]);

Now that seems a whole lot easier that inserting a record into a database. And doing it this way would entirely remove this random delay of upto 30 seconds - you send the user ID and in return you get the URL.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Yes - those steps you've just outlined are pretty much the process you want. Just a slight edit to make things a little clearer (at least for me)

1. Click the Add To Cart Button
2. Give the user a "Retrieving Secure Window" message with a spinning icon
3. Send the UserID as a POST Request / receive the URL as the Response
4. Display the iframe
5. If iFrame times out give the user a "Reload" button - GOTO STEP 1
6. If user clicks cancel give them the "Reload" button - GOTO STEP 1
Netty AdminNetwork Administrator

Author

Commented:
Oh ok I see what you are saying, so he can define that as a variable on the back end and my script can pull it by echoing the variable?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
idk, right now he has it programmed to send it to the "order_url_string" via another script and me sending him the UserID is going to initiate that script
The point I'm trying to make doesn't change that at all. You sending the UserId will still trigger that script. He will still use that script to talk to worldpay, He will still receive the URL from worldpay. He can if he wants, still write that data to the database. He will be sending a response back to you (request / response). The only thing that changes is the payload of the response - and all he's doing is sending a piece of information that he already has.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
so he can define that as a variable on the back end and my script can pull it by echoing the variable?
Yes! He already has he variable (he must have - he's inserting it into the database). Whatever he sends back, you'll receive into your $response variable - if he sends back true', then your response variable will be true. If he sends back the URL, then your $response variable will be the URL. You've got instant access to it.
Netty AdminNetwork Administrator

Author

Commented:
Ok I am sending him messages relaying all of this info and seeing if I can get him to send it back. If I am reading that right, he is assigned the string to a variable on the backend and then we can access it via that variable or is it going to be a direct response via my curl call with a variable he set......He is getting the URL from a totally separate script/curl call so how exactly would he do that or is it simpler than I am thinking?
Netty AdminNetwork Administrator

Author

Commented:
***He is getting his response to an Azure GUI interface which then places it into the database record
Netty AdminNetwork Administrator

Author

Commented:
Regarding him editing his scripts , At this point I would need more info from him. I was given the task to pull it from the "order_url_string" and he is super busy working on other parts of the site and barely has had any personal family time so he is taking his time off very serious when he gets any and I do not blame him as he has been given a huge workload and impossible deadlines and I probably will not get any conversation time with him until tomorrow sometime. 
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Cool. It makes sense that he's involved in this conversation.

Generally speaking, you don't need to worry at all about how he does his bit. All you need to worry about is that if you send him a UserId, he sends back a URL. This is a common principal of APIs. When you make YOUR curl request, you do this (shortened for clarity):

$curl = curl_init();
curl_set_opt($curl, CURLOPT_URL, "www.domain.com/getUrl.php");
curl_set_opt($curl, CURLOPT_POSTFIELDS, ['UserId' => 123]); 
$response = curl_exec($curl);

Open in new window

What actually happens at the getUrl.php shouldn't worry you. It can do whatever it needs to do. In the case of your co-worker's script, he's taking in the POST[UserId] that you've sent. He's then making a call to WorldPay (probably through a curl request of his own). He's receiving a response from WorldPay - the Order URL. He's inserting that data into your Database. He'll then send a response back to you. You shouldn't care how he does this - just know that he does, and whatever he sends back, you'll have access to in YOUR $response variable.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Out of interest, do you konw how to use a program called PostMan. It's a great tool for developers that allows you to make requests to any endpoints and see exactly what's returned. The reason I ask is because it would be very easy to just use that to make a request to his endpoint and see exactly what you get back. Would be interesting to see just what he's already sending.
Netty AdminNetwork Administrator

Author

Commented:
Cool. Thank you. I have a feeling he is still going to want me to pull the URL from the "order_url_string" but I understand what you are saying and I hope you are around after he responds to me. Hopefully I hear from him tonight but if not then I will know something in the morning. My guess is he has something else going on that makes it not so simple to send it back to me but maybe I am wrong and he just needs the idea fresh in his mind.
Netty AdminNetwork Administrator

Author

Commented:
Yes he showed me post man today and I have it installed and that is where I can see all the random data coming back
Netty AdminNetwork Administrator

Author

Commented:

Netty AdminNetwork Administrator

Author

Commented:

The thing is he told me not to worry about the response other than to clarify that the send was successful as he wants me to grab the URL from "order_url_string" still

There must be a reason why he wants me to pull it from there still until we move to the next site revision
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hmmm. OK, that's a shame as it means you're going to be working with a flawed design. Depending on how flawed it is will dictate how many hoops you have to jump through to get your data. If the API sends a response back BEFORE it's finished it's process, then you'll have bigger problems. The fact that you're getting this arbitrary time delay makes me think this is exactly what's happening - effectively you're getting a response back before the database has been updated.

Out of interest, in the screenshot of PostMan you just posted, what shows on the Body tab of the response? And FYI - the key the API needs is ID, not UserID as previously discussed.

$postData = [
    'ID' => $userId,
];

Open in new window

I guess the way around this is to trigger an AJAX request when your Add Card button is clicked. This will make a request to your server and at that point, you'll make your curl request to the API endpoint. Your script then finishes and returns to the AJAX request. At this point, you set up a timeout to make another call back to your server to check the database. If it finds a value (the URL) it returns it. If it doesn't it just returns false. If your AJAX request receives false, it just resets the timeout and makes another call again (for example every 1 second). If it receives the URL, it uses it to generate the iFrame.

Technically, you could try and do it all with one server-side script, but if you get it wrong, you'll lock up your server. There is also a default timeout on PHP scripts, so there's every chance your script will timeout whilst waiting for the database, effectively crashing your application.

It's not going to be pretty, but if that's what you're working with, then unfortunately you're limited on options!
Netty AdminNetwork Administrator

Author

Commented:
Ok, great. Thank you. As far as that Postman screenshot, that was just me inputting test info, he is supposed to set it up to listen for this:

Nothing comes back in the body, only the headers
Maybe I will be able to see if he can give me a response tomorrow and maybe it will turn a light bulb on for him to somehow send me the URL but if not then I will be stuck working with what I am. Eventually he will show me how his end is working and I can make the needed adjustments on that end. My azure credentials can get me in and I am allowed to poke around but I just do not know exactly how he has it all structured at the moment.
Netty AdminNetwork Administrator

Author

Commented:
Actually I asked him what he was going to be listening for and he told me that I needed to first do a test POST to see how it would go out to him and then he would structure his listening accordingly. Then we came to the agreement he would listen for UserID and its integer value
Netty AdminNetwork Administrator

Author

Commented:
He is currently learning a lot of this stuff too but he knows more than me. Maybe if you can give me a suggestion on how to approach him and the right questions to ask to help him grasp a better understanding of how this will work best. The only issue is this is how he has it mapped out to work in his head and he does not have much time at all to do anything else besides focus on his other responsibilities and us meet the new deadline set by the executives.
Netty AdminNetwork Administrator

Author

Commented:
Going to call it a night and revisit this tomorrow morning after I speak with him. I hope you will possibly be around. I really appreciate your help.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
No worries. I'll be around tomorrow :)
Netty AdminNetwork Administrator

Author

Commented:
cool.

Morning Chris,

Question. So when I send the curl call to his custom azure URL and he receives the UserID, uses it as a trigger to pull the rest of the user’s info and then initiates second separate curl call to the third party , can my curl call stay open until his second curl call gets the response and can then his second curl call forward it’s response to my first curl call’s $response variable? he told me that he does not think the first call can remain open while his logic initiates another call and gets another response. Is it possible for mine to remain open while his separate new call grabs the URL?
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Morning Netty (afternoon here),

Absolutely - your curl request will wait for a response. It's as simple as that. What goes on at the other end is irrelevant. YOU get to specify how long YOU'RE willing to wait for a response from the remote server with the CURLOPT_TIMEOUT. Your code above sets this to 0, meaning "wait for as long as needed". There is a different setting related to how long PHP scripts are allowed to run for, so by setting your CURL timeout to 'forever' doesn't actually mean forever - your PHP script would timeout before that.

CURLOPT_TIMEOUT => 0,

When you make a curl request, you have the option of receiving data back from the remote server. In your case, you make your CURL request  to a remote server (his Azure method), and you wait for a response. When that response comes in, it gets stored in your $response variable.

At his end, he will receive your POST data, pull the User's info, and make his own curl request to WorldPay. He will wait for a response from WorldPay and assign the result to his own variable. He can then manipualte that variable however he likes, and do whatever he likes with it (save some info to a database for example). He then just builds his response to send back to you - which as we pointed out above - will be stored in your $response variable. At this point, you're curl request has now finished and your code will continue to run.
Netty AdminNetwork Administrator

Author

Commented:
Ok he wants me to get the button created and do an official POST to his URL for testing. He got my postman data as follows and says this is perfect

 


{"UserID":555}  <-----This is what I sent

Below is This is the response he got from postman in azure




Now I need to create my "Add Card" button that runs this curl call and sends him this data. This is the first step he would like me to complete so we then can do testing from that point forward.
Netty AdminNetwork Administrator

Author

Commented:
So do I add this code to my current php script or create a new one

<?php
$userId = get_current_user_id();
$postData = [
    'UserID' => $userId,
];

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://weburl.com",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_TIMEOUT => 0,
  CURLOPT_HTTPHEADER => array(
    "Authorization: Basic Tc1NGRmOTpjc185ZmE3MmU2NWFmNmYwMTczN2NkMzcwNmMzMmI5NjAZjYy"
  ),
  CURLOPT_POST => true,
  CURLOPT_POSTFIELDS => $postData, 
));

$response = curl_exec($curl);
curl_close($curl);
Also do I need to use that same authorization key.....and how do we do the syntax on this code to send him it in JSON form, something like what you mentioned before with this putting it into JSON form "echo json_encode"

We will make the button with javascript and/or jquery, right?


Netty AdminNetwork Administrator

Author

Commented:
He is telling me we need to change it up slightly.

He says he needs all three of these from me

userID,
zipcode,
username

I know how to get the userid via get_current_user_id() with woocommerce, going to have to lookup how to pull the others

Netty AdminNetwork Administrator

Author

Commented:
and he needs the email...
So I know how to get the user object with
get_current_user_id()

I am now researching how to pull the rest of the info he needs from the woocommerce account.
This is exactly what he needs

{
    "userID":123,
    "zipCode":12345,
    "userName":"customer2256629",
    "email":"testtest@email.com"
}


Netty AdminNetwork Administrator

Author

Commented:
a variation of the same way we are currently pulling the "order_url_string"

$url = get_user_meta($current_user, 'order_url_string', true);
except now I need to ask for the following user meta info

userID,
zipcode,
username
email

So I am thinking now I need to make a variable for each attribute

something like
$email = get_user_meta($current_user, 'contact_email', true);
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
OK, but for the record, if feels very much like you're doing everything the wrong way around. If that's the way you want to work, then so be it.

First off, it seems like hte decision on what data to send has been left to your rather than the API author, so you need to decide whether you want to send Form data or JSON data to the endpoint. The POST request you have above is sending JSON. The Curl code we used earlier was send Form data. As you're being given the decision, it doesn't really matter which one you choose, but you do need to choose one or the other as it will affect the code we write.

Now for a quick suggestion - if I were coding this, I would forget about writing all the code needed for the button at this poit - that's just white noise and adds complications to the process. I would simplify it down to it's basic parts, and at this point - we're talking about a simple Curl request.  I would write a simple PHP script (a single file) that emulates the curl request that you'll eventually be sending,  This way we can focus on just getting that bit sorted (you'll be able to copy it into your full implementation later on) but this is the quickest and cleanest way to move forward, in my opinion. Once you and your co-worker have agreed that communication between the 2 points is wokring, we can move on.

Just create a simple file in the root of your wordpress folder and call it curl.php. Add the following:

<?php
$postData = [
    'email' => 'eve.holt@reqres.in',
    'password' => 'pistol'
];

$curl = curl_init();

curl_setopt_array($curl, [
    CURLOPT_URL => 'https://reqres.in/api/register',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_POSTFIELDS => json_encode($postData),
    CURLOPT_HTTPHEADER => ['Content-Type:application/json'],
]);

$response = curl_exec($curl);

var_dump(json_decode($response));

Open in new window

Open it up in your browser and check that you get a proper response - you should see an ID and Token. Once you know that's working, change the postDat to the following:

$postData = [
    'UserId' => 1234,
];

and change the URL to your API end point. You may need to add in your Auth header to get it to work. Refresh the page and see what you get back. Now you have a really siple script that you can edit/debug without all the additional noise of trying to run it through WordPress
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Ha - we cross posted again. My response was to one of your previous comments.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
The code above shows you how to send the data across as JSON. We add a contenttype header and json_encode the data array
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Yes - the Add Card button will have a Javascript event bound to it (probably with jQuery). This will then make an AJAX request to your server, which in turn will fire the curl request to your API endpoint.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
For the info you need, look at the wp_get_current_user() method:

$user = wp_get_current_user();
$id = $user->ID;
$email = $user->user_email;
$username = $user->user_login;

Open in new window

Don't know where or how you're storing the Zip, so you may need to get at the meta info for that.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Regarding the Auth key, you'll need to talk to your co-worker about how he's implementing authorisation. It may be that he's authorised that specific key indefinitely, so you can continue to use it.
Netty AdminNetwork Administrator

Author

Commented:
when I run that syntax you posted I get a NULL response but when I code it like this with the curl_close and echo I get a response.
also this CURLOPT_HTTPHEADER field is different with yours an the one my coworker gave me





Netty AdminNetwork Administrator

Author

Commented:
idk, its weird, it looks like one of them went through and he received the JSON data as such



I do not know if that was the first one I did where I got the NULL response with your script. I can not seem to replicate it now, I was playing around with different syntax and idk.....even if I go back to exactly what you gave me it still gives me the authorization error instead of "NULL" and he is not seeing any more data come in.
Netty AdminNetwork Administrator

Author

Commented:
idk know which variation in the code worked but he apparently has not seen another one for over an hour now and I have been playing with it the whole time 
Netty AdminNetwork Administrator

Author

Commented:
Its working! ….Well, turns out there was some sort of permission issue with running it from root or idk, but at this point the test script is working well when I run it from a sub folder. I also think there may have been some issues with defining the variables from root. I do not know enough about this stuff to be playing in the root so I am going to stay out of there for now.

We know he is getting the data with the test script as follows

<?php
$postData = [
    'email' => 'test888_new_url_num2@test.com',
    'password' => 'howaboutnow'
];
$curl = curl_init();
curl_setopt_array($curl, [
    CURLOPT_URL => 'https://prod-95.eastus.logic.azure.com/workflows/6b0a7bd18d036c2638/triggers/manual/paths/invoke?api-version=2016-10-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=EnzXOmh5W7cDKlDVi0IN_7SayDY',
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_TIMEOUT => 0,
    CURLOPT_POSTFIELDS => json_encode($postData),
    CURLOPT_HTTPHEADER => ['Content-Type:application/json'],
]);
$response = curl_exec($curl);
var_dump(json_decode($response));

?>

getting a NULL response from him because he does not have that setup yet. He has figured out a way to send me back the URL via the response as well. Now I need to build the button and also call user's details and send it via JSON to him
Netty AdminNetwork Administrator

Author

Commented:
So this is how the wp_get_current_user() method works for WordPress?
$user = wp_get_current_user();
$id = $user->ID;
$email = $user->user_email;
$username = $user->user_login;
So all I am needing to figure out how to pull the billing zip
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Excellent stuff Netty,

I know it probably feels like quite slow progress, but there are a lot of moving parts to your requirements, and from a development point of view, it makes sense to break these down into managable testable chunks. If we tried to get the button working to make an AJAX request to your server which in turn makes a curl call to the API, then there are several different parts that could fail, and you'd have no idea which part was failing

When I talk about root, I'm simply talking about the same folder that your wordpress index.php file is in - this is what I refer to as the root of your app.

Right. The next part we want to look at is getting a button on your page, and hooking that up to a javascript function. This might get a bit complicated because there are several files to create and edit and we'll be doing PHP and Javascript.

First thing - you need a button on your Checkout page. You may already have this, so I'll skip the details. Basically, you want a simple button with a class you can use to hook into, something along these lines:

<button class="get_order_url">Add Card</button>

Next we need to create a new JS file. For ease, we'll start of by putting this in your theme folder (hopefully you'll know which one that is). Create a file called handle_order.js (these filenames I'm suggesting aren't set in stone so you can change them if you prefer). The content will look like this:

jQuery(document).ready( function($) {
    $('.get_order_url').on('click', function(e) {
        e.preventDefault()
        alert('About to get the Order URL')
    })
})

Open in new window

Hopefully this simple file makes sense (we'll be editing it later on!)

Now you need to enqueue your script. Easiest way is to do this in your functions.php file within your theme. Add the following to that:

add_action( 'wp_enqueue_scripts', 'netty_order_scripts', 15 );
function netty_order_scripts() {
        wp_register_script( 'netty_order_scripts', get_stylesheet_directory_uri() . '/handle_order.js', array('jquery') );
        wp_enqueue_script( 'nettty_order_scripts' );
}

Open in new window

What we've done upto this point is add a button to your checkout page, create a script that binds to the click event of that button and loaded up your script into your WordPress site. If everything has been done correctly, load up your Checkout page and you shold see the button. Click on it and you'll get the alert.

If you get that bit working, we'll move on to making writing the AJAX handler and making the AJAX call to the server.
Netty AdminNetwork Administrator

Author

Commented:
Thank you very much for all of this.

 I can just add the JavaScript and the PHP via hooks like we have been doing for the other tasks we accomplished with my other EE questions, right? Or do I need to put the script in the functions.php file for the theme and do I also need to create the new .js file instead of doing what I did before with the other questions? You asked me to do the same before and it all ended up working fine using the WordPress interface and hooking in.

Yes I know what you meant as far as adding the file to the root. I used an FTP client to add it to the root directory where the index.php file was located. This part of the site runs off of a different subfolder and I used that one and it worked every time from there.

I know it was a separate php file but I was worried that it may define variables for the whole site as I do not fully understand how it all works yet.

Also, I now have access to the Azure backend so I can see what is being received by his listener for testing purposes

***Also, we have determined that alerts are blocked by this instance of WordPress so maybe something else like a console log of some sort would be a good test

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Cool,

You can add the Javascript by a different hook if you'd prefer. I tend to enqueue a seperate file because it gives me a nice separation of concerns (posh phrase for 'everything in it's place'). It also means that Javascript is enqueued correctly and put in the correct place on the page (i.e the footer). If you have it all in it's own file, it makes future editing a bit easier to. As for the PHP part (which we'll get to next, you really need this in the functions.php file. Ideally, it should probably go in a custom plugin, but that's more complicated, so we'll stay away from it for now!). The PHP code will be hooked to the AJAX call shortly.

And Yes - doing a console.log instead of an alert is perfect. I only suggested the alert because some people don't know what the console is, so an alert can be more 'in your face' and obvious :)

Great news that you've now got access to Azure - life gets so much easier when you can see both sides of the 'conversation'.

Once you've got this button dumping to the console, we'll add in the JS for the AJAX call, and the PHP for the AJAX handler.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Actually, something I've just thought of. Adding the JS through a hook will actually make life quite a bit more difficult, because we need to enqueue another part of JS at the same time, called the localized script. Gonna be easier if you just create a new file and enqueue like I said above. As we move on, hopefully it become clearer as to why this is a better approach
Netty AdminNetwork Administrator

Author

Commented:



^^^^FTP view
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
That's a folder for a plugin. Not really what we're editing here. When I said about putting it in a plugin, I meant writing your own custom plugin to hold all the functionality. More complicated than the way we're doing it, so maybe something for the future
Netty AdminNetwork Administrator

Author

Commented:
Ok, Well where should I traverse to within the FTP client?

Or should I do it from the WordPress web interface?

If so I will have to dig around and find where to put them.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
The easiest way is by using your theme folder. From that screenshot, head up 2 folder until you're in wp_content. Then open up the Themes folder and then open up your theme folder. I'm guessing [hoping] you're using a child theme. Once you're in your theme folder, you'll see your a functions.php file. That where you need to put the PHP code. And that's where you need to create your js file.

I'm also guessing that the function,php file is where you previously edited to add in the hook fom your last question.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
You most likely can't do any of this from the WordPress interface - that's more for Users than Developers.
Netty AdminNetwork Administrator

Author

Commented:


There seems to be several themes


Netty AdminNetwork Administrator

Author

Commented:
Cross posted.….Ok I am going to check the FTP folders for it
Netty AdminNetwork Administrator

Author

Commented:


Netty AdminNetwork Administrator

Author

Commented:

Looks like it can be edited from the WordPress interface but probably simpler to use FTP....Now I am trying to figure out which theme it is.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Ahhh - forgot about that access to edit themes - never use it :)

I'm guessing the theme your site is using is the fixology-child. From the left menu in WordPress admin, select the Appearance | Themes menu and it will show you which one is active.
Netty AdminNetwork Administrator

Author

Commented:
Yes you are correct. It says the fixology-child theme is active
Netty AdminNetwork Administrator

Author

Commented:
I am confused because there does not appear to be much in this theme at all compared to the others

Netty AdminNetwork Administrator

Author

Commented:


Netty AdminNetwork Administrator

Author

Commented:

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Don't worry about the amount of files in there. A child theme inherits from the parent theme, so most of your site will actually come directly from the main fixology theme. A child theme contains the bits that need overriding in the parent. The idea of a child theme is that you can make changes here, and when the parent theme is updated, you won't lose your changes. That's why we use Child Themes and why we should never edit the Parent Themes
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
That fixology-child folder is where you need to create your new js file and edit the functions.php file.
Netty AdminNetwork Administrator

Author

Commented:
Thank you for explaining that. Also thank you for helping me understand the whole process here and giving me the ideas to bounce off my coworker. He was happy to come up with a way to make the idea work, he had to actually do it with a powershell script on the azure side and it is not fully complete but all should come together soon. Once I have all of these first parts working I will report back. Hopefully you will be around tomorrow. I feel like I have learned a lot and am excited to get this worked out.
Netty AdminNetwork Administrator

Author

Commented:
Hey Chris,
It appears that my Javacript file is not being loaded on the checkout page when placing it inside that fixology-child theme.

I created a class and an ID for it so I can be very specific in the selector as we ran into issues before with this with the other JScript we created. Even if I comment out everything I do not even get a console log message to indicate the script is being used. Also when I did a "find" search for it when viewing the source I do not see any reference to it in the source code.


Netty AdminNetwork Administrator

Author

Commented:
oh maybe I need to create the js folder and put it in there

Netty AdminNetwork Administrator

Author

Commented:
Well, even after putting it in a js folder it still is not seeing it
Netty AdminNetwork Administrator

Author

Commented:

CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hey Netty,

I can't remember how we added the Javascript code last time around, but as you're using a child-theme, it should be done in the child theme's functions.php file. It looks from the screenshot above that you don't have a functions.php file, so you might have to create it. Can you remind me how you added the javascript last time around
Netty AdminNetwork Administrator

Author

Commented:
There is a functions.php file in the child theme but it is not showing on the view source



This is how I added it before, with the snippet feature within WordPress


Netty AdminNetwork Administrator

Author

Commented:
I can add it to the footer hook or this same hook

Netty AdminNetwork Administrator

Author

Commented:
I have it hooked in at the footer now and it does the console log when I have everything commented out but I am having trouble getting the script to control the button.  Something weird is happening, the button is actually doing the same function as the "place order" button that we have hidden by default and it only unhides after the cc info is entered in correctly with the scripts we setup before... this new button is not hidden but it is acting just like the place order button and performing the place order actions….Even with the new class and id assigned to the button the button is passing the order through without any other parameters being met
Netty AdminNetwork Administrator

Author

Commented:




When I comment out everything besides console.log it displays the message in the console but I am unable to control the button and get a message when clicking the button. When I click the button it actually moves the user to the next page as if I clicked the place order button and the transaction was a success.
Netty AdminNetwork Administrator

Author

Commented:
if you look at the code for the current "Place Order" button it is written different compared to our simple button above it



Does it need the type and other attributes set?
Netty AdminNetwork Administrator

Author

Commented:
This is how I have the button coded in, maybe it is inheriting parameters from the parent div but I thought the specific selector would override that



CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hmmm. From the screenshots you've posted, it 'looks' right, but you're doing things in a very different way to the 'standard', and certainly different to how I do it. Your injecting scripts straight into your page. The way that WordPress expects your scripts to be added is considered best-practice is to enqueue them.

Just an idea to try something a little different. Change your JS Event binding to this instead:

$('#payment').on('click', '#get_cc_order_url.get_cc_order_url', function(e) {
    e.preventDefault()
    console.log('Just Testing the Payment Scripts')
})

Open in new window

It's doing exactly the same as before, it's just delegating the event to different element.
Netty AdminNetwork Administrator

Author

Commented:
Still nothing in the console but still performing the other actions. It is weird as it is doing everything the  "Place Order" button is supposed to do and we did not tell it to do any of that. The common denominator that sticks out to me is the fact that both buttons are within the #payment div.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
That shouldn't matter because you've added a unique class to it, so it should only be binding to that button. It does seem strange that the button is firing a completely different set of functions. Something's clearly wrong.

One other to try quickly (debugging is often a trail and error process). Change your <button> to a link, with the same id and class as before. Our Javascript doesn't care whether its a button, a div or link - we're just binding a Click event to it (or trying to):

<a href="error.php" id="get_cc_order_url" class="get_cc_order_url">Click Me Now!</a>

I've intentionally put a bad href in there. If the binding works, that won't matter. If you click and your site tries to navigate to error.php. hen we know we're not getting the binding at all.
Netty AdminNetwork Administrator

Author

Commented:
Yes the binding is not working, It is attempting to go to the bad link.
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Ahhhh! The reason we laod up scripts in a specific way (according to WordPress guidelines and best-practice) is to hopefully avoid this kind of problem. Without seeing your site 'in-action' I can't be sure what the problem is - like I say, the screenshots look right. If you don't get the Javascript loaded in the right order, then things can easily break. The problem you're having seems to be that you're attempting to bind to an element on your page before it exists, which will fail.

Without using your site, I can't see how and when the #payment div is being injected into the DOM - if this part is deferred, then we'd need to change the JS to delegate the event binding to a different element. Do you have a test site set up that I could take a look at (PM me if needed).

Once we can establish the binding, I would suggest that we tidy up your existing code to make sure you're doing things in the standard way. This would keep things nice and clean and avoid any unexpected behaviour.
Netty AdminNetwork Administrator

Author

Commented:
Chris,
then why would it work when using the same method to select the "Place Order" button which we accomplished here:

Netty AdminNetwork Administrator

Author

Commented:
at his moment we have not edited any other code on the website, all coding has been done through the platform
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Because in that code, the only event we're binding to is on the window object, and that will always exist (it has to exist in order for there to be a <script> tag in the first place. When you bind events in Javascript, you can only bind them to elements that actually exist at the time the code is called. It seems (and I'm guessing here) that we're trying to bind an event to the #payment div BEFORE it exists, so the binding will fire and do nothing, because it can't find the 'payment div. My guess is that the payment div is being dropped into the DOM AFTER we've tried binding to it.

It's all about timing and making sure we do things in the right order. Without being able to se you site in action, I can't be sure that we are. I don't know how your #payment div is getting into the page or at what point.
Netty AdminNetwork Administrator

Author

Commented:
Cool, ok I see what you are saying. The part that is confusing is that the Place Order button is also in the #payment div and I used the same hook to insert the JScript that controlled it so It seems to me that the Place Order button would be dropped into the DOM at the same time as the link/button we are creating vice/versa

Ohh, ok, I now see what you mean....we are hooking in so it is not a window object that is already in place, so the button and the link are dropped in the DOM after the hook...….I am trying to figure out how to get to the page directly via FTP to add the button that way although it is confusing in the file structure

idk still confused but I kinda see what you are saying. I will understand more when I learn more.


I PMed you the info
Netty AdminNetwork Administrator

Author

Commented:
Been researching the DOM structure and how JavaScript accesses\uses it to manipulate the document. Also playing around with the inline onclick method.....I see we can add a JavaScript function directly inline with the button.....Played around and just did a test console.log but was thinking of the potential options and uses for embedding a function directly into the button.....
Still also trying to figure out how to properly select this button
Netty AdminNetwork Administrator

Author

Commented:
The button is definitely inheriting css and other stuff from it's parents because not only is it performing the function of the "Place Order" button but it is also inheriting its looks


CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
Hey Netty,

Yeah - it will inherit the styles, depending on how you've set up your Stylesheet - this is something that you usually want. It won't inherit the behaviour though (Javascript). Gonna take a look at your site now ...
Netty AdminNetwork Administrator

Author

Commented:
Thank you Chris,

 The part that gets me is that we used the other JavaScript to select and manipulate the iFrame we created with the same PHP hook.....So this button is being created in the exact same spot and same loading time as was the iFrame. From my perspective it appears that the button should be in the exact same part of the DOM structure as was the iFrame and we had no problems displaying/hiding the iFrame.
Netty AdminNetwork Administrator

Author

Commented:
Maybe it has to do with the Hook I am using since that hook is "before_submit" maybe I should use the "before_payment" hook instead. 
Netty AdminNetwork Administrator

Author

Commented:

Netty AdminNetwork Administrator

Author

Commented:
I found another spot that js code can be put in for the child theme





Netty AdminNetwork Administrator

Author

Commented:
^^^haven't saved it yet because you were checking out the site but maybe this will help....lmk
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Netty AdminNetwork Administrator

Author

Commented:
ok, cool, thanks. I am going to try this and report back here shortly
Netty AdminNetwork Administrator

Author

Commented:
Ok its, done, testing the button now
Netty AdminNetwork Administrator

Author

Commented:
does the js need to be in a js folder in the child theme folder or just straight in the child theme root?
Netty AdminNetwork Administrator

Author

Commented:
I put it in the root of the child theme folder and it works!!!! 
Netty AdminNetwork Administrator

Author

Commented:
nice!!!
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
For now, just drop it straight in the child theme folder.

If you move the button placement, make sure you update the JS, because the button may not be in the #payment div, so the JS selector won't work
CERTIFIED EXPERT
Most Valuable Expert 2018
Distinguished Expert 2019

Commented:
YES !!!!!

Finally, some progress :)
Netty AdminNetwork Administrator

Author

Commented:
Super smart and very responsive. Helped me out major again.
Netty AdminNetwork Administrator

Author

Commented:
Breaking the rest of this up into more questions because there are multiple moving parts and will be best to handle them one at a time. Much appreciated.
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.