#shaunbaker-reactjs-PaymentElement-Bug
south steeple
rustic tiger
OK. I have a payment element on the page with automatic_payment_methods.enabled === true
Which then renders Card, Google Pay, Klarna and Afterpay
When one of users wants to pay with Klarna/Afterpay they need to pay in full - we default by charging a 10% booking fee
So we update intent
But the UI does not update
Incorrect price messaging - intent.amount === 200
With AfterPay - it provides address fields - which are then populated - but this then errors - as the paymentintent needs shipping info
This is undocumented. Also how can I update the intent with shipping info with data entered in the PaymentElement
With Klarna - if amount is > 1000 GBP - they will not take the transaction - but the Klarna option still shows.
How can I remove a payment option - after updating intents amount?
Like this - AFAIK they will never accept it
agile palm
The Payment Element doesn't automatically update it's UI to reflect changes that were made to the Payment Intent server-side. If you need to have the Payment Element update the only way to currently do that is to destroy the Payment Element (https://stripe.com/docs/js/element/other_methods/destroy) and re-create + mount it again
rustic tiger
Thats insane
What if user has populated the fields etc - the whole thing is going to disappear then reappear empty?
agile palm
Yeah that's correct - at the moment, Payment Element works best for flows where the Payment Intent no longer needs to go through any changes.
rustic tiger
This does not answer the queries though
You have to be in the know re the 1000 limit for Klarna - which Stripe docs etc dont convey
rustic tiger
Yeah that's correct - at the moment, Payment Element works best for flows where ...
Thats not whats being promoted - and this is better than other elements/implementations
Further - when a user populates their address - how do I get it to update intent?
Given thats inside the element should that not update it?
agile palm
Sorry you asked a bunch of questions at once, so I just started with the first one 🙂
As you mentioned with afterpay, a shipping address is required. You can pass this along when the Payment Intent has been created (like in the example here https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#afterpay-clearpay), or you can pass it in client-side as shipping (see https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams-shipping) when you call stripe.confirmPayment(). This shipping address is something that you would be collecting separately in your own UI- the Payment Element is collecting the billing address, not the shipping address
rustic tiger
Hmmm
We don't need or collect the address
Do you know why this is required for afterpay but not for klarna
agile palm
I don't the details about why it's required - only that this is a requirement from afterpay, and not set by us
rustic tiger
Its weird however that the two are done separately - why would we not have that baked into the Element itself - eg Shipping address different to billing address?
To sum up:
Afterpay - requires two forms - one in element for billing - one outside for shipping
Not a great experience imo and spoils the whole UX
Klarna (suspected max amounts) - brute force destroy and re-create when intent amount changes
Is there a max amount you know of for Klarna?
agile palm
I think future improvement related to shipping address collection are being talked about, but there aren't any timelines or details I can share yet
For klarna, the issue here is that there is no Stripe-wide klarna limit. The transaction limit depends on a number of factors like country and how long your account has been using Stripe.
rustic tiger
That may be true on your side - but on theirs its a different thing
Im a merchant ok Klarnas and used to have their APIs etc (terrible experience)
Split payments with them are capped at 1000 GBP
Does afterpay have limits?
agile palm
I believe afterpay does have limits as well, but these questions on the specific transaction limits for each payment method types are better for support (https://support.stripe.com/contact) - we know a lot about integration specific questions here, but not a ton about the specific regulations