Empty $_POST array JS to PHP AJAX

No clue why this is happening, i have a form on my website that i submit to a php script using JQUERY and the $_POST is always empty but if i console.log the payload it shows in my console AND in the request in my network tab on chrome - so it looks like its being sent (i can confirm it says its a post request)

var result = {};
  $.each($('#cta-form').serializeArray(), function () {
    if(this.name){
      result[this.name] = this.value;
    }
  });

  var json = JSON.stringify(result);
  console.log(json); //this works

  request = $.ajax({
      url: 'https://mywebsite.ca/email.php',
      method: 'post',
      contentType: 'application/json',
      data: json
  });

my php file

$error = NULL;

if(empty($_POST["name"])) {
    $error .= "<li>Name is required</<li>";
} else {
    $name = $_POST["name"];
}

if(empty($_POST["email"])) {
    $error .= "<li>Email is required</li>";
} else if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL)) {
    $errorG .= "<li>Invalid email format</li>";
}else {
    $email = $_POST["email"];
} 

if(empty($_POST["phone"])) {
    $error .= "<li>Phone is required</li>";
} else {
    $phone = $_POST["phone"];
}


if(empty($_POST["message"])) {
    $error .= "<li>Message is required</li>";
} else {
    $message = $_POST["message"];
}
 
if(is_null($error)){
//send email and sent 200 code
       http_response_code(200);
        
       exit;
}

//this always sends because $_POST is empty so its adding tot he error message
http_response_code(412);
echo $error;
exit;