How to use creditcards - 10 common examples

export function getCreditCardType( number ) {
	if ( number ) {
		number = number.replace( / /g, '' );

		let cardType = creditcards.card.type( number, true );

		if ( typeof cardType === 'undefined' ) {
			return null;
		}

		// We already use 'amex' for American Express everywhere else
		if ( cardType === 'American Express' ) {
			cardType = 'amex';
		}

		// Normalize Diners as well
		if ( cardType === 'Diners Club' ) {
			cardType = 'diners';
		}

		return cardType.toLowerCase();

export function getCreditCardType( number ) {
	if ( number ) {
		number = number.replace( / /g, '' );

		let cardType = creditcards.card.type( number, true );

		if ( typeof cardType === 'undefined' ) {
			return null;
		}

		// We already use 'amex' for American Express everywhere else
		if ( cardType === 'American Express' ) {
			cardType = 'amex';
		}

		// Normalize Diners as well
		if ( cardType === 'Diners Club' ) {
			cardType = 'diners';
		}

		return cardType.toLowerCase();

function parseExpiration( value ) {
	const [ month, year ] = value.split( '/' );
	return {
		month: creditcards.expiration.month.parse( month ),
		year: creditcards.expiration.year.parse( year, true ),
	};
}

function parseExpiration( value ) {
	const [ month, year ] = value.split( '/' );
	return {
		month: creditcards.expiration.month.parse( month ),
		year: creditcards.expiration.year.parse( year, true ),
	};
}

function parseExpiration( value ) {
	const [ month, year ] = value.split( '/' );
	return {
		month: creditcards.expiration.month.parse( month ),
		year: creditcards.expiration.year.parse( year, true ),
	};
}

$element.on('input', function formatInput () {
            var input = $element.val()
            if (!input) return
            var element = $element[0]
            var formatted = card.format(card.parse(input))

            var selectionEnd = element.selectionEnd
            ngModel.$setViewValue(formatted)
            ngModel.$render()

            if (selectionEnd === input.length && input.length < formatted.length) {
              selectionEnd = formatted.length
            }
            setCursorPostion(element, selectionEnd)
          })
        }

renderPaymentReview() {
		const ccSuffix = this.props.checkout.number.substring( this.props.checkout.number.length - 4 );
		const ccType = card.type( card.parse( this.props.checkout.number ) ).replace( / /g, '' ).toLowerCase();

		return <section>
			<h3>{ i18n.translate( 'Total' ) }</h3>
			<div>
				<div>
					<span></span>
					<span>**** { ccSuffix }</span>
				</div>
				<div>
					{ this.props.selectedDomain.totalCost } { this.props.selectedDomain.currencyCode }
				</div>
			</div>
			{ i18n.translate( 'edit payment method' ) }
		</section>;
	}

$scope.$watch($viewValue, function eagerTypeCheck (number) {
            number = card.parse(number)
            ngModel.$ccEagerType = ccNumber.eagerType = card.type(number, true)
          })
        }

renderCreditCards() {
		const supportedCards = [
			'Visa',
			'MasterCard',
			'Discover',
			'American Express',
		];
		const number = this.props.fields.number.value;
		const cardType = card.type( card.parse( number ), true );
		const enableAllCards = supportedCards.indexOf( cardType ) === -1;
		const classes = {
			visa: ( enableAllCards || cardType === 'Visa' ) ? styles.visa : styles.visaDisabled,
			mastercard: ( enableAllCards || cardType === 'MasterCard' ) ? styles.mastercard : styles.mastercardDisabled,
			discover: ( enableAllCards || cardType === 'Discover' ) ? styles.discover : styles.discoverDisabled,
			amex: ( enableAllCards || cardType === 'American Express' ) ? styles.amex : styles.amexDisabled,
		};

		return (
			<div>
				<div alt="Visa">
				<div alt="Mastercard">
				<div alt="Discover">
				<div alt="American Express">
			</div>
		);</div></div></div></div>

export const createPaygateToken = () => ( dispatch, getState ) => {
	const checkoutForm = getValues( getState().form.checkout ),
		cardDetails = {
			name: checkoutForm.name,
			number: card.parse( checkoutForm.number ),
			cvv: checkoutForm.cvv,
			expirationDate: checkoutForm.expirationMonth + checkoutForm.expirationYear,
			countryCode: checkoutForm.countryCode,
			postalCode: checkoutForm.postalCode
		};

	dispatch( { type: PAYGATE_TOKEN_CREATE } );

	return requestPaygateToken( cardDetails )
		.then( token => dispatch( { type: PAYGATE_TOKEN_CREATE_COMPLETE, token } ) )
		.catch( error => {
			dispatch( { type: PAYGATE_TOKEN_CREATE_FAIL, error } );
			return Promise.reject( error );
		} );
};