Inline Integration Tips and Tricks

The Inline Integration system is powerful and flexible, so we’ve compiled some hints to help you make the most of it.

Styling Tips

• If you specify the Style Sniffer option, Collect.js will first create a temporary INPUT element in the form at the location you targeted, and measure the styles from that element to model the actual field after. That means you can target individual payment fields via the CSS on your site.

  For example, you can add a special green border to just the credit card number field as follows:

  <script
      src="https://secure.networkmerchants.com/token/Collect.js"
      data-tokenization-key="your-token-key-here"
      data-style-sniffer="true"
      data-field-ccnumber-selector = '#myCcnumber'></script>
  
  <style>
      #myCcnumber input {
          border-color: green;
          border-width: 3px;
          border-style: solid;
      }
  </style>
  
  <div id="myCcnumber"></div>
  

• Styles provided by the Style Sniffer will be overridden by ones provided in the custom-css paramater, which in turn are overridden by the ones in the invalid-css paramater

• Collect.js lays out its fields on your form with a “width” property of 100%, and a “height” calculated to fit the field as rendered plus provided margins. If you’d like to control the width of the field, or add horizontal space around it, you can specify width and/or padding on the block-level element that the field resides in, allowing the field itself to fill it in horizontally.

• When styling CollectJSValid and CollectJSInvalid classes in your stylesheet, remember these represent the outer edge of an iframe that contains the field. Some CSS rules may not be very visible, or could behave unexpectedly. Body and background colors are unlikely to be visible, but borders and drop shadows are good choices.

• Payment fields have to be retrieved from the Gateway and styled, so you may briefly see a blank space in your page during the loading process. This effect can be mitigated by styling the Collect.js fields to have no border or background, and applying those style components to the div, td, or other block-level element that contains them instead.

Integration Tips

• It’s generally good practice to only let your customer enter credit card or check information on your payment form. However, Collect.js will allow you to include both credit card and electronic check fields in your form, so you could have a token that has encrypted data for both payment types. If all required fields are present for both payment types, then submitting a transaction in the Payment API with this payment_token will process a credit card sale by default, discarding the check data. To use the electronic check data instead, pass the payment variable in your Payment API request with the value check.

• The data-google-font option takes a font string in the same format as you get from the Google Font selection tool. That rool provides a stylesheet link like

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,700i|Roboto:300,400" rel="stylesheet">
  

  The section you need is the portion after family=. and before the closing quotation mark

  data-google-font="Montserrat:400,700,700i|Roboto:300,400"
  

• If you intend to set up custom handlers for the blur or focus events, we suggest preparing a fields-available-callback function to set them up. That will ensure the events are handled as soon as the Collect.js fields are loaded into the page.

• Defining a custom callback is a great way to integrate Collect.js into an AJAX-based purchase process. When the callback is activated, you can retrieve the payment-token and submit it with the rest of the form. confident that the payment info it represents is at least complete and sensibly formatted.

Validation Tips

• For a smoother user experience, disable form submission until you have confirmed that the payment fields are successfully stored, as well as any other pre-transaction checks you perform. Collect.js won’t let the submission process complete until the payment information is sufficient to run a transaction, which may be surprising if a user tries to submit an incomplete or invalid form.