I'm attempting to make a POST request to an API. I've created a javascript file in my theme and i have tried two approaches so far:
Approach 1:
$.ajax({
headers:{
"Content-Type":"application/json"
},
data:{
"command": "request",
"data": {
"api_key": "my_api_key",
"api_username": "my_api_username",
"vendor_type": 2,
"from": {
"from_name": "",
"from_lat": "",
"from_long": "",
"from_description": ""
},
"to": {
"to_name": customerLocation,
"to_lat": cityLat,
"to_long": cityLng,
"to_description": ""
},
"recepient": {
"recepient_name": name,
"recepient_phone": phone,
"recepient_email": email,
"recepient_notes": ""
},
"delivery_details": {
"pick_up_date": pickupdate,
"collect_payment": {
"status": false,
"pay_method": 0,
"amount": amountTotal
},
"return": true,
"note": " Sample note",
"note_status": true,
"request_type": "quote"
}
},
"request_token_id": requestToken
},
type: 'POST',
url:"https://apitest.sendyit.com/v1/",
success: function(response){
console.log('success');
console.log(response);
},
error: function(response){
console.log('error');
console.log(response);
}
});
The above code will not return a response payload from the API as any call will be blocked because of CORS(Cross-Origin Resource Sharing)
Approach 2
I then attempt to pass the endpoint to my functions.php
file as follows:
//make api call to sendy
function foo()
{
echo 'https://apitest.sendyit.com/v1/';
}
add_action('wp_ajax_foo', 'foo' );
add_action('wp_ajax_nopriv_foo', 'foo' );
I declare an ajaxUrl
variable in my theme's header.php file:
<script type="text/javascript">
var ajaxUrl = "<?php echo admin_url('admin-ajax.php'); ?>";
</script>
Then format my Ajax call as shown below:
$.ajax({
headers:{
"Content-Type":"application/json"
},
data:{
"action": 'foo',
"command": "request",
"data": {
"api_key": "my_api_key",
"api_username": "my_api_username",
"vendor_type": 2,
"from": {
"from_name": "",
"from_lat": "",
"from_long": "",
"from_description": ""
},
"to": {
"to_name": customerLocation,
"to_lat": cityLat,
"to_long": cityLng,
"to_description": ""
},
"recepient": {
"recepient_name": name,
"recepient_phone": phone,
"recepient_email": email,
"recepient_notes": ""
},
"delivery_details": {
"pick_up_date": pickupdate,
"collect_payment": {
"status": false,
"pay_method": 0,
"amount": amountTotal
},
"return": true,
"note": " Sample note",
"note_status": true,
"request_type": "quote"
}
},
"request_token_id": requestToken
},
type: 'POST',
url:ajaxUrl,
success: function(response){
console.log('success');
console.log(response);
},
error: function(response){
console.log('error');
console.log(response);
}
});
But this is giving me a 400 (Bad Request)
error.
I should mention that i have correctly set up my javascript file in the functions.php
file:
wp_enqueue_script('sendy', get_template_directory_uri() . '/assets/js/sendy.js', array('jquery'));
wp_localize_script('sendy', 'wc_checkout_params', array('ajaxurl' => admin_url('admin-ajax.php')));
Would like therefore to request for assistance in setting up my POST endpoint.