feat: paypal支付

2025-04-23 16:00:21 +08:00
parent 092864e661
commit 3cbaebb5d3
9 changed files with 167 additions and 0 deletions
--- a/src/utils/paypal.ts
+++ b/src/utils/paypal.ts
@@ -0,0 +1,99 @@
+import { loadScript } from "@paypal/paypal-js";
+import { payPalOrders, payPalCapture } from '@/service/api/payment';
+
+export const constructPaypalBtn = async(orderId: number, currency: string) =>{
+ loadScript({ clientId: import.meta.env.VITE_PAYPAL_CLIENT_ID, disableFunding: ["paylater"], currency })
+    .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)
+                    );
+                  }
+                } 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;
+}