Input Restriction in Custom Fields
Add custom fields and implement input restriction methods in your Custom Checkout Form.
While using Custom Checkout, you can add custom fields and restrict their input.
var formatter = Razorpay.setFormatter(parentFormElement)formatter.add('card', cardField).on('change', function() {this.value; // contains the latest unformatted valuethis.el; // contains the reference to cardFieldthis.prettyValue; // contains formatted value. It might not immediately reflect in DOMthis.caretPosition; // index at which caret is right now. reflects element.selectionStartthis.type; // card network. Possible values listed belowthis.maxLen; // maximum permissible length for this type of cardthis.isValid(); // card number validity}).on('network', function(o) {// same params as change event})// restrict format to "MM / YY" formatformatter.add('expiry', expiryField)// restrict to numbers only. typing characters would not produce anything.formatter.add('number', numberField)// this will restrict to numbers, with "+" allowed at first characterformatter.add('contact', contactField)// unbind events once doneformatter.off()
change
Event fired when unformatted value of target input field changes.
network
Event specific to card fields, fired when card type changes.
card network type
visa
mastercard
maestro16
(Maestro cards with 16 digits that also have cvv and expiry)maestro
rupay
American Express
discover
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; // for example, '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();}})
Is this integration guide useful?
ON THIS PAGE