218 lines
6.5 KiB
JavaScript
218 lines
6.5 KiB
JavaScript
/*
|
|
paypal.Buttons({
|
|
style: {
|
|
layout: 'vertical',
|
|
color: 'blue',
|
|
shape: 'rect',
|
|
label: 'paypal',
|
|
},
|
|
// Order is created on the server and the order id is returned
|
|
createOrder() {
|
|
return fetch("/my-server/create-paypal-order", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
// Use the "body" param to optionally pass additional order information
|
|
// such as product SKUs and quantities
|
|
body: JSON.stringify({
|
|
cart: [
|
|
{
|
|
sku: "YOUR_PRODUCT_STOCK_KEEPING_UNIT",
|
|
quantity: "YOUR_PRODUCT_QUANTITY",
|
|
},
|
|
],
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((order) => order.id);
|
|
}
|
|
}).render('#paypal-button-container');
|
|
*/
|
|
|
|
/*
|
|
paypal.Buttons({
|
|
style: {
|
|
layout: 'vertical',
|
|
color: 'blue',
|
|
shape: 'rect',
|
|
label: 'paypal',
|
|
},
|
|
createOrder: function(data, actions) {
|
|
// This function sets up the details of the transaction, including the amount and line item details.
|
|
const my_order = actions.order.create({
|
|
purchase_units: [{
|
|
amount: {
|
|
value: '0.01'
|
|
}
|
|
}]
|
|
});
|
|
console.log("my_order: ", my_order);
|
|
return my_order;
|
|
},
|
|
onApprove: function(data, actions) {
|
|
// This function captures the funds from the transaction.
|
|
console.log("data: ", data);
|
|
console.log("actions: ", actions);
|
|
return actions.order.capture().then(function(details) {
|
|
console.log("details: ", details);
|
|
// This function shows a transaction success message to your buyer.
|
|
alert('Transaction completed by ' + details.payer.name.given_name);
|
|
});
|
|
}
|
|
}).render('#paypal-button-container');
|
|
//This function displays Smart Payment Buttons on your web page.
|
|
*/
|
|
|
|
|
|
window.paypal.Buttons({
|
|
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) {
|
|
console.error(error);
|
|
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);
|
|
fetch(`${PLGNTLS_data.fetch_url}/fipf_plugin/api/v1/orders/${data.orderID}/capture`, {
|
|
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}`,
|
|
);
|
|
}
|
|
},
|
|
*/
|
|
})
|
|
.render("#paypal-button-container");
|
|
|
|
// Example function to show a result to the user. Your site's UI library can be used instead.
|
|
function resultMessage(message) {
|
|
const container = document.querySelector("#result-message");
|
|
container.innerHTML = message;
|
|
}
|
|
|
|
|