CODEWITHSUNDEEP
reactjsreact-nativestripe-payments
endlessCode
endlessCode

Reputation: 1405

Stripe react native cardForm align text styling

How do I center align the error "your card number is invalid" and also do text styling on the the card. I cant find any props in their documentation.

My code:

import React,{useState} from "react";
import { View } from "react-native"
import { CardForm } from "@stripe/stripe-react-native"


function App() {
  const [cardDetails, setCardDetails] = useState(null)
  return (
    <View style={{flex:1}}>
          <CardForm
            placeholder={{
              number: "4242 4242 4242 4242",
            }}
            onFormComplete={(cardDetails) => {
              console.log("card details", cardDetails)
              setCardDetails(cardDetails)
            }}
            style={{
              height: 200,
              justifyContent: "center",
              alignItems: "center",
              textAlign: "center",
            }}
            cardStyle={{
              backgroundColor: "#efefefef",
              textAlign: "center",
              textColor: "pink",
            }}
          />
    </View>
  );
}



export default App;

enter image description here

Upvotes: 1

Views: 2142

Answers (1)

qichuan
qichuan

Reputation: 2011

I don't think you can center the text from React Native layer.

For context the CardForm is not implemented in React Native, it's a native view provided by the underneath Stripe iOS/Android SDK, and currently there's no exposed props for you to change the text alignment.

Upvotes: 1

Related Questions