#Swann - react native validation
tawdry pond
Yes! A moment.
import { CardField } from '@stripe/stripe-react-native';
export const styles = StyleSheet.create({
cardField: {
height: 44,
borderColor: 'someHex',
borderWidth: 0.5,
borderRadius: 5,
paddingBottom: 0,
borderBottomWidth: 0.5,
},
});
export const SomeComponent: React.FC = () => {
return (
<CardField
onCardChange={onCardChange}
postalCodeEnabled={true}
style={[styles.cardField]}
cardStyle={{ textColor: 'someHex' }}
/>
)
}
woven crystal
Hm ok thanks for that. Can you include a screenshot to show what you're seeing?
tawdry pond
Yes!
It just goes on forever and I can successfully ad the card
Also I don't see the postal code on the card when I look in the dashboard
Maybe I'm not performing the call to create the card properly?
woven crystal
Can you share that code as well?
Also if you could share any docs you are following for this integrations that would help as well
tawdry pond
Yes I can!
import { useStripe } from '@stripe/stripe-react-native'; // v0.12.0
export const SomeOtherComponent: React.FC = () => {
const stripe = useStripe();
const handleSubmit = async () => {
const { token } = await stripe.createToken({
// Comes from an input we have above the card field
name: nameOnCard.trim(),
type: 'Card',
});
// Call our backend to create the card
const { stripeCard } = axios.post('api/v1/stripe/cards/add-card', {
params: {
tokenId: token.id
}
});
// Update the state with the newly created card
... redux stuff
}
return (
....
)
}
One moment on the docs
I just pieced the solution together from here to be honest. React native does not seem to be a first class citizen when it comes to the documentation haha
There's also this https://stripe.com/docs/payments/accept-a-payment?platform=react-native
But it doesn't have an example of the CardField
Actually, I'm wrong there
woven crystal
Got it. And you can add the card successfully when you provide some long string in the zip field?
You're not seeing any validation at all?
tawdry pond
Right!
But it seems as if the value entered is not even sent to stripe
From the looks of it stripe.createToken also accepts an address parameter
Maybe it's expected to be sent in there? 🤔
Seems kinda weird to have to do that though
woven crystal
What version of the react native lib are you using?
woven crystal
Checking with a colleague
tawdry pond
Haha, I want to steal this 4242 emoji 😂
woven crystal
Sorry for the long delay
So the current expected behavior for our mobile sdks is to not validate postal code unfortunately
I suggest bumping this Github issue: https://github.com/stripe/stripe-react-native/issues/843 if you really want to see this (no guarantee it'll be completed though)
