Collect.js: Advanced Inline Implementation
See the advanced HTML example and advanced JavaScript example files for examples.
If the simple implementation does not give you everything you need, then you can use the advanced implementation to customize the experience more to your liking. The options available are extensive, and you may use as many or as few as you want. Below is an example of using every variable possible.
<script
src="https://secure.networkmerchants.com/token/Collect.js"
data-tokenization-key="your-token-key-here"
data-variant="inline"
data-payment-selector="#demoPayButton"
data-style-sniffer="false"
data-google-font="Montserrat:400"
data-validation-callback = "(function (field, valid, message) {console.log(field + ': ' + valid + ' -- ' + message)})"
data-custom-css='{
"background-color": "#a0a0ff",
"color": "#0000ff"
}'
data-invalid-css='{
"background-color":"red",
"color":"white"
}'
data-valid-css='{
"background-color":"#d0ffd0",
"color":"black"
}'
data-placeholder-css='{
"background-color":"#808080",
"color":"green"
}'
data-focus-css='{
"background-color":"#202020",
"color":"yellow"
}'
data-timeout-duration = "2000"
data-timeout-callback = "(function() {console.log('Timeout reached')})
data-fields-available-callback = "(function() {console.log('Collect.js has added fields to the form')})"
data-field-ccnumber-selector = '#demoCcnumber'
data-field-ccnumber-title = 'Card Number'
data-field-ccnumber-placeholder = '0000 0000 0000 0000'
data-field-ccexp-selector = '#demoCcexp'
data-field-ccexp-title = 'Expiration Date'
data-field-ccexp-placeholder = '00 / 00'
data-field-cvv-display = 'required'
data-field-cvv-selector = '#demoCvv'
data-field-cvv-title = 'CVV Code'
data-field-cvv-placeholder = '***'
data-field-checkaccount-selector = '#demoCheckaccount'
data-field-checkaccount-title = 'Account Number'
data-field-checkaccount-placeholder = '000000000000'
data-field-checkaba-selector = '#demoCheckaba'
data-field-checkaba-title = 'Routing Number'
data-field-checkaba-placeholder = '000000000'
data-field-checkname-selector = '#demoCheckname'
data-field-checkname-title = 'Account Name'
data-field-checkname-placeholder = 'Customer Name'
></script>
| Variable | Format | Behavior |
| data-tokenization-key | String | Authenticates the request |
| data-variant | String (“inline” or “lightbox”) | Whether to use “inline” or “lightbox” integration (required for inline integration) Default: “lightbox” |
| data-payment-selector | String | Tells Collect.js what class or id value will trigger the form submission Default: “#payButton” |
| data-style-sniffer | String (“true” or “false”) | Whether Collect.js should try to calculate the style of form fields in your current form and use that as a baseline style for the Collect.js fields (“true” to calculate style, “false” to start with unstyled text fields) Default: “true” |
| data-validation-callback | String | A JavaScript function which will be called each time a Collect.js field attempts to validate. It will recieve three paramaters: a string indicating which field was validated (ccnum or checkname, for example), a boolean for whether or not it validated successfully, and a string which may provide more detailed information about why the validation failed. For broadest compatibility, enclose the function in parentheses like in the example above |
| data-custom-css | JSON String | The CSS rules that will be applied to the fields by default. These override anything provided through the style-sniffer, if used. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property’s name and value. Please see below for a list of the supported CSS properties |
| data-invalid-css | JSON String | The CSS rules that will be added to a field when it fails to validate. These override anything provided through the style-sniffer and the custom-css paramater, if used. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property’s name and value. Please see below for a list of the supported CSS properties |
| data-placeholder-css | JSON String | The CSS rules that will be added to a field when it’s displaying a placeholder. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property’s name and value. Please see below for a list of the supported CSS properties |
| data-focus-css | JSON String | The CSS rules that will be added to a field when it has the keyboard focus. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property’s name and value. Please see below for a list of the supported CSS properties |
| data-valid-css | JSON String | The CSS rules that will be added to a field when it successfully validates and saves. These override anything provided through the style-sniffer and the custom-css paramater, if used. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property’s name and value. Please see below for a list of the supported CSS properties |
| data-google-font | String (Example: “Roboto:400, 700i”) | Directs Collect.js to load font collections available through Google Fonts. This only makes the fonts available in the fields; you must still provide (either directly or through the style sniffer) styles that specify them. List the font name, followed by a colon and the specific weights or variants needed |
| data-timeout-duration | Integer | When form submission is triggered, Collect.js will wait only this long (in milliseconds) for payment data validation and recording to complete. If, by this time, Collect.js is still missing confirmation on vital fields, the data-timeout-callback function will be invokedDefault: “0” which disables the timeout |
| data-timeout-callback | String | A JavaScript function which gets called if data-timeout-duration has passed since we tried to submit the form, but we still haven’t confirmed that enough fields are stored with the token to make a viable payment. This allows for the site to retry submission, or ask the customer to try submission again, if an invalid entry or intermittent connection caused the data storage to fail. For broadest compatibility, enclose the function in parentheses like in the example aboveDefault: an internal function that displays a “Please submit the form again.” alert |
| data-fields-available-callback | String | A JavaScript function which gets called once Collect.js has installed the fields onto your page. A typical use case is to wire up event handlers to the fields when they are enterred or left. For broadest compatibility, enclose the function in parentheses like in the example above |
| data-field-ccnumber-selector | String (CSS Selector) | A CSS selector for the Credit Card Number inline field Default: “#ccnumber” |
| data-field-ccnumber-title | String | A title for the Credit Card Number inline field |
| data-field-ccnumber-placeholder | String | Placeholder text for the Credit Card Number inline field |
| data-field-ccexp-selector | String (CSS Selector) | A CSS selector for the Credit Card Expiration Date inline field Default: “#ccexp” |
| data-field-ccexp-title | String | A title for the Credit Card Expiration Date inline field |
| data-field-ccexp-placeholder | String | Placeholder text for the Credit Card Expiration Date inline field |
| data-field-cvv-display | String (“show”, “hide”, or “required”) | Whether the CVV field is required (“required”), optional (“show”), or not displayed at all (“hide”). If the CVV field is required, a space for it must be provided on the form. Also supported as data-field-cvv for legacy usersDefault: “required” |
| data-field-cvv-selector | String (CSS Selector) | A CSS selector for the CVV inline field Default: “#cvv” |
| data-field-cvv-title | String | A title for the CVV inline field |
| data-field-cvv-placeholder | String | Placeholder text for the CVV inline field |
| data-field-checkaccount-selector | String (CSS Selector) | A CSS selector for Checking Account Number inline field Default: “#checkaccount” |
| data-field-checkaccount-title | String | A title for the Checking Account Number inline field |
| data-field-checkaccount-placeholder | String | Placeholder text for the Checking Account Number inline field |
| data-field-checkaba-selector | String (CSS Selector) | A CSS selector for the Checking Routing Number inline field Default: “#checkaba” |
| data-field-checkaba-title | String | A title for the Checking Routing Number inline field |
| data-field-checkaba-placeholder | String | Placeholder text for the Checking Routing Number inline field |
| data-field-checkname-selector | String (CSS Selector) | A CSS selector for the Checking Account Name inline field Default: “#checkname” |
| data-field-checkname-title | String | A title for the Checking Account Name inline field |
| data-field-checkname-placeholder | String | Placeholder text for the Checking Account Name inline field |
You may also choose to configure Collect.js directly in your JavaScript, For this, you will typically only include the data-tokenization-key parameter in the script tag, and deploy the other options with a CollectJS.configure() call. See the Advanced Inline JavaScript Example for a demonstration with the main available options.
The CollectJS.configure function also lets you specify a callback function that will execute when the customer submits the payment form and payment info has been successfully stored. The callback takes the place of the default “add the payment token and submit the form” behavior and gets passed a “response” variable with the Payment Token. It is your responsibility to ensure this is posted to your server.
For security and compatibility reasons, the styling system- whether provided via custom-css, invalid-css, valid-css, focus-css or calculated using the style-sniffer, only supports the following CSS properties:
Placeholder CSS can only use the following attributes
Any other CSS properties will be ignored.