On This Page
Events
You can subscribe to
Microform Integration
events and obtain them through event
listeners. Using these events, you can easily enable your checkout user interface to respond
to any state changes as soon as they happen.Event Name | Emitted When |
---|---|
autocomplete | Customer fills the credit card number using a browser or third-party extension.
This event provides a hook onto the additional information provided during
the autocomplete event. |
blur | Field loses focus. |
change | Field contents are edited by the customer. This event contains various data such as
validation information and details of any detected card types. |
focus | Field gains focus. |
inputSubmitRequest | Customer requests submission of the field by pressing the Return key or
similar. |
load | Field has been loaded on the page and is ready for user input. |
unload | Field is removed from the page and no longer available for user input. |
update | Field configuration was updated with new options. |
Some events may return data to the event listener’s callback as described in the next
section.
Subscribing to Events
Using the
.on()
method provided in the microformInstance
object, you can easily subscribe to any of the supported events.For example, you could listen for the
change
event and in turn display appropriate card art and display brand-specific information.const secCodeLbl = document.querySelector('#mySecurityCodeLabel'); const numberField = flex.createField('number'); // Update your security code label to match the detected card type's terminology numberField.on('change', function(data) { secCodeLbl.textContent = (data.card && data.card.length > 0) ? data.card[0].securityCode.name : 'CVN'; }); numberField.load('#myNumberContainer');
The
data
object supplied to the event listener’s callback includes any information specific to the triggered event.Card Detection
By default,
Microform Integration
attempts to detect the card type as it is
entered. As card numbers are entered, detection information is sent back in the
change
event. You can use this information to build a dynamic user
experience by providing feedback to the user as they type their card number.If{ "card": [ { "name": "visa", "brandedName": "Visa", "cybsCardType": "001", "spaces": [ 4, 8, 12 ], "blocks": [ 4, 4, 4, 7 ], "lengths": [ 13, 14, 15, 16, 17, 18, 19 ], "securityCode": { "name": "CVV", "length": 3 }, "luhn": true, "valid": true, "couldBeValid": true }, { "name": "cartesbancaires", "brandedName": "Cartes Bancaires", "cybsCardType": "036", "spaces": [ 4, 8, 12 ], "blocks": [ 4, 4, 4, 7 ], "lengths": [ 13, 14, 15, 16, 17, 18, 19 ], "securityCode": { "name": "CVV", "length": 3 }, "luhn": true, "valid": true, "couldBeValid": true } ], "empty": false, "couldBeValid": true, "valid": true }
Microform Integration
is unable to determine a single card type,
you can use this information to prompt the customer to choose from a possible range of
values.If
type
is specified in
the microformInstance.createToken(options,...)
method, the specified
value always takes precedence over the detected value.It is up to the merchant to then take the results from
cardDetection
and pass that
into the type
parameter within the
microformInstance.createToken(options,...)
method. Microform Integration
no longer attempts to determine a single card type by default.
Instead, it returns detectedCardTypes
, in the transient token response and the
merchant can decide how to handle this information.Support for Dual-Branded Cards
Microform Integration
supports dual-branded cards. To utilize this feature, you
must include the card networks that have overlapping BIN ranges in the capture context
request. For
example:"allowedCardNetworks": ["VISA", "MASTERCARD", "AMEX", "CARTESBANCAIRES"]
When a card number within an overlapping BIN range is entered,
Microform Integration
returns the detected card types based on the order specified
in the allowedCardNetworks
array. You must then decide which card
type to pass.Autocomplete
By default,
Microform Integration
supports the autocomplete event of
the cardnumber
field provided by certain browsers and third-party
extensions. An autocomplete
event is provided to allow easy access to the
data that was provided to allow integration with other elements in your checkout
process.The format of the data provided in the event might be as follows:
{ name: '_____', expirationMonth: '__', expirationYear: '____' }
These properties are in the object only if they contain a value; otherwise, they are undefined. Check for the properties before using the event. The following example displays how to use this event to update other fields in your checkout process:
const number = microform.createField('number'); number.on('autocomplete', function(data) { if (data.name) document.querySelector('#myName').value = data.name; if (data.expirationMonth) document.querySelector('#myMonth').value = data.expirationMonth; if (data.expirationYear) document.querySelector('#myYear').value = data.expirationYear; });