Next Steps {#microform-integ-next-steps} ======================================== After you complete the server-side and client-side setup for accepting payment information with `Microform Integration`, you can customize your configuration: * **Styling** : Customize the style and behavior of `Microform Integration` on your site. For information, see [Styling](/docs/vas/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/microform-integ-next-steps/styling-v2.md ""). * **Events** : Subscribe to `Microform Integration` events and obtain them through event listeners. For information, see [Events](/docs/vas/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2/microform-integ-next-steps/events-v2.md ""). Styling {#styling-v2} ===================== `Microform Integration` can be styled to look and behave like any other input field on your site. General Appearance {#styling-v2_id18AB90TB05Z} ---------------------------------------------- The `<iframe>` element rendered by Microform has an entirely transparent background that completely fills the container you specify. By styling your container to look like your input fields, your customer will be unable to detect any visual difference. You control the appearance using your own stylesheets. With stylesheets, there are no restrictions and you can often re-use existing rules. Explicitly Setting Container Height {#styling-v2_id18AB90UF0Y4} --------------------------------------------------------------- Typically, input elements calculate their height from font size and line height (and a few other properties), but `Microform Integration` requires explicit configuration of height. Make sure you style the height of your containers in your stylesheets. Managed Classes {#styling-v2_id18AB90W0LHS} ------------------------------------------- In addition to your own container styles, `Microform Integration` automatically applies some classes to the container in response to internal state changes. | Class | Description | |:-------------------------------|:------------------------------------------------------------------| | `.flex-microform` | Base class added to any element in which a field has been loaded. | | `.flex-microform-autocomplete` | The field has been filled using an `autocomplete/autofill` event. | | `.flex-microform-disabled` | The field has been disabled. | | `.flex-microform-focused` | The field has user focus. | | `.flex-microform-incomplete` | The field is incomplete and could be valid. | | `.flex-microform-invalid` | The input card number invalid. | | `.flex-microform-valid` | The input card number is valid. | To make use of these classes, include overrides in your application's stylesheets. You can combine these styles using regular CSS rules. Here is an example of applying CSS transitions in response to input state changes: ``` .flex-microform { height: 20px; background: #ffffff; -webkit-transition: background 200ms; transition: background 200ms; } /* different styling for a specific container */ #securityCode-container.flex-microform { background: purple; } .flex-microform-focused { background: lightyellow; } .flex-microform-valid { background: green; } .flex-microform-valid.flex-microform-focused { background: lightgreen; } .flex-microform-autocomplete { background: #faffbd; } ``` Input Field Text {#styling-v2_id18AB90000UI} -------------------------------------------- To style the text within the iframe element, use the JavaScript library. The `styles` property in the set-up options accepts a CSS-like object that allows customization of the text. Only a subset of the CSS properties is supported. ``` const customStyles = { 'input': { 'font-size': '16px', 'color': '#3A3A3A' }, '::placeholder': { 'color': 'blue' }, ':focus': { 'color': 'blue' }, ':hover': { 'font-style': 'italic' }, ':disabled': { 'cursor': 'not-allowed', }, 'valid': { 'color': 'green' }, 'invalid': { 'color': 'red' } }; const flex = new Flex('..........'); // apply styles to all fields const microform = flex.microform({ styles: customStyles }); const securityCode = microform.createField('securityCode'); // override the text color for the card number field const number = microform.createField('number', { styles: { input: { color: '#000' }}}); ``` Supported Properties {#styling-v2_id18AB9A005YK} ------------------------------------------------ These CSS properties are supported in the `styles: { ... }` configuration hash. Unsupported properties are not added to the inner field, and a warning is output to the console. * `color` * `cursor` * `font` * `font-family` * `font-kerning` * `font-size` * `font-size-adjust` * `font-stretch` * `font-style` * `font-variant` * `font-variant-alternates` * `font-variant-caps` * `font-variant-east-asian` * `font-variant-ligatures` * `font-variant-numeric` * `font-weight` * `line-height` * `opacity` * `text-shadow` * `text-rendering` * `transition` * `-moz-osx-font-smoothing` * `-moz-tap-highlight-color` * `-moz-transition` * `-o-transition` * `-webkit-font-smoothing` * `-webkit-tap-highlight-color` * `-webkit-transition` Events {#events-v2_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. | [Events] Some events may return data to the event listener's callback as described in the next section. Subscribing to Events {#events-v2_id18ABA0R07HT} ------------------------------------------------ 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 = microform.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 {#events-v2_id18ABA0UC0PF} ----------------------------------------- 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. ``` { "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 } ``` If `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. Support for Card Types without Security Code -------------------------------------------- Some card types, such as KCP and UATP, do not have security codes (CVV or CVN). `Microform Integration` supports these card types and provides automatic card detection. This enables you to dynamically display the fields that are relevant for the detected card type. If you support only card types that do not have security codes, you must render only the card number field and the required fields. Do not render the security code field. If you support card types that do not have security codes as well as cards types that do have security codes, you can use card detection to determine if the security code field should be enabled or disabled based on the card details that are entered by the customer. This example shows an implementation that accounts for both cards that do and do not have security codes: ``` const numberField = microform.createField('number'); const securityCodeField = microform.createField('securityCode'); numberField.on('change', function (data) { // Check if detected cards don't have a security code const allCardsWithoutSecurityCode = data.card && data.card.length > 0 && data.card.every(function (card) { return card.securityCode === false; }); if (allCardsWithoutSecurityCode) { // Disable the security code field only when detected cards don't require a security code securityCodeField.update({ disabled: true }); } else { // Enable the security code field when any card requires CVV securityCodeField.update({ disabled: false }); } }); ``` Autocomplete {#events-v2_id18ABA0X05PN} --------------------------------------- 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. Verify the properties before using the event. This 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; }); ``` Security Recommendations {#security-recommendations-v2_SecurityRecommendations} =============================================================================== By implementing a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ""), you can make use of browser features to mitigate many [cross-site scripting attacks](https://www.owasp.org/index.php/Cross-site_Scripting_(XSS) "").