Sending JSON over AJAX to PHP script - javascript

I am attempting to create a method to take a CSV file, parse it into JSON, then send it to BigCommerce using their REST API. Initially I was going to use Javascript to do the whole thing, and everything up until actually connected to BigCommerce to PUT the data worked. BigCommerce doesn't allow CORS, resulting in a 401 response from the server and none of my data actually being sent. Because of this, I was going to switch to do it with PHP but being able to get the specific JSON object is much harder than it was with Javascript. The solution I've come up with would be for me to parse the data in Javascript, send it line by line to the PHP script and the PHP script would then connect to BigCommerce and send it for me.
First off, is this possible?
Here is some of my Javascript code:
$(document).ready(function () {
$('[type=file]').change(function () {
if (!("files" in this)) {
alert("File reading not supported in this browser");
}
var file = this.files && this.files[0];
if (!file) {
return;
}
i=0;
Papa.parse(file, {
delimiter: ",", // auto-detect
newline: "", // auto-detect
header: true,
dynamicTyping: true,
preview: 0,
encoding: "",
worker: false,
comments: false,
step: function(results, parser) {
console.log("Row data:", results.data);
console.log("Row errors:", results.errors);
currentID = results.data[i]["id"];
currentResult = results.data[i];
sendToBC(currentID, currentResult);
i+1;
},
complete: function(results, file) {
console.log("Parsing complete:", results, file);
$("#parsed_JSON").css("display", "block");
$("#ready_btn").css("display", "block");
$("#select_file").css("display", "none");
$("#retry_btn").css("display", "block");
},
error: function(error, file) {
console.log("Parsing failed:", error, file);
alert("Parsing failed. Check file and refresh to try again.");
},
download: false,
skipEmptyLines: true,
chunk: undefined,
fastMode: undefined,
beforeFirstChunk: undefined,
withCredentials: undefined
})
});
function sendToBC(id,data) {
jQuery.ajax({
type: "PUT",
url: "https://store.mybigcommerce.com/api/v2/products/" + id + "/discountrules.json",
data: data,
xhrFields: {
withCredentials: true
},
headers: {
'Authorization': 'Basic ' + btoa('username:key')
},
dataType:"json",
async: false,
success: function() {
alert("success")
},
error: function(xhr, status, error) {
console.log(error);
}
});
}
You'll notice I had to do something weird with the i=0 and the i+1 in the middle of the papa code but that was because I couldn't do a for loop in the step function.
My php is just the basic curl functions:
$ch = curl_init();
curl_setopt( $ch, CURLOPT_URL, $api_url );
curl_setopt( $ch, CURLOPT_HTTPHEADER, array ('Accept: application/json', 'Content-Length: 0') );
curl_setopt( $ch, CURLOPT_VERBOSE, 0 );
curl_setopt( $ch, CURLOPT_CUSTOMREQUEST, 'PUT');
curl_setopt( $ch, CURLOPT_SSL_VERIFYPEER, 0 );
curl_setopt( $ch, CURLOPT_USERPWD, "username:key" );
curl_setopt( $ch, CURLOPT_SSL_VERIFYHOST, 0 );
curl_setopt($ch, CURLOPT_POSTFIELDS, $complete);
curl_setopt( $ch, CURLOPT_RETURNTRANSFER, 1 );
$response = curl_exec( $ch );
curl_close ($ch)
I dont have the most experience with PHP especially with passing values into it through AJAX, so any help would be great. I'm not really certain how passing values between the files really works and how I can send this data to the PHP the best way programatically.
Thanks.

Considering you get an string object like {"id": "77", "min": "1", "max": "6", "price": 10}. and you want to retrieve id (77) from the JSON object.
$str = '{"id": "77", "min": "1", "max": "6", "price": 10}';
$jsonObj = json_decode($str);
$jsonObj->id; // the id.
Here $jsonObj->id is the id via which you can call your API.

Alright, so the way I ended up doing it was just using PHP and building a JSON string on my own with the values retrieved from the array by their key. So I did:
contents[$i]['id']
to get the id of the current item and stored it in a variable and did that for all the other columns of the csv. Then I built a string like this:
$jsonObject[] = '{"min": '.$min.',"max": '.$max.',"type": "'.$type.'","type_value": '.$value.'}';
and sent it through the API to Bigcommerce using CURL.

Related

How can i implement paypal checkout v2 server side / JS sdk

I'm trying to make an implementation for paypal using checkout.js, however, i need to store the details of the transaction once the payment it's completed but first, i'm having trouble getting the button values from the server side, my code goes as follows:
<script>
paypal.Buttons({
// Order is created on the server and the order id is returned
// Call your server to set up the transaction
createOrder: function(data, actions) {
return fetch('php/create.php', {
method: 'post'
}).then(function(response) {
return response.json();
}).then(function(orderData) {
return orderData.id;
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
// Call your server to save the transaction
return fetch('/paypal-transaction-complete.php', {
method: 'post',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify({
orderID: details.id
})
});
});
}
}).render('#paypal-button-container');
</script>```
<?php session_start();
// PayPal configuration
define('PAYPAL_CONFIG', [
'URL' => "https://api-m.sandbox.paypal.com/",
'CLIENT_ID' => 'xxx',
'SECRET' => 'xxx',
]);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, PAYPAL_CONFIG['URL'] . "v2/checkout/orders");
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_USERPWD, PAYPAL_CONFIG['CLIENT_ID'] . ":" . PAYPAL_CONFIG['SECRET']);
curl_setopt($ch, CURLOPT_POSTFIELDS, "grant_type=client_credentials");
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json'
]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$data = [
"intent" => "sale",
"redirect_urls" => [
"return_url" => "http://localhost:8888/index.php",
"cancel_url" => "http://localhost:8888/index.php"
],
"payer" => [
"payment_method" => "paypal"
],
"transactions" => [
[
"amount" => [
"total" => $_SESSION['price'],
"currency" => "USD"
]
]
]
];
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$response = curl_exec($ch);
$httpStatusCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
$result = json_decode($response, true);
if (json_last_error() !== JSON_ERROR_NONE) {
error_log("Invalid JSON response: " . json_last_error_msg());
var_dump($httpStatusCode);
return false;
}
if (!$result) {
error_log("cURL request failed with HTTP status code: " . $httpStatusCode);
var_dump($httpStatusCode);
return false;
}
return $result;
Whenever i try to click the paypal button, i keep getting a console error saying that Error: Unexpected end of Json input and closes the paypal window almost immediately
I've tried debbuging with several methods but i can't get it working, any suggestions?
(That code is not for checkout.js , which is older and deprecated ; you're using the current PayPal JS SDK)
Anyway, this issue:
Error: Unexpected end of Json input
Occurs when your server-side code is outputting something other than a purse JSON string, such as a var_dump or other echo statement. Your create and capture routes must output only a JSON string, never any other text or HTML.
You can get a log of the response being outputted to the XHR request in your browser's dev tools -> Network tab.

PHP call not returning API data

I'm using this link to obtain Air Quality data from an API https://api-ninjas.com/api/airquality
I want to do this via PHP due to it being a requirement
I have my PHP file
<?php
// Display errors is set to on and should be removed for production
ini_set('display_errors', 'On');
error_reporting(E_ALL);
// Timing script execution
$executionStartTime = microtime(true);
$url='https://api.api-ninjas.com/v1/airquality?city=' . $_REQUEST['countryName'];
// Curl object is initiated
$ch = curl_init();
//Curl_setopt() takes three parameters(Curl instance to use, setting you want to change, value you want to use for that setting)
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);
$result=curl_exec($ch);
curl_close($ch);
$decode = json_decode($result, true);
$output['status']['code'] = "200";
$output['status']['name'] = "ok";
$output['status']['description'] = "success";
$output['status']['returnedIn'] = intval((microtime(true) - $executionStartTime) * 1000) . " ms";
$output['result'] = $decode['result'];
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($output);
?>
and then my JavaScript Function
function getAirQuality(countryName) {
$.ajax({
method: 'GET',
url: "assets/php/getAirQuality.php",
data: {
countryName: countryName
},
headers: {
'X-Api-Key': 'API_KEY'
},
contentType: 'application/json',
success: function(result) {
console.log(result);
$('#aqCO').html(result['CO']['concentration'] + ' ppm');
$('#aqSO').html(result['SO2']['concentration'] + ' ppm');
$('#aqO3').html(result['O3']['concentration'] + ' g/m3');
$('#aqNO2').html(result['NO2']['concentration'] + ' ppm');
$('#aqPM2').html(result['PM2.5']['concentration'] + ' µg/m3');
$('#aqPM10').html(result['PM10']['concentration'] + ' µg/m3');
},
error: function ajaxError(jqXHR) {
console.error('Error: ', jqXHR.responseText);
}
});
}
However, the PHP file keeps complaining in the console Error: <br /> <b>Warning</b>: Undefined array key "result" in <b>C:\xampp1\htdocs\project1\assets\php\getAirQuality.php</b> on line <b>30</b><br /> {"status":{"code":"200","name":"ok","description":"success","returnedIn":"293 ms"},"result":null}
As you can see from the above website, the result should be like so
{
"CO": {
"concentration": 223.64,
"aqi": 2
},
"NO2": {
"concentration": 9.08,
"aqi": 11
},
"O3": {
"concentration": 26.46,
"aqi": 22
},
"SO2": {
"concentration": 0.78,
"aqi": 1
},
"PM2.5": {
"concentration": 4.04,
"aqi": 13
},
"PM10": {
"concentration": 6.23,
"aqi": 5
},
"overall_aqi": 22
}
I'm not sure what else it could be? I've tried result, results and data
UPDATE
So whilst I've got the data decoded fine
result
:
CO
:
{concentration: 223.64, aqi: 2}
NO2
:
{concentration: 19.71, aqi: 24}
O3
:
{concentration: 52.93, aqi: 44}
PM2.5
:
{concentration: 11.67, aqi: 37}
PM10
:
{concentration: 14.61, aqi: 13}
SO2
:
{concentration: 1.97, aqi: 2}
overall_aqi
:
44
I am trying to assign them to variable like so: $('#aqCO').html(result['CO']['concentration'] + ' ppm'); but it is returning Uncaught TypeError: Cannot read properties of undefined (reading 'concentration')
You can pass headers by creating an array and passing it via: CURLOPT_HTTPHEADER
$headers = ['X-Api-Key: API_KEY'];
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_URL, $url);

Access to REST API from JS

Need access to REST API from JS code, using jQuery ajax:
function tryQwintry () {
var data = {
"params[weight]" : "100",
"params[dimensions]" : "100x100x100",
"params[delivery_pickup]" : "msk_1",
"params[insurance]" : "false",
"params[items_value]" : "350",
"params[retail_pricing]" : "1"
};
$.ajax({
url: "http://logistics.qwintry.com/api/cost",
type: "POST",
dataType: "jsonp",
contentType: "application/json",
headers: {"Authorization":"Bearer " + MY_API_KEY},
data: data,
success: function (cost) {
console.log("стоимость доставки $"+cost);
},
error: getErrorMsg
});
}
Documentation of API (all examples are PHP):
<?php
define('SITE_URL', 'logistics.qwintry.com');
define('API_KEY', 'YOUR_API_KEY'); //don't forget to set your key!
$url = 'http://'. SITE_URL .'/api/cost';
$data = array (
'params' => array(
'weight' => 5, // in lb
'delivery_pickup' => 'msk_1', // full list of pickup points can be retrieved from /api/locations-list
'insurance' => true,
'items_value' => 500, // declaration items total cost in USD
'retail_pricing' => true // retail / wholesale pricing?
),
);
$data_string = http_build_query($data);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Authorization: Bearer '. API_KEY));
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);
var_dump($response);
Same thing I've coded in Java:
public double getCostPickup(String weight, String dimensions, String toPickup, String insurance, String value) throws Exception {
Map<String, Object> params = new HashMap<>();
params.put("params[weight_kg]", weight);
params.put("params[dimensions_cm]", dimensions);
params.put("params[delivery_pickup]", toPickup);
params.put("params[insurance]", insurance);
params.put("params[items_value]", value);
params.put("params[retail_pricing]", RETAIL_PRICING);
String url = BASE_URL+"/api/cost";
HttpResponse<JsonNode> jsonResponse = Unirest.post(url).fields(params).asJson();
return getCost(jsonResponse, insurance);
}
Have problems with configuring data of ajax request.
So any help would be greatly appreciated.
UPDATE: Changed my JS code:
function tryQwintry () {
var data = {
"params[weight]" : "100",
"params[dimensions]" : "100x100x100",
"params[delivery_pickup]" : "msk_1",
"params[insurance]" : "false",
"params[items_value]" : "350",
"params[retail_pricing]" : "1"
};
$.ajax({
url: "http://logistics.qwintry.com/api/cost",
type: "POST",
dataType: "json",
contentType: "application/json",
headers: {"Authorization" : "Bearer"+MY_API_KEY, "Access-Control-Allow-Origin" : "true"},
data: JSON.stringify(data),
success: function (cost) {
console.log("стоимость доставки $"+cost);
},
error: getErrorMsg
});
}
Getting this error in Chrome's developers mode:
Are you using CORS request?
If no then change datatype to "json" instead "dataType: "jsonp".
if you are doing CORS then enable CORS request then you need to add the php code to allow CORS request.
header("Access-Control-Allow-Origin: *");
check this link CORS with php headers
Json data format:
var data = {
weight : 100,
dimensions : "100x100x100",
delivery_pickup : "msk_1",
insurance : false,
items_value : 350,
retail_pricing : 1
};
$.ajax({
url: "http://logistics.qwintry.com/api/cost",
dataType: "jsonp",
contentType: "application/json",
headers: {"Authorization":"Bearer " + MY_API_KEY},
data: JSON.stringify(data),
success: function (cost) {
console.log("стоимость доставки $"+cost);
},
error: getErrorMsg
});
Note: method: "POST" is not allowed with JOSNP

Use a PHP variable in Javascript / Ajax without showing in the inspect element

i want to send emails with de mandrill api. I have mi apikey in a php var but when i do var apikey='<?php echo$apikey;?>'; this shows in the inspect elemnt.
its posibble hide, encrypt or something the variable with php, javascript, ajax or json?
this is and example of my code:
<?php
$apikey='aaaaaaaaaaaaaa';
?>
<script type="text/javascript">
var apikey='<?php echo$apikey;?>';
sendEmail();
function sendEmail() {
$.ajax({
type: 'POST',
url: 'https://mandrillapp.com/api/1.0/messages/send.json',
data: {
'key': apikey,
'message': {
'from_email': 'FROM_EMAIL_GOES_HERE',
'to': [{
'email': $('.email').val(), // get email from form
'name': $('.name').val(), // get name from form
'type': 'to'
}
],
'autotext': 'true',
'subject': 'EMAIL_SUBJECT_GOES_HERE',
'html': "Hey *|COOLFRIEND|*, we've been friends for *|YEARS|*.", // example of how to use the merge tags
'track_opens': true,
'track_clicks': true,
}
}
}).done(function(response) {
console.log(response); // if you're into that sorta thing
});
});
</script>
You can setup a php service and use curl to do the transferring work. Then just have AJAX do the front end work and send the subject/body/etc to the php service.
#Lifz works great for me
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $uri);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true );
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true );
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $postString);
$result = curl_exec($ch);

curl and file_get_contents not work after ajax call

I'm trying to retrieve user's city info by using the coordinates. There is a javascript function that takes latitude/longitude and sends it across to a php file with ajax:
Javascript function
if (navigator.geolocation) { //Checks if browser supports geolocation
var Clatitude = "no";
var Clongitude;
navigator.geolocation.getCurrentPosition(function(position) {
Clatitude = position.coords.latitude;
Clongitude = position.coords.longitude;
$.ajax({
type: "POST",
url: "../wp-content/themes/Avada-child/test_BLZ.php",
data: {'latitudine': Clatitude,'longitudine': Clongitude},
success: function(data) {
console.log(data);
},
dataType: "JSON"
});
},
function(error) {
alert(error.message);
}, {
enableHighAccuracy: true,
timeout: 5000
});
}
Server side script written in PHP
<?php
$latitudine = $_POST['latitudine'];
$longitudine = $_POST['longitudine'];
$geolocation = $latitudine.','.$longitudine;
$request = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='.$geolocation.'&sensor=false';
$file_contents = url_get_contents($request);
echo ($file_contents);
function url_get_contents ($Url) {
if (!function_exists('curl_init')){
die('CURL is not installed!');
}
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $Url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$output = curl_exec($ch);
curl_close($ch);
return $output;
}
?>
The problem is that the response is not displayed in my console. I tried to ge the response with file_get_contents and still was not able to retrieve the response
Except for this, the rest of the code works fine. In fact as soon as I remove curl's stuff or file_get_contents from the php file, the rest of the code functions smoothly. I even managed to retrieve a (fake) response in ajax success function.
Can someone help? Thanks ;)
---edit
my curl execution time is very long, i run the same code on another server and these are the differences:
server with long curl execution time
{
   "url": "http://maps.googleapis.com/maps/api/geocode/json?latlng=45.644843,8.9986268&sensor=false",
   "content_type": "application/json; charset=UTF-8",
   "http_code": 200,
   "header_size": 377,
   "request_size": 119,
   "filetime": -1,
   "ssl_verify_result": 0,
   "redirect_count": 0,
   "total_time": 127.26954,
   "namelookup_time": 0.001964,
   "connect_time": 127.23926,
   "pretransfer_time": 127.239265,
   "size_upload": 0,
   "size_download": 11729,
   "speed_download": 92,
   "speed_upload": 0,
   "download_content_length": -1,
   "upload_content_length": 0,
   "starttransfer_time": 127.269424,
   "redirect_time": 0,
   "certinfo": []
"request_header":"GET \/maps\/api\/geocode\/json?latlng=45.644843,8.9986268&sensor=false HTTP\/1.1\r\nHost: maps.googleapis.com\r\nAccept: *\/*\r\n\r\n"
}
server with short curl execution time
{
   "url": "http://maps.googleapis.com/maps/api/geocode/json?latlng=45.644843,8.9986268&sensor=false",
   "content_type": "application/json; charset=UTF-8",
   "http_code": 200,
   "header_size": 377,
   "request_size": 119,
   "filetime": -1,
   "ssl_verify_result": 0,
   "redirect_count": 0,
   "total_time": 0.116182,
   "namelookup_time": 0.012194,
   "connect_time": 0.027452,
   "pretransfer_time": 0.027473,
   "size_upload": 0,
   "size_download": 11729,
   "speed_download": 100953,
   "speed_upload": 0,
   "download_content_length": -1,
   "upload_content_length": 0,
   "starttransfer_time": 0.114101,
   "redirect_time": 0,
   "redirect_url": "",
   "primary_ip": "172.217.**.**",
   "certinfo": [],
   "primary_port": 80,
   "local_ip": "192.168.**.**",
   "local_port": 51393
"request_header":"GET \/maps\/api\/geocode\/json?latlng=45.644843,8.9986268&sensor=false HTTP\/1.1\r\nHost: maps.googleapis.com\r\nAccept: *\/*\r\n\r\n"
}
What is the matter with my server? I notice that in the first case there aren't ip references!
As your response from server is not in in form of JSON, so you should not set dataType:"JSON" from AJAX call.
Please comment it out from AJAX call.
$.ajax({
type: "POST",
url: "../wp-content/themes/Avada-child/test_BLZ.php",
data: {'latitudine': Clatitude,'longitudine': Clongitude},
success: function(data) {
console.log(data);
},
//dataType: "JSON" <-- COMMENT this out
});
OR
Another option is that you should send JSON encoded response from server.
$file_contents = url_get_contents($request);
echo (json_encode($file_contents));

Categories

Resources