#ibracadabra - starting subs with 3ds

1 messages · Page 1 of 1 (latest)

pale owl
#

Hello! Just starting a thread for you -- I'll review and respond as soon as I can 🙂

#

hey there, whats the issue you're having with this?

#

I want the code to support 3D Secure payments

#

ah

#

OK, and where are you stuck with this?

#

Oh, that guide uses a slightly outdated flow

#

Then you can use client side confirmation for the first payment and have 3ds handled automatically

#

ibracadabra - starting subs with 3ds

stuck talon
#

I read from some of the code that you provided

#

but from what I understand

#

the confirmCardPayment already

#

returns the status in the example url that I gave you

pale owl
#

Just quoting from main here for convenience of reading:

I want the code to support 3D Secure payments
My question is at a particular part of the example code given: handlePaymentThatRequiresCustomerAction
I am confused a bit at a part
at confirmCardPayment
result.paymentIntent.status === 'succeeded'
I dont really know how to continue from here
the example code says that a success modal should be shown
but the requests are chained in the example
and I update my Firebase records in onSubscriptionComplete
but in case of 3D secure
subscription is null

stuck talon
#

yes

pale owl
#

The key difference is the default_incomplete usage when creating the subscription

#

In the old guide you linked to, this was not used and you had to handle the branching logic when 3ds was needed vs not

#

In the update flow with default incomplete, this is simplified so that you always confirm the payment client side and 3ds is simply handled

stuck talon
#

ok, I will take a look into what you sent, thank you! in the flow I used I think the payment is set to charge_automatically

#

Thank you very much!

pale owl
#

collection_method is separate from payment_behavior -- those are two different options

#

but you're welcome!

#

I think reviewing the other guide will help you get to a much simpler integration that does what you need with less logic branching

stuck talon
#

Yes, I will try an implementation of it tomorrow.

#

I presume that I can test with 3D secure test card as well?

#

Like the other method

#

(the link that I sent, the old method)

dapper coral
#

yes

stuck talon
#

Yeah I see a problem already 😦

#

The thing is I have a card collection page (with stripe elements)

#

and after that

#

I have a review page listing the subscription details with a button

#

on the old flow it was ok because I created a createPaymentMethod

#

and I could pass the paymentMethodId to the next page in a secure way

#

and after that on Subscribe click I could pass the paymentMethodId and priceId to the Firebase backend

#

and based on session add the customerId to the mix to create the subscription

dapper coral
#

mostly what you want can't be done anymore, you can't have two screens where you temporarily save the details and add a confirm page

#

We do want to support this in the future, but with PaymentElement you can't do that

stuck talon
#

Oh thats an issue then because its specifically requested by our client 😦

#

Isnt any way around this?

#

Not around > a Solution

dapper coral
#

There is, but my advice is to ignore and just explain to them why it's not possible.

#

You'd have to move back to legacy integrations, implement your own card element UI and all that and would be limited to card payments which is bad overall

stuck talon
#

Well yes for now we use only

#

card payments for the mvp

#

so its fine

dapper coral
#

yeah but you'll regret having to rebuild everything in the future, it's just a mistake, so trust me, and don't go down that road

stuck talon
#

does the other method has a deprecation period or something similar?

dapper coral
#

no, it will keep working but you're building a new integration, starting with a legacy method we replaced is a real mistake. Stick with our latest and recommended integration, it's the right move

stuck talon
#

I would if it would be up to me 🙂 but unfortunately its not

#

So in order for what I want to work

dapper coral
#

okay, I tried 😦

stuck talon
#

thank you 🙂

#

So in order

#

for what I want to work

dapper coral
stuck talon
#

I need to go down the road I started?

dapper coral
#

take the time to read this carefully end to end since it's a completely different integration

stuck talon
#

Well I think i was using this one

dapper coral
stuck talon
#

Yes I have a paymentMethod object I think where I can have access to minimal card data

#

last4 digits etc

#

and the card is built from 3 separate

#

elements

dapper coral
#

hum sorry I must have misunderstood the entire issue then 😅

#

my colleague gave you different links that offer a completely different integration with the Payment Element and the confirmPayment() method

#

so my bad, I assumed you were building from scratch and following our official docs

#

so what is blocking you I don't get it

stuck talon
#

I was using this:

#

I assume its the old method?

dapper coral
#

yeah that's the old method

#

so what's the problem?

stuck talon
#

the problem that i was not sure of

#

was at the 3D secure

#

in the handlePaymentThatRequiresCustomerAction

#

confirmCardPayment

#

if (result.paymentIntent.status === 'succeeded') {

dapper coral
#

you want to call confirmCardPayment after your confirmation page, not before

stuck talon
#

well yes I have that as well

#

I have the entire flow

#

starting with createPaymentMethod

dapper coral
#

oh boy

stuck talon
#

:)))

dapper coral
#

okay let's pause for a sec

#

Can you clarify exactly in one unique message (not many messages sequentially because then I'll reply in the middle) what your exact question/problem is?

stuck talon
#

Yes, sorry

dapper coral
#

I promise I'll wait and shut up while you explain instead of interrupting 🙂

stuck talon
#

The problem that I have, is when I reach the confirmCardPayment in the handlePaymentThatRequiresCustomerAction succeeded (after i confirm the 3D secure) modal, I dont really know what to do from there, because my subscription is set to active in Stripe but I need to update my Firestore records for that specific customer and the subscription object is received from the previous method from the chain

#

I make the update only in onSubscriptionComplete but if i pass the subscription object to it (by return on success) its the previous subscription object not the one created (from what i can tell)

dapper coral
#

Okay so one question at a time

#

1/ what is handlePaymentThatRequiresCustomerAction?

#

is that a copy paste of the doc, your own version of the method? Did you change something? Like what exactly is blocking you here

#

I haven't really looked at that specific code since it's a ton of code that we expect people to adapt to their own needs and I'm struggling to grasp what's the problem you have 😅

stuck talon
#

Its exactly the name of the function used in the example

dapper coral
#

yes but I don't know if you have changed the code or literally just copy-pasted as is

stuck talon
#

Its copied and only slightly modifed

dapper coral
#

okay so that isn't working either

#

Can you show me the problem in exact code? I'm so sorry I just... don't get it

#

it's all just simple example code, you mention Firebase in the middle but I don't see the link between all of that and what is blocking you 😦

stuck talon
#

The problem in short is: I need to upate my Firestore with the subscription data, but after 3D secure the subscription data is no longer available to me in onSubscriptionComplete

dapper coral
#

but after 3D secure the subscription data is no longer available to me in onSubscriptionComplete
what is "the subscription data". Like what exactly is missing?

stuck talon
#

all of it 😄 (if i dont return from the success)

dapper coral
#

what does "if I don't return from the success" mean

#

I'm thoroughly lost sorry

stuck talon
#

A sec i will show you the chain

#

This is the example code provided which works fine

#

As you can see the requests get chained into another

#

meaning I need to pass the subscription object from handlePaymentThatRequiresCustomerAction right to onSubscriptionComplete

#

There is a part in the second image where it says: if (result.paymentIntent.status === 'succeeded') {

#

to show a success modal

#

thats the part where I am lost

#

I don't know that I should request / pass the subscription object down the chain to the onSubscriptionComplete function

#

or

#

should I update my Firestore user records directly here: meaning that the subscription is active at this state

dapper coral
#

so first: that does is incredibly complex and highly problematic, that's why we rebuilt the whole thing from scratch in the first place

#

so it's not just you, it's near impossible to grasp and follow

#

But once the PaymentIntent's status is succeeded you're good, you can update your server

#

if it were me, after the success I'd send a request to my Firebase function and have it retrieve the Subscription, confirm its status, and then update my database record

stuck talon
#

So the subscription object received from the previous method is up to date then?

#

I can securely store the information required from it on the customer

dapper coral
#

I don't know. You should never trust client-side data anyway

stuck talon
#

Yes indeed I would send the Id of the subscription and go from there

dapper coral
#

yep that's what I would do

stuck talon
#

🙂 ok then

#

Thank you very much for your help!

dapper coral
#

sorry for all the back and forth. That doc is... not great. It has caused my team soooo many issues because of how complex it is

#

that's why we rebuilt the docs for this from the ground up 😅

stuck talon
#

yes I understand 😄 but in my case I had no choice 🙂

#

Thank you again, and have a nice night / day 🙂