liaLund

[torpid sable]

What do you mean by loads twice? Can you show me an example? Are there any errors/logs you can share that appear when this happens?

[idle fossil]

yes, i will record it

[torpid sable]

This looks like some state management issue with your application code. Can you share some snippets of the client app where you confirm the payment and the state your managing?

It appears that the payment elements reloads entirely. Is it possible your state logic is causing it to re-initialize?

[idle fossil]

i use standard code from Stripe for initilizing and confirm setupIntent, i think. code looks like: async initialize() {
try {
this.stripe = await loadStripe(import.meta.env.VITE_STRIPE)
console.log('👻')
const items = [{ id: 'xl-tshirt' }]
const request = this.createRequest('POST', ${serverUrl}/payment/stripe/setup/intent?${token}, items)
let response = null
try {
response = await axios(request)
} catch (ex) {
console.log(ex)
}
if (!response) {
console.error('STRIPE LOAD ERROR')
return
}
const clientSecret = await response.data.client_secret
const appearance = {
theme: 'stripe'
}
this.elements = this.stripe.elements({ appearance, clientSecret })
const paymentElement = this.elements.create('payment')
paymentElement.mount('#payment-element')
} catch (ex) {
console.error(ex)
}
}

async confirmPayment() {
try {
const elements = this.elements
const { error } = await this.stripe.confirmSetup({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: 'https://localhost:3000/#/account/payment/checkout'
}
})
if (error.type === 'card_error' || error.type === 'validation_error') {
console.error(error.message)
return {
result: false,
error
}
} else {
return {
result: false,
info: 'An unexpected error occurred.'
}
}
} catch (ex) {
console.error(ex)
return {
result: false,
info: 'An unexpected error occurred.'
}
}
}

export default {
data() {
return {
stripeResult: null
}
},
async created() {
await this.initStripe()
},
methods: {
...mapActions(usePaymentStore, ['init', 'confirmPayment']),

    async initStripe() {
        await this.init()
        const result = await this.confirmPayment()
        this.stripeResult = result
    }
}

}

[torpid sable]

Ok let me digest that for a few minutes

thanks

[idle fossil]

thanks

[torpid sable]

ok so a couple of things

first, i'm not super familiar with Vite, but i'm trying to read this from a general reactive framework perspective

second: can you add some logging to confirm whether initialize is running twice? That's where you create and mount the element, so is the most likely explanation for this behaviour/symptom.

i don't understand the initStripe method, which calls this.init and then this.confirmPayment. What is init and how does it relate to initialize? Why do you call confirmPayment after init instead of only once a customer clicks the button?