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.
This commit is contained in:
erio
2026-04-07 15:43:30 +08:00
parent f7efa15ec7
commit 18cd8bd63b
2 changed files with 4 additions and 2 deletions
+1 -1
View File
@@ -1 +1 @@
0.1.108.76
0.1.108.77
@@ -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,