#abhupray
strange turret
eager sinew
Can you share the request ID (req_xxx) with the error? Here’s how you can find it: https://support.stripe.com/questions/finding-the-id-for-an-api-request
jovial echo
sure this is the requestID:req_PFvOSD3oteMLfm
error: error
:
code
:
"setup_intent_unexpected_state"
doc_url
:
"https://stripe.com/docs/error-codes/setup-intent-unexpected-state"
message
:
"A processing error occurred."
request_log_url
:
"https://dashboard.stripe.com/test/logs/req_vCa7gbKHPZd223?t=1700206701"
setup_intent
:
automatic_payment_methods
:
{allow_redirects: 'always', enabled: true}
cancellation_reason
:
null
client_secret
:
"seti_1ODMd6LtVBQ832EGBBybxRAC_secret_P1PSxEsdICHrW37U4L3C1gdOXg0CbLV"
created
:
1700206700
description
:
null
id
:
"seti_1ODMd6LtVBQ832EGBBybxRAC"
last_setup_error
:
null
livemode
:
false
next_action
:
null
object
:
"setup_intent"
payment_method
:
null
payment_method_configuration_details
:
id
:
"pmc_1OCzymLtVBQ832EGqDyYwP7T"
parent
:
null
[[Prototype]]
:
Object
payment_method_types
:
Array(1)
0
:
"card"
length
:
1
[[Prototype]]
:
Array(0)
status
:
"requires_payment_method"
usage
:
"off_session"
[[Prototype]]
:
Object
shouldRetry
:
false
type
:
"invalid_request_error"
eager sinew
Thanks for sharing. I managed to find the error in https://dashboard.stripe.com/test/logs/req_vCa7gbKHPZd223
Based on the request, it seems like you didn't pass payment method information from Elements in the request. Did you follow the steps here to collect payment method information when making a request with stripe.confirmSetup? https://stripe.com/docs/payments/save-and-reuse
jovial echo
I was following documentation
let response = await this.stripe.confirmSetup({
payments,
clientSecret:token,
confirmParams:{
return_url:"https://eat-express.pages.dev/thankyou-outlet"
}
})
can you tell me where should I pass pass payment method
eager sinew
Which guide do you follow? Are you using deferred intent flow?
jovial echo
I am retrieving client-secret from my backend server.Than I am trying to call confirmSetup function from frontend
eager sinew
In your code, I don't see you using elements. Could you follow this guide for Setup Intent integration? https://stripe.com/docs/payments/save-and-reuse
eager sinew
I see! I don't see you're passing elements in your stripe.confirmSetup code
jovial echo
async setupStripeElements() {
const stripe = await loadStripe(process.env.VUE_APP_STRIPE_PUBLISHABLE_KEY);
this.elements = stripe.elements();
this.cardNumber = this.elements.create('cardNumber', {
style: {
base: {
fontSize: '17px',
color: '#242424',
},
},
});
this.cardNumber.mount(this.$refs.cardNumber);
this.cardExpiry = this.elements.create('cardExpiry', {
style: {
base: {
fontSize: '17px',
color: '#242424',
},
},
});
this.cardExpiry.mount(this.$refs.cardExpiry);
this.cardCvc = this.elements.create('cardCvc', {
style: {
base: {
fontSize: '17px',
color: '#242424',
},
},
});
this.cardCvc.mount(this.$refs.cardCvc);
this.stripe = stripe;
this.cardNumber.addEventListener('change', (event) => {
this.errors.cardNumber = event.error ? event.error.message : null;
});
this.cardExpiry.addEventListener('change', (event) => {
this.errors.cardExpiry = event.error ? event.error.message : null;
});
this.cardCvc.addEventListener('change', (event) => {
this.errors.cardCvc = event.error ? event.error.message : null;
});
},
},
this function mounts all the elements
let payments = this.elements
and I am refrencing it in payments variable which I am passing in confirmSetup() function
I am using vue in the frontend side and encountering this error
eager sinew
Deferred intent flow only supports Payment Element, but you're using separate Card Elements here
jovial echo
sorry can you elaborate?
ok got it
will make the changes
ok and also can you suggest some packages for vue for the same
eager sinew
Stripe doesn't support vue officially. I'd recommend checking out the community library: https://github.com/vue-stripe/vue-stripe
