MuhammadHamza

[clever horizon]

Hi! Let me help you with this.

Do you want to confirm the PaymentIntent on the frontend?

[mossy cave]

Yes as i want to create a record and redirect after payment successful

[clever horizon]

What do you mean by "create a record"?

[mossy cave]

just submit form after successful payment

i mean a database record

[high notch]

webhook

[mossy cave]

no i cant use that in my scenario

because i need to redirect the user to a specific url on submit

[high notch]

doesnt matter

webhook to payment sucess

redirect is other stuff

events are independent from redirect

yet is just an idea, Think vanya is far better to help you

[mossy cave]

i need to handle in the frontend so that i can redirect on successful payment.

[high notch]

nono, I am not being very explicit

you can listening stripe events in other app, which writes to db

and handle your vercel or whatever as you like

think about it as a service to stripe events

external service

[mossy cave]

i understant what you mean like create a record before payment and update payment success column using webhook

but what i want is no record created until payment successful

so i need to handle it via client side code i have handled it using confirmPayment and redirect if_required but i dont want to redirect as i have no session maintained. it works but there are still some case which causes an issue.

[high notch]

there is specific event regarding to every payment status

paid unpaid...

when you confirmpayment it updates such status

and generates a specific event

yet I know what you mean

dont know if websockets are available in stripe. that could be another way to go

@clever horizon how can Stripe handle this?

[jolly lagoon]

👋 taking over for my colleague. Let me catch up.

@mossy cave and @high notch just give me a few minutes please to catch up with this long thread, will be with you shortly

[high notch]

basically he needs to subscribe to events without webhooks

[jolly lagoon]

yes I'm all set feel free to delurk @high notch I'll take it from here

[high notch]

ok bro

have nice day

[mossy cave]

I can give in a code snippet if required

[jolly lagoon]

yes please do 🙂

[jolly lagoon]

you too 🙂

[mossy cave]

try{ this.setLoading(true); var elements = this.elements const { error } = await this.stripe.confirmPayment({ elements, confirmParams: {}, redirect: 'if_required', }) if(error) throw[error] let res = await this.formSubmit() }catch(error){ if (error.type === "card_error" || error.type === "validation_error") { this.showMessage(error.message); } else { this.showMessage("An unexpected error occured."); Bugsnag.notify(JSON.stringify(error)); } this.setLoading(false); }

[jolly lagoon]

what is the data in your form that you need to submit?

[mossy cave]

customer name address, media files etc.

[jolly lagoon]

you have several ways of handling this

you can either create the customer etc. before directing the customer to the payment's page

you can add all the data to the PIs metadata and listen to Stripe webhooks events

and read the metadata at that point after the payment is successful

[mossy cave]

but i want to redirect the customer to a newly created page based on the form submission

[jolly lagoon]

you shouldn't rely on your form submit but rather on the success of stripe.confirmPayment

you can use redirect: 'always'

[mossy cave]

that would mean i record should be created first then be paid.

[jolly lagoon]

but the idea is, that even if you are redirecting customers to a success page, some customers will close the tab/browser before the redirect is finished, this is why we don't recommend using the frontend to fulfill the orders

[jolly lagoon]

I suggest another way of creating the record after, by adding all the data to the metadata of the PaymentIntent. after that you will listen to the webhooks and add the data record

[mossy cave]

thats up to customer is there anyway the issue is that i need to make a redirect using this window.location.href = ${process.env.CRM_URL}/platform/submissions/${res.uuid}
because i have to send the user to a page of backend application

[jolly lagoon]

then you need to create your customer first, get the uuid, and then pass the url to the https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-return_url

and don't use redirect: 'if_required'

[mossy cave]

hmm what if the payment is unsuccessful.

[jolly lagoon]

you will ask the customer to try another payment method

you can have a status of "pending" for your customer

[mossy cave]

that shouldnt be ok as the form is the good that they need to pay for to submit.

[jolly lagoon]

I don't really follorw

[mossy cave]

i mean the form data they input is the item they have to pay for to submit

if i create a record without payment thats wrong flow for my case.

[jolly lagoon]

If this is an "order"-like thing, the order could be marked as pending, and it won't be fulfilled unless you receive a successful payment event

[mossy cave]

is there really no way to confirm payment of a payment element without a redirect

[jolly lagoon]

there is https://stripe.com/docs/payments/payment-intents/verifying-status#checking-status

but this is not the best way of handling this, because it's really error prone

as I explained above, the customer might closes the tab before the end of the flow

and we should never rely on that

this https://stripe.com/docs/payments/payment-intents/verifying-status#webhooks is the best way of dealing with this scenario

[mossy cave]

Applied the payment status solution it gives this error
code: "payment_intent_incompatible_payment_method"
doc_url: "https://stripe.com/docs/error-codes/payment-intent-incompatible-payment-method"
message: "A payment method of type card was expected to be present, but this PaymentIntent does not have a payment method and none was provided. Try again providing either the payment_method or payment_method_data parameters."
payment_intent: {id: 'pi_3MOKvlKff6voey4i1i5AbOF9', object: 'payment_intent', amount: 55000, amount_details: {…}, automatic_payment_methods: null, …}
request_log_url: "https://dashboard.stripe.com/test/logs/req_tXUeLTwYCbiiy3?t=1673269139"
type: "invalid_request_error"

[eternal rapids]

Hi! I'm taking over this thread.

Can you try to summarize your issue while I catchup with the thread?

[mossy cave]

i want to do client side form submission and redirect to backend page after payment successful. was using confirmPayment with redirect if required and submitting if payment successful and redirecting but for some customers after confirm payment the next method didnt trigger but payment was deducted.

[eternal rapids]

When you call confirmPayment, the user will be redirected to your return_url. And on that URL you can check the status of the PaymentIntent with https://stripe.com/docs/payments/payment-intents/verifying-status#checking-status-retrieve
But as mentioned earlier, we strongly recommend using webhook events to be notified of when a payment is successful.

[mossy cave]

i want to do an api call to create a record in crm and then redirect a user to crm url

[eternal rapids]

And you want to make this call before the user is redirected?

[mossy cave]

yes

const {paymentIntent, error} = await this.stripe.confirmCardPayment(this.payment_intent.clientSecret);
debugger
if (error) {
// Handle error here
if (error.type === "card_error" || error.type === "validation_error") {
this.showMessage(error.message);
} else {
this.showMessage("An unexpected error occured.");
Bugsnag.notify(JSON.stringify(error));
}
this.setLoading(false);
} else if (paymentIntent && paymentIntent.status === 'succeeded') {
let res = await this.formSubmit()
window.location.href = ${process.env.CRM_URL}/platform/submissions/${res.uuid}
// Handle successful payment here
}

i want to make this work

[eternal rapids]

I don't think that's possible. Once you call confirmCardPayment, users might be directly redirected to your return_url.
So if you need to create a record in your CRM, you either:

• Add it when you receive the event payment_intent.succeeded (the recommended option)
• Or add it on the return_url, after checking that the PaymentIntent status is succeeded

[mossy cave]

can we have a return url added based on form submit if payment intent succeeded.

[eternal rapids]

What do you mean?