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 --> <!-- 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>

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

@@ -1,63 +1,65 @@
<template> <template>
<div> <div>
<paypal-checkout <PayPal
:client="paypalClient"
:amount="amount" currency="USD"
:currency="currency" :client="paypal"
@success="onPaymentSuccess" :amount="amount"
@error="onPaymentError" :env="env"
>
<template #default="{ onClick }"> :on-success="onPaymentSuccess"
<button @click="onClick">Pay with PayPal</button> :on-error="onPaymentError"
</template> >
</paypal-checkout> </PayPal>
</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 },
}, // myItems: [
amount: '10.00', // Amount to be paid // {
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) {
console.log('Payment successful!', payment); alert(payment)
// Handle successful payment here console.log('Payment successful!', payment);
this.$emit('payment-success', payment); // Handle successful payment here
}, this.$emit('payment-success', payment);
onPaymentError(error) { },
console.error('Payment error:', error); onPaymentError(error) {
// Handle payment error here console.error('Payment error:', error);
this.$emit('payment-error', error); // Handle payment error here
} 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>