SyntaxError: Unexpected token < in JSON at position 0の解決方法

Question

前提・実現したいこと

pay.jpで定期課金させたいです。
ajax部分でエラーが出ており、自分でも調べているのですがなかなか解決できなく悩んでおります。
お力をお貸しいただけると幸いです。

PHPでpay.jpという定期課金の組み込みをしているのですが、カード番号などを登録してボタンを押すと

Unexpected token < in JSON at position 0

と出ます。

下記のサイトにあったデモを参考にして、秘密鍵、公開鍵、DBの登録などを変更しております。
デモではエラーも無く、決済完了画面に遷移するのですが、デモ通り上手く行きません。
https://base91.net/payjp/

該当のソースコード

<!--エラーがあった時はこちらに表示-->
<div class="missArea cardmiss"></div>

<!--以下、クレジットカード入力フォーム-->
<dl>
	<dt>カード番号</dt>
	<dd><input type="text" name="card_number" placeholder="カード番号)4242424242424242"></dd>
	<dt>有効期限</dt>
	<dd><input type="number" name="card_exp_month" placeholder="月)12">/<input type="number" name="card_exp_year" placeholder="年)21"></dd>
	<dt>カード確認コード(CVC)</dt>
	<dd><input type="text" name="card_cvc" placeholder="CVC)123"></dd>
	<dt>お名前</dt>
	<dd><input type="text" name="card_name" placeholder="名前)TARO SASAKI"></dd>
</dl>
<button class="publishBtn" >登録する</button>
<div style="padding-top:40px;">
<div>テスト用カード番号は<a href="https://pay.jp/docs/testcard" target="_blank">こちら</a>から<br>
カード番号以外の情報は、グレーの文字通りご入力ください。<br>
実際に決済はされません。</div>
</div>

//公開鍵を設定
Payjp.setPublicKey("pk_test_○○○○○○○○○");

//publishBtn(buttonを押した時に以下の処理スタート)
$(".publishBtn").click(function(){
	
	//一旦エラーエリアの内容をリセット(何も無い場合は変化なし)。
	$(".missArea").empty();
	
	//有効期限の年を取得
	//年を4桁すべて入力してもらうと手間がかります。
	//よって、2019の場合、19だけ入力してもらい、20はここで付け足す。
	var cvcdata = "20" + document.querySelector('input[name="card_exp_year"]').value;
	
	//他の項目もすべて取得
	var card = {
		number: document.querySelector('input[name="card_number"]').value,
		cvc: document.querySelector('input[name="card_cvc"]').value,
		exp_month: document.querySelector('input[name="card_exp_month"]').value,
		exp_year: cvcdata,
		name: document.querySelector('input[name="card_name"]').value
	};
	
	//pay.jpに送るため情報を暗号化(トークン化)
	Payjp.createToken(card, function(status, response) {
		
		//statusが200の場合はトークン化に問題無し。決済へ進む
		if (status == 200) {
			
			//トークンを取得
			var card_token = response.id;
			
			//ajaxで決済処理用のphpにトークンを送信
			$.ajax({
				type: 'POST',
				dataType:'json',
				url:'functions/pay.php',
				data:{
					card_token:card_token,
				},
				success:function(data) {
					if(data){
						//決済処理に問題があった場合、エラーを表示。
						$(".cardmiss").append(""+data+"");
					}else{
						//決済処理が成功した場合、決済顔料画面へ。
						location.href = "success.php";
					};
				},
				error:function(XMLHttpRequest, textStatus, errorThrown) {
　　　　　　　　　　　alert(errorThrown);
				　　console.log("XMLHttpRequest : " + XMLHttpRequest.status);
				　　console.log("textStatus     : " + textStatus);
				　　console.log("errorThrown    : " + errorThrown.message);
				}
			});
			
		} else {
			
			//フォームの時点で入力内容にエラーがあった場合。
			var error_messege = response.error.message;
			$(".cardmiss").append("入力内容にエラーがあるようです。再度、ご確認の上、ご登録をお願い致します。");
			
		};
	});
});

	require_once "db.php";
	
	//公開鍵を設定するファイルを読み込みます。
	require_once 'secret.php';
	
	//アップロードしたpay.jpのライブラリから必要なファイルを読み込みます。
	require_once 'payjp-php-master/init.php';
	
	//JavaScriptからポストされたトークンを受け取ります。
	$card_token = htmlspecialchars($_POST['card_token'], ENT_QUOTES);
	
	//管理画面で決めた、今回課金するプランのidを指定します。
	$plan_data = "plan001";
	
	//ユーザーのメールアドレスを取得します。
	//今回はユーザーのメールアドレスをセッションで保持、セッションから取得。
	$mail = $_SESSION['mail'];
	
	try {
		
		//pay.jpの管理画面に顧客データを作成します。
		Payjp\Payjp::setApiKey($secret);
		$result = Payjp\Customer::create(
			array(
				"email" => $mail,
				"card" => $card_token,
			)
		);
		
		//作成された顧客idを取得します。
		$resultid = $result['id'];
			
		//ユーザーをプランに加入する処理を実行。
		Payjp\Payjp::setApiKey($secret);
		$resultsub = Payjp\Subscription::create(
			array(
				"customer" => $resultid,
				"plan" => $plan_data
			)
		);
		
		//プランとユーザーを紐付けるidを取得
		$resultsubid = $resultsub['id'];
		
		//データベースにあるユーザーデータに、決済関連のidをまとめて保存
		$userplandata = mysqli_select_db($mysqli,'userdata');
		//今回はplanrank=プランのランク(s0001) planid=プラン決済id payid=顧客id registrationtime=決済時間を登録しています。
		//データベースにも予めカラムを作っておいてください。
		$userplandata = mysqli_query($mysqli,"UPDATE userdata SET planrank='$plan_data',planid='$resultsubid',payid='$resultid',registrationtime='$today' where mail = '$mail'");
		
	} catch (Exception $e) {
		
		//もしエラーがあった場合はエラーメッセージを返します。
		$miss = $getmessage = $e->getMessage();
	
	};
	
	//最後にjsonでエラーがあった場合のエラーメッセージを返します。
	header('Content-type: application/json');
	echo json_encode( $miss );

試したこと

ajaxのerror:functionのalert(errorThrown)付近を
console.logでステータスを見ると下記のように返ってきました。

XMLHttpRequest : 200
textStatus     : parsererror
errorThrown    : Unexpected token < in JSON at position 0

Comments

[m.ts10806]

pay.php　の内容をご提示ください。

[naofu_web]

失礼しました。追記させていだたきました。

Answer 1

Unexpected token < in JSON at position 0は直訳でJSONへ変換する文字列の[0]位置に無効な文字列<が含まれているということを意味します。
先頭が<ということは十中八九, functions/pay.phpの出力がjsonの形式に沿っていない、この場合エラー等が発生してHTMLコードが吐き出されているというこのなので、functions/pay.phpがちゃんと意図した出力をしているか、確認してみてください。
Google Chromeであれば、Developer ConsoleのNetworkタブから問い合わせ結果の内容が見れるかと思います。

Comments

[naofu_web]

ありがとうございます。pay.jpのレスポンスを見ると
<b>Notice</b>: Undefined variable: miss in <b>/Applications/MAMP/htdocs/site04/functions/pay.php</b> on line <b>63</b>

と出ていたので、該当箇所を見ると
echo json_encode( $miss );　の部分でした。
どこかで$missをどこかで定義する必要があるのでしょうか、、？色々試しているのですが進まず、、
お力をお貸しいただけると幸いです。

[rozeo_s]

一つ下の回答で指摘されていますが、 $miss が定義されるのは catch 側のみで catchに捕まらない(=例外がなかった)場合は $missが未定義になってしまうのでたとえば、 $missは予め成功時のレスポンス用のデータを try-catch よりも外でいれておき、エラーであれば $miss を エラー用のレスポンスで置き換えるようにすればどうでしょうか。
(missという変数名だとおかしな気がするので結果を洗わすような変数名にしたほうが無難です)
ただ、気になるのが catch 側でも$missに配列ではなく文字列が入っているため、こちらも同じようなエラーでおちるはずなのでcatch側の$missも配列が入るようにしてあげてください。

Answer 2

typeをjsonではなく単にtextにすると分かるのではないでしょうか。
jsonとして正しい形式に変換できる出力内容かどうか。
どこかでエラー起きてるとか。

気になるのは$missがException起きたときしか定義されないところですかね。
成功したら変数未定義です。

Answer 3

お二方にアドバイスをいただいた通りに実装すると、successページに遷移することができました。
try-catch以外の部分で定義しております。

tryの方にも定義すると、遷移が止まって文字列が表示されてしまうので、定義せず進めてみようかと思います。

ご回答くださったお二方、誠にありがとうございました。

	//データベースと接続するファイルを読み込みます。
	require_once "db.php";
	
	//公開鍵を設定するファイルを読み込みます。
	require_once 'secret.php';
	
	//アップロードしたpay.jpのライブラリから必要なファイルを読み込みます。
	require_once 'payjp-php-master/init.php';
	
	//JavaScriptからポストされたトークンを受け取ります。
	$card_token = htmlspecialchars($_POST['card_token'], ENT_QUOTES);
	
	//管理画面で決めた、今回課金するプランのidを指定します。
	$plan_data = "plan001";
	
	//ユーザーのメールアドレスを取得します。
	//今回はユーザーのメールアドレスをセッションで保持、セッションから取得。
	$mail = "メールアドレス";
	$miss = "";
	try {
		
		//pay.jpの管理画面に顧客データを作成します。
		Payjp\Payjp::setApiKey($secret);
		$result = Payjp\Customer::create(
			array(
				"email" => $mail,
				"card" => $card_token,
			)
		);
		
		//作成された顧客idを取得します。
		$resultid = $result['id'];
			
		//ユーザーをプランに加入する処理を実行。
		Payjp\Payjp::setApiKey($secret);
		$resultsub = Payjp\Subscription::create(
			array(
				"customer" => $resultid,
				"plan" => $plan_data
			)
		);
		
		//プランとユーザーを紐付けるidを取得
		$resultsubid = $resultsub['id'];
		
		//データベースにあるユーザーデータに、決済関連のidをまとめて保存
		$userplandata = mysqli_select_db($mysqli,'userdata');
		//今回はplanrank=プランのランク(s0001) planid=プラン決済id payid=顧客id registrationtime=決済時間を登録しています。
		//データベースにも予めカラムを作っておいてください。
		$userplandata = mysqli_query($mysqli,"UPDATE userdata SET planrank='$plan_data',planid='$resultsubid',payid='$resultid' where mail = '$mail'");
		

	} catch (Exception $e) {
		
		//もしエラーがあった場合はエラーメッセージを返します。
		$miss = $getmessage = $e->getMessage();
	
	};
	
	//最後にjsonでエラーがあった場合のエラーメッセージを返します。
	header('Content-Type: application/json; charset=utf-8');
	echo json_encode( $miss );

Comments

[m.ts10806]

んーでも、エラーの時のエラーメッセージだけしか返さないならJSONにする意味ないような気がします。
reult:0 / 1 で設定して、０の時だけerror にメッセージ定義して返し、JavaScript側で参照するようにした方が、使い方としては適切です。