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
+ }
+}