From 18cd8bd63b2bdaea9799844483e42b80fb400036 Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Tue, 7 Apr 2026 15:43:30 +0800
Subject: [PATCH] fix(stripe): await nextTick before mounting Stripe payment
 element

Set loading=false and await nextTick() before calling mount() so the
#stripe-payment-element DOM node exists when Stripe.js tries to use it.
---
 backend/cmd/server/VERSION                    | 2 +-
 frontend/src/views/user/StripePaymentView.vue | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/backend/cmd/server/VERSION b/backend/cmd/server/VERSION
index ca9232d2be..f0506108ee 100644
--- a/backend/cmd/server/VERSION
+++ b/backend/cmd/server/VERSION
@@ -1 +1 @@
-0.1.108.76
+0.1.108.77
diff --git a/frontend/src/views/user/StripePaymentView.vue b/frontend/src/views/user/StripePaymentView.vue
index 7fe76d44b0..3e74d6cf87 100644
--- a/frontend/src/views/user/StripePaymentView.vue
+++ b/frontend/src/views/user/StripePaymentView.vue
@@ -43,7 +43,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { usePaymentStore } from '@/stores/payment'
@@ -93,6 +93,8 @@ onMounted(async () => {
     if (!stripe) { initError.value = t('payment.stripeLoadFailed'); return }
 
     stripeInstance = stripe
+    loading.value = false
+    await nextTick()
     const isDark = document.documentElement.classList.contains('dark')
     const elements = stripe.elements({
       clientSecret,