Credit card details fields are unclear and can lead to abandoning cart

[AdrienSICKLO]

Describe the bug Usually, when on a website to buy something, placing credit card details is done by filling in 3 different fields that are the actual number, the expiration date of the card and the CVV field.

In our case, everything is expected in one field which is super counter intuitive.

To Reproduce Steps to reproduce the behavior:

1. Go to 'any restaurant..'
2. Click on 'products.'
3. Go to checkout
4. See error

[Kooglof067]

Something to add to this : I tried to use the gpay automatic filling method and it failed, but when I filled it manually it worked fine.

Sorry I didn't know how to put this but this is Valentin who write so text me if you need more explanation.

Thank you :)

[vladimir-8]

I see that the legacy Card Element that is currently used supports displaying card input as 3 different fields: https://stripe.com/docs/payments/payment-card-element-comparison

[vladimir-8]

Later on we could look into migration to a new Payment Element https://stripe.com/docs/payments/payment-element

[vladimir-8]

After looking at it more closely, I see that Card Element can do it only on the web. On the mobile app, it's possible to display card input as three different fields (CardForm), but then it adds country and postal code fields:

Currently, it's not possible to hide them, and I see people are asking to allow it for a few years already :(

I found a comment which says that it's possible to hide them in the new Payment Sheet component, but I can not verify that without a test setup: https://stripe.com/docs/payments/accept-a-payment?platform=react-native&ui=payment-sheet

So here are the options I see at the moment:

1. Leave it as it is until it's implemented in the stripe library
2. Switch to CardForm component, even if it requires us to add country and postal code
3. Switch to the Payment Sheet component, which maybe let us show these three fields without country and postal code. But it's the latest way to integrate that Stripe has, plus it adds support for more payment methods, including Apple and Google Pay. https://stripe.com/docs/payments/payment-element It will be a bigger effort, including changes on the backend. https://github.com/coopcycle/coopcycle/issues/50

What do you think? @Paul-Eraman-CoopCycle @AdrienSICKLO

[Kooglof067]

Option 3 seems to be very nice but on the other hand if it's requires less work, option 2 can be a good compromise (I guess ?)

[alexsegura]

Switch to CardForm component, even if it requires us to add country and postal code

IMHO it would cause other problems. As said in the initial message, usually you are not asked for your country and postal code.

[alexsegura]

I'm sorry, but this issue comes with no proof that the current credit card field leads to abandoning carts.

How has this issue been identified? User testing? Phone calls from customers? How frequently is it reported?

[alexsegura]

I mean, the credit card field we are currently using is the default UI from Stripe, who has a team of designers who have been working on optimizing it. We are not the only ones using it as-is.

It is what Stripe recommends to use, it does not have custom code (= more maintenance in the future).

I would not recommend touching any of it.

[alexsegura]

CardForm is considered as deprecated.

https://github.com/stripe/stripe-ios/issues/1932#issuecomment-1868445798

[Paul-Eraman-CoopCycle]

Doesn't show spain or french examples on a first look, but the EUR one has paypal and bancontact, seems like even if this isnt an abandoning cart situation, the new modal has some nice improvements, no?

[AdrienSICKLO]

Hey, sorry I had missed those notifications. I was actually ordering myself with Marina and Remi, and it took us 30sec to realize that it was possible to order and this was not a bug. I checked on both competitors Deliveroo and Uber and they both have the 3 fields. Like 99,9% e commerce websites in France