#shib
idle rain
fathom thunder
So you're able to get the Payment Element to render in the browser?
vernal coyote
yep!
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: "http://localhost:3000/profile",
}
})```Are you looking in both the browser console and the server logs for errors?
vernal coyote
Yes, no errors or logs in either
fathom thunder
Do you get redirected? Does 3DS pop up?
Try using this card to in the Payment Element 4000002760003184. It's one of the test cards that requires 3DS: https://stripe.com/docs/testing#authentication-and-setup
fathom thunder
What happens when you click "Pay now"?
vernal coyote
Pay Now -> Fire's off a submitPayment method, which looks like this:
const submitPayment = async () => {
console.log("submitting payment");
console.log("elements", elements)
const stripe = await loadStripe('redacted');
console.log(stripe)
const { error } = await stripe.confirmPayment({
//`Elements` instance that was used to create the Payment Element
elements,
confirmParams: {
return_url: "http://localhost:3000/profile",
}
})
if (error) {
// This point will only be reached if there is an immediate error when
// confirming the payment. Show error to your customer (for example, payment
// details incomplete)
// const messageContainer = document.querySelector('#error-message');
// messageContainer.textContent = error.message;
console.log(error.message);
} else {
console.log("payment confirmed");
// Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`.
}
}
Do you have an event listener for submitPayment? Something like:
document.addEventListener("submit", submitPayment);
Also, not sure if you followed this or not, but there's a quickstart guide here that's often helpful to reference: https://stripe.com/docs/payments/quickstart
vernal coyote
I'm using Vue, so yeah I have the equivalent of that.
I basically modeled the way the React version does it but for Vue
fathom thunder
I guess that's not the problem (just saw in your console logs from the GIF you posted that the console.log(); are firing).
So is the payment created or not?
vernal coyote
Yep! I'll grab a screenshot from the dash
fathom thunder
Like, if you log into the dashboard, do you see payments coming through?
fathom thunder
So what are you expecting to happen?
And can you give me one of those Payment Intent IDs?
vernal coyote
I was expecting the card to be added as a payment source, and then complete the subscription
pi_3MwSbuGXa7504zpU1WkwebAb
fathom thunder
Digging in now
