diff --git a/package.json b/package.json index 12eb844a..1b77bb8c 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "homepage": "https://github.com/sbycrosz/react-native-credit-card-input#readme", "dependencies": { - "card-validator": "^2.2.0", + "card-validator": "^3.0.0", "react-native-flip-card": "^3.3.0", "lodash.compact": "^3.0.1", "lodash.every": "^4.6.0", diff --git a/src/CardView.js b/src/CardView.js index 40d0b2a9..d314d7e8 100644 --- a/src/CardView.js +++ b/src/CardView.js @@ -7,7 +7,7 @@ import { Platform, } from "react-native"; -import Icons from "./Icons"; +import defaultIcons from "./Icons"; import FlipCard from "react-native-flip-card"; const BASE_SIZE = { width: 300, height: 190 }; @@ -89,6 +89,7 @@ export default class CardView extends Component { fontFamily: PropTypes.string, imageFront: PropTypes.number, imageBack: PropTypes.number, + customIcons: PropTypes.object, }; static defaultProps = { @@ -108,9 +109,10 @@ export default class CardView extends Component { render() { const { focused, - brand, name, number, expiry, cvc, + brand, name, number, expiry, cvc, customIcons, placeholder, imageFront, imageBack, scale, fontFamily } = this.props; + const Icons = { ...defaultIcons, ...customIcons }; const isAmex = brand === "american-express"; const shouldFlip = !isAmex && focused === "cvc"; diff --git a/src/CreditCardInput.js b/src/CreditCardInput.js index c032ed8d..b23c9e21 100644 --- a/src/CreditCardInput.js +++ b/src/CreditCardInput.js @@ -57,6 +57,7 @@ export default class CreditCardInput extends Component { cardImageBack: PropTypes.number, cardScale: PropTypes.number, cardFontFamily: PropTypes.string, + cardBrandIcons: PropTypes.object, }; componentDidMount = () => this._focus(this.props.focused); @@ -106,7 +107,7 @@ export default class CreditCardInput extends Component { cardImageFront, cardImageBack, inputContainerStyle, values: { number, expiry, cvc, name, type }, focused, requiresName, requiresCVC, requiresPostalCode, - cardScale, cardFontFamily, + cardScale, cardFontFamily, cardBrandIcons } = this.props; return ( @@ -117,6 +118,7 @@ export default class CreditCardInput extends Component { fontFamily={cardFontFamily} imageFront={cardImageFront} imageBack={cardImageBack} + customIcons={cardBrandIcons} name={requiresName ? name : " "} number={number} expiry={expiry}