This commit is contained in:
2024-12-27 12:32:22 +08:00
parent 4e30937b54
commit 33709c76be
4 changed files with 375 additions and 248 deletions

View File

@@ -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",

View File

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

View File

@@ -1,24 +1,35 @@
<template>
<div>
<PayPal
currency="USD"
:client="paypal"
:amount="amount"
:env="env"
:on-success="onPaymentSuccess"
:on-error="onPaymentError"
:commit="true"
@payment-authorized="onPaymentSuccess"
@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: {
onPaymentSuccess(payment) {
alert(payment)
console.log('Payment successful!', payment);
// Handle successful payment here
this.$emit('payment-success', payment);
created() {
// this.fetchCustomToken();
},
onPaymentError(error) {
console.error('Payment error:', error);
// Handle payment error here
methods: {
// 配置 PayPal 按钮(传递自定义的 token
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);
}
}
}
};

View File

@@ -386,8 +386,8 @@ export default {
content_css: 'default',
setup(ed) {
if(!_this.readonly){
ed.on('click', function (e) {
if (!_this.readonly) {
ed.on('click', function (e) {
// 判断点击的是否是目标元素
const target = e.target;
console.log('target at line 351:', target);
@@ -634,8 +634,6 @@ ed.on('click', function (e) {
}
});
}
},
init_instance_callback: (editor) => {