changed plugin name to cipf

plugins/cipf_plugin/js/paypal/create_order.js

@@ -0,0 +1,65 @@
+
+import { resultMessage } from './result_message.js';
+import { PLGNTLS_fetch } from '../../utils/plgntls_fetch.js';
+
+/**
+ * @see https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratebackend
+ */
+//async function createOrder() {
+export async function createOrder() {
+	try {
+		//const fetch_create_url = PLGNTLS_data.fetch_url + "/cipf_plugin/api/v1/orders";
+		//console.log("fetch_create_url:", fetch_create_url);
+		//const response = await fetch(fetch_create_url, {
+		const response = await PLGNTLS_fetch('/cipf_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) {
+		console.error(error);
+		resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
+	}
+}
+
+/**
+ * @see https://developer.paypal.com/demo/checkout/#/pattern/server
+ *
+// Call your server to set up the transaction
+function createOrder(data, actions) {
+	const fetch_create_url = PLGNTLS_data.fetch_url + "/cipf_plugin/api/v1/orders";
+	console.log("fetch_create_url:", fetch_create_url);
+	return fetch(fetch_create_url, {
+		method: 'post'
+	}).then(function(res) {
+		return res.json();
+	}).then(function(orderData) {
+		return orderData.id;
+	});
+},
+ */
+

plugins/cipf_plugin/js/paypal/on_approve.js

@@ -0,0 +1,114 @@
+
+import { resultMessage } from './result_message.js';
+import { PLGNTLS_fetch } from '../../utils/plgntls_fetch.js';
+
+/**
+ * @see https://developer.paypal.com/docs/checkout/standard/integrate/#link-integratebackend
+ */
+//async function onApprove(data, actions) {
+export async function onApprove(data, actions) {
+	try {
+		const fetch_approve_url = PLGNTLS_data.fetch_url + "/cipf_plugin/api/v1/orders/" + data.orderID + "/capture";
+		console.log("fetch_approve_url:", fetch_approve_url);
+		//const response = await fetch(fetch_approve_url, {
+		const response = await PLGNTLS_fetch('/cipf_plugin/api/v1/orders/' + data.orderID + '/capture', {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				//"X-WP-Nonce": PLGNTLS_data.rest_nonce,
+			},
+		});
+
+		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
+			console.log("errorDetail:");
+			console.log(errorDetail);
+			throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
+		} else if (!orderData.purchase_units) {
+			throw new Error(JSON.stringify(orderData));
+		} else {
+			try {
+				// (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];
+				// to show a message on page
+				//resultMessage(`Transaction ${transaction.status}: ${transaction.id}<br><br>See console for all available details`);
+				resultMessage(eval(PLGNTLS_data.paypal_message_success));
+				console.log(
+					"Capture result",
+					orderData,
+					JSON.stringify(orderData, null, 2),
+				);
+				actions.redirect(PLGNTLS_data.paypal_redirection_success);
+			} catch (error) {
+				console.error("payment ok but error on traitment afterwards : ", error);
+			}
+		}
+	} catch (error) {
+		console.error(error);
+		//resultMessage(`Sorry, your transaction could not be processed...<br><br>${error}`);
+		resultMessage(eval(PLGNTLS_data.paypal_message_failure));
+		//actions.redirect(PLGNTLS_data.paypal_redirection_failure);
+	}
+}
+
+/**
+ * @see https://developer.paypal.com/demo/checkout/#/pattern/server
+ *
+// Call your server to finalize the transaction
+function onApprove (data, actions) {
+	const fetch_approve_url = PLGNTLS_data.fetch_url + "/cipf_plugin/api/v1/orders/" + data.orderID + "/capture";
+	console.log("fetch_approve_url:", fetch_approve_url);
+	return fetch(fetch_approve_url, {
+		method: 'post'
+	}).then(function(res) {
+		return res.json();
+	}).then(function(orderData) {
+		// 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
+
+		// This example reads a v2/checkout/orders capture response, propagated from the server
+		// You could use a different API or structure for your 'orderData'
+		var errorDetail = Array.isArray(orderData.details) && orderData.details[0];
+
+		if (errorDetail && errorDetail.issue === 'INSTRUMENT_DECLINED') {
+			return actions.restart(); // Recoverable state, per:
+			// https://developer.paypal.com/docs/checkout/integration-features/funding-failure/
+		}
+
+		if (errorDetail) {
+			var msg = 'Sorry, your transaction could not be processed.';
+			if (errorDetail.description) msg += '\n\n' + errorDetail.description;
+			if (orderData.debug_id) msg += ' (' + orderData.debug_id + ')';
+			return alert(msg); // Show a failure message (try to avoid alerts in production environments)
+		}
+
+		// Successful capture! For demo purposes:
+		console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
+		var transaction = orderData.purchase_units[0].payments.captures[0];
+		alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');
+
+		// Replace the above to show a success message within this page, e.g.
+		// const element = document.getElementById('paypal-button-container');
+		// element.innerHTML = '';
+		// element.innerHTML = '<h3>Thank you for your payment!</h3>';
+		// Or go to another URL:  actions.redirect('thank_you.html');
+	});
+}
+ */

plugins/cipf_plugin/js/paypal/paypal.js

@@ -0,0 +1,56 @@
+import { createOrder } from './create_order.js';
+import { onApprove } from './on_approve.js';
+
+
+window.paypal.Buttons({
+	/*
+	style: {
+		layout: 'vertical',
+		color:  'blue',
+		shape:  'rect',
+		label:  'paypal',
+	},
+	*/
+	createOrder: createOrder,
+	onApprove: onApprove,
+})
+.render("#paypal-button-container");
+
+
+
+/**
+ * customize card fields
+ * from : https://developer.paypal.com/docs/checkout/advanced/integrate#link-addpaypalbuttonsandcardfields
+ *
+// Create the Card Fields Component and define callbacks
+const cardField = paypal.CardFields({
+  createOrder: createOrder,
+  onApprove: onApprove,
+});
+
+// Render each field after checking for eligibility
+if (cardField.isEligible()) {
+  const nameField = cardField.NameField();
+  nameField.render("#card-name-field-container");
+
+  const numberField = cardField.NumberField();
+  numberField.render("#card-number-field-container");
+
+  const cvvField = cardField.CVVField();
+  cvvField.render("#card-cvv-field-container");
+
+  const expiryField = cardField.ExpiryField();
+  expiryField.render("#card-expiry-field-container");
+
+  // Add click listener to submit button and call the submit function on the CardField component
+  document
+    .getElementById("card-field-submit-button")
+    .addEventListener("click", () => {
+      cardField.submit().then(() => {
+        // submit successful
+      });
+    });
+}
+*/
+
+

plugins/cipf_plugin/js/paypal/plgntls_fetch.js

@@ -0,0 +1,13 @@
+
+//function PLGNTLS_fetch(url, options = {}) {
+export function PLGNTLS_fetch(url, options = {}) {
+	console.log("inside PLGNTLS_fetch");
+	url = PLGNTLS_data.fetch_url + url;
+
+	options.headers = options.headers || {};
+	options.headers['X-WP-Nonce'] = PLGNTLS_data.fetch_nonce,
+	console.log("options:", options);
+
+	return fetch(url, options);
+}
+

plugins/cipf_plugin/js/paypal/result_message.js

@@ -0,0 +1,9 @@
+
+// Example function to show a result to the user. Your site's UI library can be used instead.
+//function resultMessage(message) {
+export function resultMessage(message) {
+  const buttons = document.querySelector("#paypal-button-container");
+  const container = document.querySelector("#result-message");
+	buttons.style.display = 'none';
+  container.innerHTML = message;
+}