search

stripe / stripe-react-native

React Native library for Stripe.
https://stripe.dev/stripe-react-native
MIT License
1.28k stars 264 forks source link

Separate input fields for Card #1415

Open lucasbasquerotto opened 1 year ago

lucasbasquerotto commented 1 year ago

Describe the solution you'd like Separate input fields for the card (like react + stripe-js, but for react native in this case).

Describe alternatives you've considered CardForm component with the option to not include specific elements (postal code and country). Not possible at the moment, and not desired overall.

Additional context I want to use the card fields included in our layout, with separate lines, look and feel according to our app.

From what I saw I would need CardForm to use the card in multiple lines, but then there needs to be the country and postal code, which is not present in our (web) form (not required from us).

The remaining option is to use CardField, but this seems to be a one line component that does not even fit in the phone screen, which would cause some users to fail when creating a payment because you can't see if something is not informed (very bad UX). It shows after you type the initial digits, as long as it's correct, but makes it difficult to see as a whole, or to see something remaining.

I expected individual fields like in react-dom (react + stripe-js). It seems that there aren't error codes, only error messages when creating a payment method (the error code is only Failed), so I can't even tell the user what the error is about. Error received (createPaymentMethod):

{"code": "Failed", "declineCode": null, "localizedMessage": "Card details not complete", "message": "Card details not complete", "stripeErrorCode": null, "type": null}

This makes it difficult to show the user a helpful message (we expected codes, and then we would show a message defined by us in the user language).

When the user is typing, if the number is wrong at least he can see it in red, but then the user can't even see the last digits in smaller devices, the cursor goes beyond the input visible space.

A way to not show the brand image in CardField would be helpful (we already show it in a field above in the form), but separate fields would be much better.

With separate fields (Card + ExpiryDate + CVC) many issues in this repository that I see regarding to the customization of the card fields would be solved. Is there a plan to implement it?

MrFarhan commented 1 year ago

Is any one looking into this feedback or it is declined or lined up for next year , or any progress , any thing else ?

aliwaqar981 commented 1 year ago

Any progress on this?