react-native-credit-card-display

Credit Card Component for React Native -- Display Only. At the moment, it only supports Android and iOS, since react-native-flip-card only supports those two platforms.

Installation

npm install react-native-credit-card-display

or

yarn add react-native-credit-card-display

Usage

import CreditCardDisplay from 'react-native-credit-card-display';

// ...

return (
  <CreditCardDisplay
    number={4242424242424242}
    cvc={123}
    expiration="04/21"
    name="John J. Doe"
    since="2004"
  />
);

Props

| Prop | Description | Default Value | Required | Notes | | ------------ | ------------------------------------------------------------------------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------- | | number | Number to display on the front of the card | undefined | Yes | can be a number or a string. | | name | Name to display on the front of the card | undefined | Yes | | | expiration | Expiration Date to display on the front of the card | undefined | Yes | if passed a number (e.g. 0621), it will be formatted, otherwise displayed as given. | | cvc | CVC to display on the back of the card | undefined | Yes | can be a number or a string. | | since | Year for Customer Since | undefined | no | can be a number or a string. | | flipped | Is the card flipped? | false | no | Use this to programmatically toggle the card. | | friction | Friction for the card flip | 6 | no | I couldn't figure out what this does, but I'm just passing it to react-native-flip-card if anyone wants it. | | fontSize | Base font size to use | 20 | no | will scale all displayed text | | fontColor | Color to use for the numbers and letters | #FFFFFF | no | | | height | Height for card | 190 | no | | | width | Width for card | 300 | no | | | cardStyles | Additional styles to apply to the component from react-native-flip-card | {} | no | | | frontStyles | Additional styles to apply to the front of the card | {} | no | | | backStyles | Additional styles to apply to the back of the card | {} | no | | | frontImage | Alternate image to use for the front of the card | purple card image | no | | | backImage | Alternate image to use for the back of the card | purple card image | no | | | borderRadius | Border Radius to use on the images | 20 | no | |

Note: flipped only toggles the flip, not sets it absolutely (this is a limitation of the library used, react-native-flip-card).

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT