diff --git a/frontend/src/components/payment/StripePaymentInline.vue b/frontend/src/components/payment/StripePaymentInline.vue index fa9ee4bc06..0a939d9c85 100644 --- a/frontend/src/components/payment/StripePaymentInline.vue +++ b/frontend/src/components/payment/StripePaymentInline.vue @@ -31,10 +31,10 @@ {{ t('payment.stripePay') }} - -
- -
+ + @@ -43,6 +43,8 @@ import { ref, onMounted, onUnmounted, nextTick } from 'vue' import { useI18n } from 'vue-i18n' import { extractApiErrorMessage } from '@/utils/apiError' +import { paymentAPI } from '@/api/payment' +import { useAppStore } from '@/stores' import type { Stripe, StripeElements } from '@stripe/stripe-js' import Icon from '@/components/icons/Icon.vue' @@ -56,12 +58,14 @@ const props = defineProps<{ const emit = defineEmits<{ success: []; back: [] }>() const { t } = useI18n() +const appStore = useAppStore() const stripeMount = ref(null) const loading = ref(true) const initError = ref('') const error = ref('') const submitting = ref(false) +const cancelling = ref(false) const success = ref(false) const ready = ref(false) @@ -128,4 +132,17 @@ async function handlePay() { submitting.value = false } } + +async function handleCancel() { + if (!props.orderId || cancelling.value) return + cancelling.value = true + try { + await paymentAPI.cancelOrder(props.orderId) + emit('back') + } catch (err: unknown) { + appStore.showError(extractApiErrorMessage(err, t('common.error'))) + } finally { + cancelling.value = false + } +}