#vis-fields

1 messages · Page 1 of 1 (latest)

brave quiver
#

@still ridge hi! can you share some of the code you've used and the specific problems you have with it?

i didn't find documentation to use stripe elements in react native.
yes, you wouldn't use Elements, you'd use our React Native SDK.

#

ok, thanks, the code and screenshot helps a little

still ridge
#

<CardForm
onFormComplete={cardDetails => {
console.log('card details', cardDetails);
}}
cardStyle={inputStyles}
autofocus= {true}
style={{
height:Platform.OS=='android'?350:280,
// height:190,
backgroundColor: C.colors.textinputFill.grey,
marginVertical:50,
}} />

const inputStyles: CardFieldInput.Styles = {
borderWidth: 5,
backgroundColor:'green',
borderColor: 'red',
borderRadius: 8,
fontSize: 14,
placeholderColor: 'orange',
};

brave quiver
#

so ok, two issues,

  1. the height doesn't change what you want it to change
  2. on Android the background turns green but it doesn't on iOS
still ridge
#

yes

#

actually i want to customise like ... can you see that email input in screenshot?? like that i need to implement ui for cardno,cvv,mmyy

#

is that possible in react native

brave quiver
#

I don't really have an immediate answer for you as I don't have much React Native experience myself and this is going to take some digging

#

like that i need to implement ui
what does that mean? Like you want it to have the same type of background colour/rounded border as your phone/email fields?

still ridge
#

yes..that same height,width,borderradius,backgroundcolor for cardno, mmyy ,cvv as separate inputs ...here it seem to be attached without margin..

brave quiver
#

It's definitely possible to do, but would need some experimenting!

Also I'm a bit confused, are you using CardField, or the PaymentSheet? Your screenshot seems to show using both of them

still ridge
#

i have tried both cardform (whole card showing one) and cardfield( single box container with all inputs for cardno,cvv,mmyy)

still ridge
brave quiver
#

as I said I can't give you an immediate answer since I'd have to experiment with this myself (I'm trying to run a React Native app I have but it's crashing right now because of an XCode thing)

brave quiver
#

for what it's worth I can customise the CardField this way so it should be possible to make it look like what you're looking for.

<CardField
                style={PaymentComponentStyle.cardField}
....
....
....

const PaymentComponentStyle = StyleSheet.create({
    cardField: {
      height:50,
      borderWidth: 5,
      backgroundColor:'green',
      borderColor: 'red',
      borderRadius: 8,
      fontSize: 14,
    //placeholderColor: 'orange',
},
  });
unknown.png
still ridge
#

yeah .. thanks for this.. but i need to get cardno, mmyy,cvc,zip as separate boxes..and that's i why moved with cardform but had issue in setting height and background color

still ridge
brave quiver
#

yes I fixed it

brave quiver
still ridge
#

yes

brave quiver
#

ok. Give me a bit to try something.

still ridge
#

sure..

brave quiver
#

ok, sorry, my React Native app needs to be updated(I haven't used it since before the CardForm was added to the SDK so I can't directly test this right now and will have to put some time into rebuilding it).

#

so if you're blocked I'd suggest writing a clear email to https://support.stripe.com/email with the full code you have , screenshots, and a clear description of what you're trying to achieve and we can dig in and help!

still ridge
#

ok thanks ..but actually i didn't get what issue you have mentioned...

#

app needs tobe updated?

brave quiver
#

I'm using an old version of stripe-react-native that doesn't have CardForm. I can't update it quickly to the latest version because of some reasons. It's not your problem really! Sorry I can't help directly here with this very specific question about this library, but if you write in we can help, it just takes time!