106 lines
4.3 KiB
TypeScript
106 lines
4.3 KiB
TypeScript
import { loadScript } from "@paypal/paypal-js";
|
|
import { payPalOrders, payPalCapture } from '@/service/api/payment';
|
|
import { useAppStore } from '@/store/modules/app';
|
|
|
|
const appStore = useAppStore();
|
|
const locale = appStore.locale.includes("zh") ? "zh_CN" : "en_US"
|
|
|
|
export const constructPaypalBtn = async(orderId: number, currency: string) =>{
|
|
loadScript({ clientId: import.meta.env.VITE_PAYPAL_CLIENT_ID, currency, locale: locale })
|
|
.then((paypal: any) => {
|
|
paypal
|
|
.Buttons({
|
|
style: {
|
|
shape: "rect",
|
|
layout: "vertical",
|
|
color: "white",
|
|
label: "paypal",
|
|
},
|
|
message: {
|
|
|
|
},
|
|
|
|
async createOrder() {
|
|
try {
|
|
const response = await payPalOrders({orderId: orderId});
|
|
|
|
const orderData = response.data;
|
|
if (orderData.id) {
|
|
return orderData.id;
|
|
}
|
|
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 response = await payPalCapture(data.orderID, orderId)
|
|
|
|
const orderData = response.data
|
|
// 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)
|
|
);
|
|
location.reload();
|
|
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
// resultMessage(
|
|
// `Sorry, your transaction could not be processed...<br><br>${error}`
|
|
//);
|
|
}
|
|
},
|
|
})
|
|
.render("#paypal-buttons")
|
|
.catch((error) => {
|
|
console.error("failed to render the PayPal Buttons", error);
|
|
});
|
|
})
|
|
.catch((error) => {
|
|
console.error("failed to load the PayPal JS SDK script", error);
|
|
});
|
|
}
|
|
|
|
// Example function to show a result to the user. Your site's UI library can be used instead.
|
|
function resultMessage(message: any) {
|
|
const container: any = document.querySelector("#result-message");
|
|
container.innerHTML = message;
|
|
}
|