card network type
visa
mastercard
maxLen
15
16
19
<script src="https://checkout.razorpay.com/v1/razorpay.js"></script>
Check an example code below:
// shortcut function for document.getElementByIdvar getEl = document.getElementById.bind(document);var formatter = Razorpay.setFormatter(getEl('parent-form'));var cvvField = getEl('card_cvv');formatter.add('card', getEl('card_number')).on('network', function(o) {var type = this.type; // e.g. 'visa'// set length of cvv element based on mastercard cardvar cvvlen = type === 'amex' ? 4 : 3;cvvField.maxLength = cvvlen;cvvField.pattern = '^[0-9]{' + cvvlen + '}$';getEl('card_type').innerHTML = type;}).on('change', function() {var isValid = this.isValid();getEl('card_valid').innerHTML = isValid ? 'valid' : 'invalid';// automatically focus next field if card number is valid and filledif (isValid && this.el.value.length === this.caretPosition) {getEl('card_expiry').focus();}})formatter.add('expiry', getEl('card_expiry')).on('change', function() {var isValid = this.isValid();getEl('expiry_valid').innerHTML = isValid ? 'valid' : 'invalid';// automatically focus next field if card number is valid and filledif (isValid && this.el.value.length === this.caretPosition) {getEl('card_cvv').focus();}})