zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tijiao

Browse Source
This commit is contained in:
始于初见
2024-12-26 15:28:44 +08:00
parent b415c06d9e
commit 4e30937b54
3 changed files with 60 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@@ -16,9 +16,6 @@
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script> </body><script src="<%=BASE_URL %>/tinymce/tinymce.min.js"></script>
<script
src="https://www.paypal.com/sdk/js?client-id=Ab8SeEuhkLGp6Fts9V3Cti0UcXQhITRWZkiHDM3U1fDY9YrrRc5IOcYHPfV6qROhmh0hvgysqrfOCSUr"></script>
</html> </html>

80
src/components/page/components/pendingPayment/PayPalButton.vue
View File

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

2
src/components/page/components/pendingPayment/index.vue
View File

@@ -16,7 +16,7 @@
<PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" /> <PayPalButton @payment-success="handlePaymentSuccess" @payment-error="handlePaymentError" />
<el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button> <!-- <el-button @click="payArticle(scope.row)" plain type="danger" size="mini">{{ $t('pendingPayment.payment') }}</el-button> -->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>