Return value from PHP to JS via AJAX

Question

What am I doing wrong? AJAX success appears not to be receiving anything at all as none of the three alerts are shown. The process works, except I do not get any response

jQuery.ajax({
  type: 'POST',
  url: 'https://xxxxxxxxxxx.com/charge.php',
  data: {
    tokenid: token.id,
    email: customer_email,
    amount: amount,
    description: customer_first_name + ' ' + customer_surname + ' | ' + reference
  },
  dataType: 'json',
  success: function(response) {
    alert(response);

    if (response == "OK") {
      alert('Payment successfully made! ');
    } else {
      alert('Payment could not be processed. Please try again.');
      location.reload();
    }
  }
});

<?php
  require_once('./stripe/config.php');

  $token  = $_POST['tokenid'];
  $email = $_POST['email'];
  $amount = $_POST['amount'] ;
  $description = $_POST['description'] ;

  $err = 'OK' ;

  $customer = \Stripe\Customer::create(array(
      'email' => $email,
      'source'  => $token
  ));

  try { 
    $charge = \Stripe\Charge::create(array(
      'customer' => $customer->id,
      'amount'   => $amount,
      'currency' => 'GBP',
      'description' => $description
    ));
  } catch(\Stripe\Error\Card $e) {
    $err = "Declined - $e";
  }

  function response() {
    global $err;
    print $err ;
    return $err;
  }
  exit response() ;
?>

Please help as this is driving me mad.

Answer 1

Remove the response function, do a print of the errors

 <?php
  require_once('./stripe/config.php');

  $token  = $_POST['tokenid'];
  $email = $_POST['email'];
  $amount = $_POST['amount'] ;
  $description = $_POST['description'] ;

  $err = 'OK' ;

  $customer = \Stripe\Customer::create(array(
      'email' => $email,
      'source'  => $token
  ));

 try { $charge = \Stripe\Charge::create(array(
      'customer' => $customer->id,
      'amount'   => $amount,
      'currency' => 'GBP',
      'description' => $description
  ));
    } catch(\Stripe\Error\Card $e) {
    $err = "Declined - $e";
    }
echo $err;
?>

set the dataType to text dataType: 'text',

Answer 2

Your jQuery AJAX request is setup to receive JSON (through the dataType property), yet you are returning a string. That string is also repeated several times, and the response() function is pretty redundant.

To fix this, amend your PHP code to actually return JSON, and your jQuery code to read that JSON properly. Try this:

$success = true;
$err = '';

$customer = \Stripe\Customer::create(array(
  'email' => $email,
  'source'  => $token
));

try {
  $charge = \Stripe\Charge::create(array(
    'customer' => $customer->id,
    'amount'   => $amount,
    'currency' => 'GBP',
    'description' => $description
  ));
} catch(\Stripe\Error\Card $e) {
  $success = false;
  $err = "Declined - $e";
}

echo json_encode(array('success' => $success, 'err' => $err));

jQuery.ajax({
  type: 'POST',
  url: 'https://xxxxxxxxxxx.com/charge.php',
  data: {
    tokenid: token.id,
    email: customer_email,
    amount: amount,
    description: customer_first_name + ' ' + customer_surname + ' | ' + reference
  },
  dataType: 'json',
  success: function(response) {
    if (response.success) {
      alert('Payment successfully made! ');
    } else {
      console.log(response.err);
      alert('Payment could not be processed. Please try again.');
      location.reload();
    }
  }
});