created routes, but json parse error ate the end of transaction

plugins/fipfcard_plugin/js/paypal/paypal.js

@@ -66,61 +66,99 @@ paypal.Buttons({
 
 
 window.paypal.Buttons({
-	createOrder: function(data, actions) {
-//		PLGNTLS_fetch("paypal_api_orders", {
-//		//method: "POST",
-//		//headers: {"Content-Type": "application/json"},
-//			body: JSON.stringify({
-//				cart: [
-//					{
-//						id: "1234",
-//						quantity: "1",
-//					},
-//				],
-//			}),
-//		})
-		fetch(PLGNTLS_data.fetch_url + "/fipf-plugin/v1/orders", {
-			method: "POST",
-			headers: {
-				"Content-Type": "application/json"
-			},
-			body: JSON.stringify({
-				cart: [
-					{
-						id: "1234",
-						quantity: "1",
-					},
-				],
-			}),
-		})
-		.then((response) => response.json())
-		.then((order_data) =>
-		{
-			if (order_data.id)
-				return order_data.id;
-			else
-			{
-				// https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratefrontend
-				console.log("inside error");
+	async createOrder() {
+		try {
+			const response = await fetch(PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				// use the "body" param to optionally pass additional order information
+				// like product ids and quantities
+				body: JSON.stringify({
+					cart: [
+						{
+							id: "1234",
+							quantity: "1",
+						},
+					],
+				}),
+			});
+
+			const orderData = await response.json();
+
+			if (orderData.id) {
+				return orderData.id;
+			} else {
 				const errorDetail = orderData?.details?.[0];
 				const errorMessage = errorDetail
 					? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
 					: JSON.stringify(orderData);
+				
 				throw new Error(errorMessage);
 			}
-		})
-		.catch((error) => {
+		} catch (error) {
 			console.error(error);
-			resultMessage('Could not initiate PayPal Checkout... <br>(see console.log() errors)');
-		})
+			resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
+		}
 	},
 
-			
+	async onApprove(data, actions) {
+		try {
+			const fetch_url = PLGNTLS_data.fetch_url + "/fipf_plugin/api/v1/orders/" + data.orderID + "/capture";
+			console.log("fetch_url:");
+			console.log(fetch_url);
+			const response = await fetch(fetch_url, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+			});
+
+			const orderData = await response.json();
+			// Three cases to handle:
+			//   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+			//   (2) Other non-recoverable errors -> Show a failure message
+			//   (3) Successful transaction -> Show confirmation or thank you message
+
+			const errorDetail = orderData?.details?.[0];
+
+			if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
+				// (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
+				// recoverable state, per https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
+				return actions.restart();
+			} else if (errorDetail) {
+				// (2) Other non-recoverable errors -> Show a failure message
+				throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
+			} else if (!orderData.purchase_units) {
+				throw new Error(JSON.stringify(orderData));
+			} else {
+				// (3) Successful transaction -> Show confirmation or thank you message
+				// Or go to another URL:  actions.redirect('thank_you.html');
+				const transaction =
+					orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
+					orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
+				resultMessage(
+					`Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`,
+				);
+				console.log(
+					"Capture result",
+					orderData,
+					JSON.stringify(orderData, null, 2),
+				);
+			}
+		} catch (error) {
+			console.error(error);
+			resultMessage(
+				`Sorry, your transaction could not be processed...<br><br>${error}`,
+			);
+		}
+	},
 /*
 	onApprove: function(data, actions) {
 		console.log("--data:");
 		console.log(data);
-		PLGNTLS_fetch(`/api/orders/${data.orderID}/capture`, {
+		fetch(`${PLGNTLS_data.fetch_url}/fipf_plugin/api/v1/orders/${data.orderID}/capture`, {
 			method: "POST",
 			headers: {
 				"Content-Type": "application/json",