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

5
public/index.html
View File

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

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

@@ -1,63 +1,65 @@
<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>
<PayPal
currency="USD"
:client="paypal"
:amount="amount"
:env="env"
:on-success="onPaymentSuccess"
:on-error="onPaymentError"
>
</PayPal>
</div>
</template>
<script>
import PaypalCheckout from 'vue-paypal-checkout';
export default {
name: 'PayPalButton',
components: {
PaypalCheckout
},
</template>
<script>
import PayPal from 'vue-paypal-checkout';
export default {
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
};
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) {
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);
}
onPaymentSuccess(payment) {
alert(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>
};
</script>
<style scoped></style>

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

@@ -16,7 +16,7 @@
<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>
</el-table-column>
</el-table>