提交
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user