#colman_element-setup
obsidian hearthBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- colman_docs, 18 hours ago, 10 messages
bronze saddleBOT
đ Welcome to your new thread!
â˛ď¸ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).
âąď¸ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can start a new thread if you have another question.
đ This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1248289771407671374
đ Have more to share? Add details, code, screenshots, videos, etc. below.
unique fulcrum
In the above request response I see:
You cannot confirm this SetupIntent because it's missing a payment method. You can either update the SetupIntent with a payment method and then confirm it again, or confirm it again directly with a payment method or ConfirmationToken.
Looks like a PM wasn't provided
How are you collecting pm details?
Was a pm entered when you tried to confirm?
errant snow
It didnt display the Payment UI.
I just created a subscription on my backend using the stripe.client.subscriptions.create, included a trial_period_days to give users a trial period, expanded the pending_setup_intent to get the client_secret and then passed that to my frontend.
Calling the confirmSetup() method on the frontend throws the said error above
unique fulcrum
That makes sense then if you didn't provide a payment method
What do you mean by it didn't display the payment ui
It's up to you to do that in your code
errant snow
Ok, Maybe I am not sure how to get the PM.
Can you help with that please,
I thought passing the client_secret and the element-id where the stripe element will be mounted should diplay the UI for the customer to enter his Payment Details
errant snow
I see, lemme check that out
unique fulcrum
Yep recommend following that guide in its entirety
If your subscription has a trial, then you'll need to use the setup intent client secret instead of payment intent client secret
That's really the only difference you'd need to watch out for from the above guide
errant snow
Alright...
Thanks for the quick response.
Lemme check it out then
Hi, I think thats what I am already doing.
Unless im missing something else.
So without trial , the flow works well. We get the client_secret from PaymentIntent as opposed to getting it from SetupIntent when using the trial.
See the screenshot above or the snippet below;
let client_secret: string | null;
if (trialDays) {
client_secret =
(stripeSub.pending_setup_intent as Stripe.SetupIntent).client_secret;
} else {
client_secret = (
(stripeSub.latest_invoice as Stripe.Invoice)
.payment_intent as Stripe.PaymentIntent
)?.client_secret;
}
return {
client_secret: client_secret,
amount: sub.fee,
customer_id: customerId,
name: user.paymentMethod.name,
phone: user.paymentMethod.phone,
address: user.paymentMethod.address,
};
The issue is you're not collecting payment method details
Are you already doing this step: https://docs.stripe.com/billing/subscriptions/build-subscriptions?platform=web&ui=elements#collect-payment
Did you read the entire guide?
errant snow
We are not exactly using vanilla html but we are doing something similar in the frontend
errant snow
Did you read the entire guide?
Yes
unique fulcrum
Can you share your code then
errant snow
OK
unique fulcrum
Because the request id you provided had no payment method info attached
errant snow
const startPaymentFlow = async () => {
try {
let displayError = document.getElementById("card-errors");
displayError!.textContent = "";
const _data = data as IPaymentCredentials;
if(props.data.canTryFreeTrial){
const {setupIntent, error } = await stripe.confirmSetup({
elements: stripeElements,
confirmParams: {
return_url: `${useRuntimeConfig().public.baseUrl}/live/schedule`
},
clientSecret: paymentData.value.client_secret
})
if (error) {
// window.toast.error(error)
console.error(error)
return;
}
}
stripeElements = stripe!.elements({
appearance: {
theme: "stripe",
},
loader: "always",
clientSecret: paymentData.value.client_secret,
});
paymentElement = stripeElements.create("payment", {
defaultValues: {
billingDetails: {
email: user.value?.email,
name: user.value?.fullName,
},
},
layout: "tabs",
});
paymentElement.on("change", function (event) {
const { complete } = event;
stripeFieldsAreComplete = complete;
canProceedWithStripePayment.value = complete && customFieldsAreValid;
});
paymentElement.on("ready", () => {
paymentUIIsReady.value = true;
});
paymentElement.mount("#payment-data");
} catch (e: any) {
let displayError = document.getElementById("card-errors");
displayError!.textContent = e.message;
clearInterval(checkPaymentTimer);
}
};
This is run when the page loads.
unique fulcrum
Why are you attempting to confirm setup before you render the payment element?
That should only be done when the element has been filled out with payment method info and the customer clicks pay button
bronze saddleBOT
unique fulcrum
That's why I recommend you follow the guide
errant snow
Oh, I see.
My bad.
Thank you, lemme sort that out.
Reaaly sorry I missed that