Vishwesh

[hybrid mango]

Which integration are you using?

[azure raptor]

https://stripe.com/docs/libraries/react-native

https://github.com/stripe/stripe-react-native

I am using above library

[hybrid mango]

Yes, but the official Doc is here https://stripe.com/docs/payments/accept-a-payment?platform=react-native

It use PaymentSheet, a prebuilt UI component which is designed nicely

[azure raptor]

ok

But I am able to view as per screenshot

not sure what I am doing wrong here

All fields are displayed in single row

also I am not able to view the Pay or Submit button

<StripeProvider
publishableKey='pk_test_51NG1G1Db6DzIKfYxEcyiYQKFASNXZaFO0pZCPA3mJPzViMLn0XlKp7e05KLwbU5xJqlONSYKxdwYD5DMOWowd7gc009WiyFZSi'
>
<CardField
postalCodeEnabled={false}
placeholders={{
number: '4242 4242 4242 4242',
}}
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000',
}}
style={{
width: '50%',
height: 50,
marginVertical: 30,
}}
onCardChange={(cardDetails) => {
console.log('cardDetails', cardDetails);
}}
onFocus={(focusedField) => {
console.log('focusField', focusedField);
}}
/>
</StripeProvider>

This is test code I am using

[hybrid mango]

That's the CardField element

I recomment to use PaymentSheet instead

[hybrid mango]

please follow this Doc

[azure raptor]

ok let me try