Quellcode durchsuchen

applepay 苹果支付添加调paymentcallback接口逻辑

zgl vor 1 Tag
Ursprung
Commit
4cdfecca08

+ 45 - 7
src/app/(checkout)/checkout/_components/PaymentButton/PaypalApplepayButton.tsx

@@ -3,7 +3,7 @@
 
 import {useRef,useEffect,useCallback} from "react";
 import { useRouter } from 'next/navigation';
-// import { usePlaceOrder } from "@/utils/hooks/usePlaceOrder";
+import { usePlaceOrder } from "@/utils/hooks/usePlaceOrder";
 import {
   usePayPal,
   useEligibleMethods,
@@ -35,7 +35,7 @@ export default function PaypalApplepayButton({
     isRePay?: boolean;
 }) { 
     const router = useRouter();
-    // const {createPaymentCallback} = usePlaceOrder();
+    const {createPaymentCallback} = usePlaceOrder();
     const {countries,store,getCurrentCurrencyItem} = useConfig();
 
     const currentCurrency = getCurrentCurrencyItem();
@@ -80,7 +80,7 @@ export default function PaypalApplepayButton({
     },[createOrder]);
 
     /**await paypal.Applepay().confirmOrder() 后调onApprove */
-    const onApprove = useCallback((data: ConfirmOrderResponse) => {
+    const onApprove = useCallback(async (data: ConfirmOrderResponse) => {
         console.log("applepay approved:", data);
         /**
          * approveApplePayPayment: {
@@ -88,13 +88,40 @@ export default function PaypalApplepayButton({
          *     status: "APPROVED"
          * }
          */
+        const resCallback = await createPaymentCallback({
+            orderId: Number(webOrderIdRef.current),
+            gatewayOrderId: data.approveApplePayPayment.id || gatewayOrderIdRef.current,
+            status: 'success',
+        });
         overlayLoading.stop();
-        router.replace('/paymentresult/result?orderId=' + webOrderIdRef.current + '&return_result=success');
+        if(!resCallback.error) {
+            // 支付成功,跳转到成功落地页 
+            confirmDialog({
+                title: "Payment Success",
+                content: "Your payment was successful. Will redirect to success page.",
+                noCancel: true,
+            }).then(() => {
+                router.replace('/paymentresult/result?orderId=' + webOrderIdRef.current + '&return_result=success');
+            });
+        } else {
+            // callback 失败,提示错误
+            confirmDialog({
+                title: "Somthing Wrong",
+                content: resCallback.msg + " Please contact customer service." + " OrderId: "+ webOrderIdRef.current,
+                noCancel: true,
+            }).then(() => { 
+                router.replace('/');
+            });
+            
+        }
+        // overlayLoading.stop();
+        // router.replace('/paymentresult/result?orderId=' + webOrderIdRef.current + '&return_result=success');
 
     },[router]);
     /**ApplePaySession oncancel */
     const onCancel = useCallback(() => {
         console.log("applepay cancelled:");
+        overlayLoading.stop();
         confirmDialog({
             title: "Payment cancelled",
             content: "You canceled the payment.",
@@ -109,12 +136,18 @@ export default function PaypalApplepayButton({
      * 3. createOrder->paypal.Applepay().confirmOrder()->onApprove() 链条出错
      * 4. 用户点击后的整个链条出错
      */
-    const onError = useCallback((error: Error) => {
+    const onError = useCallback(async (error: Error) => {
         
         console.error("applepay error:", error);
         if(!isRePay) {
-            overlayLoading.stop();
+            
             if(webOrderIdRef.current || gatewayOrderIdRef.current) {
+                await createPaymentCallback({
+                    orderId: Number(webOrderIdRef.current),
+                    gatewayOrderId: gatewayOrderIdRef.current,
+                    status: 'failure',
+                });
+                overlayLoading.stop();
                 // 订单创建成功了,跳转二次支付页面
                 confirmDialog({
                     title: "Payment failed",
@@ -125,6 +158,7 @@ export default function PaypalApplepayButton({
                 });
                 
             } else {
+                overlayLoading.stop();
                 // 订单创建失败,留在当前页面
                 confirmDialog({
                     title: "Payment failed",
@@ -134,7 +168,7 @@ export default function PaypalApplepayButton({
             }
 
         } else {
-            
+            overlayLoading.stop();
             // 登录用户 二次支付页面 
             confirmDialog({
                 title: "Payment Failed",
@@ -255,13 +289,17 @@ function ApplePayButtonBox({
         const el = buttonRef.current;
         if (!el) { return; }
         const applepayButtonClick = () => {
+            overlayLoading.start();
             onClickHandler().then((res) => {
                 if(res) {
                     handleClickRef.current().catch(() => {
                         // Errors are captured by the hook's setError
                     });
+                } else {
+                    overlayLoading.stop();
                 }
             }).catch((err) => {
+                overlayLoading.stop();
                 console.error(err);
             });