pay

package.json

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

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

@@ -0,0 +1,63 @@
+<template>
+    <div>
+      <paypal-checkout
+        :client="paypalClient"
+        :amount="amount"
+        :currency="currency"
+        @success="onPaymentSuccess"
+        @error="onPaymentError"
+      >
+        <template #default="{ onClick }">
+          <button @click="onClick">Pay with PayPal</button>
+        </template>
+      </paypal-checkout>
+    </div>
+  </template>
+   
+  <script>
+  import PaypalCheckout from 'vue-paypal-checkout';
+   
+  export default {
+    name: 'PayPalButton',
+    components: {
+      PaypalCheckout
+    },
+    data() {
+      return {
+        // PayPal Client ID
+        paypalClient: {
+          sandbox: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr',  // Replace with your sandbox client ID
+          production: 'Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr'  // Replace with your production client ID
+        },
+        amount: '10.00', // Amount to be paid
+        currency: 'USD'  // Currency
+      };
+    },
+    methods: {
+      onPaymentSuccess(payment) {
+        console.log('Payment successful!', payment);
+        // Handle successful payment here
+        this.$emit('payment-success', payment);
+      },
+      onPaymentError(error) {
+        console.error('Payment error:', error);
+        // Handle payment error here
+        this.$emit('payment-error', error);
+      }
+    }
+  };
+  </script>
+   
+  <style scoped>
+  button {
+    padding: 10px 20px;
+    background-color: #0070ba;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  button:hover {
+    background-color: #005b9a;
+  }
+  </style>

src/components/page/components/pendingPayment/index.vue

@@ -11,17 +11,25 @@
                 </template>
             </el-table-column>
             <el-table-column prop="status" :label="$t('pendingPayment.Paymentstatus')" width="140"></el-table-column>
-        <el-table-column label="" width="140" >
+            <el-table-column label="" width="140">
                 <template slot-scope="scope">
-            <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{$t('pendingPayment.payment')}}</el-button>
+                  
+    <PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
+
+                    <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button>
                 </template>
             </el-table-column>
         </el-table>
     </div>
-  </template>
+</template>
 
-  <script>
-  export default {
+<script>
+import PayPalButton from './PayPalButton.vue';
+
+export default {
+    components: {
+        PayPalButton
+    },
     props: {
         list: {
             type: Array,
@@ -29,11 +37,18 @@
         }
     },
     data() {
-      return {
-       
-      };
+        return {};
     },
     methods: {
+        handlePaymentSuccess(payment) {
+            // Handle payment success
+            console.log('Payment successful!', payment);
+        },
+        handlePaymentError(error) {
+            // Handle payment error
+            console.error('Payment error:', error);
+        },
+
         formatAmount(amount) {
             return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
         },
@@ -44,5 +59,5 @@
             this.$message.success(`已成功为稿件 ${article.title} 缴费`);
         }
     }
-  };
-  </script>
+};
+</script>