提交

package.json

@@ -34,7 +34,7 @@
     "vue": "^2.6.10",
     "vue-cropperjs": "^3.0.0",
     "vue-i18n": "^8.10.0",
-    "vue-paypal-checkout": "^3.2.0",
+    "vue-paypal-checkout": "latest",
     "vue-pdf": "^4.3.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.0.3",

src/components/page/components/pendingPayment/PayPalButton copy.vue

@@ -0,0 +1,68 @@
+<template>
+    <div>
+        <PayPal
+            currency="USD"
+            :client="paypal"
+            :amount="amount"
+            :env="env"
+            @payment-authorized="onPaymentSuccess"
+            @payment-completed="onPaymentError"
+        >
+        </PayPal>
+    </div>
+</template>
+
+<script>
+import PayPal from 'vue-paypal-checkout';
+export default {
+    data() {
+        return {
+            paypal: {
+                sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
+                production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
+            },
+            // myItems: [
+            //     {
+            //         name: 'hat',
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     },
+            //     {
+            //         name: 'handbag',
+            //         // description: "Black handbag.",
+            //         quantity: '1',
+            //         price: '5',
+            //         currency: 'USD'
+            //     }
+            // ],
+            amount: '9.99', // Amount to be paid
+            env: 'sandbox'
+        };
+    },
+    components: {
+        PayPal
+    },
+    methods: {
+        onPaymentSuccess(payment) {
+            try {
+                console.log('Payment successful!', payment);
+                this.$emit('payment-success', payment);
+            } catch (error) {
+                console.error('Error in onPaymentSuccess callback:', error);
+            }
+        },
+
+        onPaymentError(error) {
+            try {
+                console.error('Payment error:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in onPaymentError callback:', err);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped></style>

src/components/page/components/pendingPayment/PayPalButton.vue

@@ -1,24 +1,35 @@
 <template>
     <div>
         <PayPal
-           
             currency="USD"
             :client="paypal"
             :amount="amount"
             :env="env"
-            
+            :commit="true"
-            :on-success="onPaymentSuccess"
+            @payment-authorized="onPaymentSuccess"
-            :on-error="onPaymentError"
+            @payment-completed="onPaymentCompleted"
+            @payment-cancelled="onPaymentCancel"
+            locale="en_US"
+            :button-style="myStyle"
+            :token="paymentToken"
+            :paypal-button="paypalButton"
         >
         </PayPal>
     </div>
 </template>
-
+<!-- paymentID= "PAY-3L661344P7749433KLD2R5ZQ" -->
 <script>
 import PayPal from 'vue-paypal-checkout';
 export default {
     data() {
         return {
+            myStyle: {
+                label: 'checkout',
+                size: 'responsive',
+                shape: 'pill',
+                color: 'blue'
+            },
+            paymentToken: '2S842212TP193105C', // 存储自定义的 token
             paypal: {
                 sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',
                 production: 'Ad-9iuPrN9U8zQxfcog7QweDSJsDY6ns2I5WaPjuuN_4ToE5LEGASm09j9x7VC0fbQkTmnpFtrZYpHEE'
@@ -26,7 +37,6 @@ export default {
             // myItems: [
             //     {
             //         name: 'hat',
-
             //         quantity: '1',
             //         price: '5',
             //         currency: 'USD'
@@ -46,17 +56,68 @@ export default {
     components: {
         PayPal
     },
-    methods: {
+    created() {
-        onPaymentSuccess(payment) {
+        // this.fetchCustomToken();
-          alert(payment)
-            console.log('Payment successful!', payment);
-            // Handle successful payment here
-            this.$emit('payment-success', payment);
     },
-        onPaymentError(error) {
+    methods: {
-            console.error('Payment error:', error);
+        // 配置 PayPal 按钮（传递自定义的 token）
-            // Handle payment error here
+        paypalButton(data, actions) {
+            return actions.payment.create({
+                transactions: [
+                    {
+                        amount: {
+                            total: '20.00',
+                            currency: 'USD'
+                        },
+                        custom: this.paymentToken // 将自定义 token 作为 custom 数据传递
+                    }
+                ]
+            });
+        },
+        async fetchCustomToken() {
+            try {
+                this.customToken = '2S842212TP193105C'; // 假设返回的 JSON 里有 token 字段
+            } catch (error) {}
+        },
+
+        onPaymentSuccess(payment) {
+            try {
+                console.log('Payment successful Button!', payment);
+                // this.$emit('payment-success', payment);
+
+                // const token = this.paymentToken;
+
+                // // 使用token进行支付处理
+                // paypal.payment.execute(token, (error, payment) => {
+                // 	console.log('payment at line 73:', payment)
+                //     if (error) {
+                //         // 处理错误
+                //         console.error('Error in onPaymentSuccess callback:', error);
+                //     } else {
+                //         // 处理支付成功的情况
+                //         console.log('Payment successful Button!', payment);
+                //     }
+                // });
+            } catch (error) {
+                console.error('Error in onPaymentSuccess callback:', error);
+            }
+        },
+
+        onPaymentCompleted(error) {
+            try {
+                console.error('Payment paymentCompleted Button:', error);
                 this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in paymentCompleted callback:', err);
+            }
+        },
+        onPaymentCancel(error) {
+            try {
+                console.error('Payment cancel Button:', error);
+                this.$emit('payment-error', error);
+            } catch (err) {
+                console.error('Error in onPaymentCancel callback:', err);
+            }
         }
     }
 };

src/components/page/components/table/word.vue

@@ -634,8 +634,6 @@ ed.on('click', function (e) {
                             }
                         });
                     }
-                    
-                  
                 },
 
                 init_instance_callback: (editor) => {