Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import * as Payment from "payment";
const input = document.getElementById('input') as HTMLInputElement;
Payment.restrictNumeric(input);
Payment.formatCardNumber(input);
Payment.formatCardExpiry(input);
Payment.formatCardCVC(input);
const card = "1234 5678 9012 3456";
const cardType = Payment.fns.cardType(card);
Payment.fns.validateCardNumber(card);
Payment.fns.validateCardExpiry("1 / 20");
Payment.fns.validateCardExpiry("1", "20");
Payment.fns.validateCardCVC("123", cardType);
handleCardNumberChange(e) {
const cardNumber = e.target.value;
const cardNumberLength = cardNumber.split(' ').join('').length;
const cardType = payment.fns.cardType(cardNumber);
const cardTypeInfo =
creditCardType.getTypeInfo(creditCardType.types[CARD_TYPES[cardType]]) ||
{};
const cardTypeLengths = cardTypeInfo.lengths || [16];
this.setState({
cardImage: CARD_IMAGES[cardType] || placeholder,
cardNumber
});
payment.formatCardNumber(document.getElementById('card-number'));
this.setFieldValid();
if (cardTypeLengths) {
const lastCardTypeLength = cardTypeLengths[cardTypeLengths.length - 1];
for (let length of cardTypeLengths) {
if (
length === cardNumberLength &&
payment.fns.validateCardNumber(cardNumber)
) {
document.getElementById('card-expiry').focus();
break;
}
if (cardNumberLength === lastCardTypeLength) {
this.setFieldInvalid('Card number is invalid');
}
}
componentDidMount() {
const { number, expiration, cvc, zip } = this.refs
Payment.formatCardNumber(ReactDOM.findDOMNode(number).querySelector('input'))
Payment.formatCardExpiry(ReactDOM.findDOMNode(expiration).querySelector('input'))
Payment.formatCardCVC(ReactDOM.findDOMNode(cvc).querySelector('input'))
if (zip) {
Payment.restrictNumeric(ReactDOM.findDOMNode(zip).querySelector('input'))
}
}
componentDidMount: function() {
const el = this.refs.input.getDOMNode();
switch ( this.props.formatter ) {
case 'cardNumber':
Payment.formatCardNumber( el );
break;
case 'cardExpiry':
Payment.formatCardExpiry( el );
break;
case 'cardCVV':
case 'cardCVC':
Payment.formatCardCVC( el );
break;
}
},
componentDidMount() {
Payment.formatCardNumber(this.refs.number);
Payment.formatCardExpiry(this.refs.expiration);
}