1 UltraCart Hosted Credit Card Fields

UltraCart Hosted Credit Card Fields

Overview

UltraCart Hosted Credit Card Fields provides a mechanism to meet the new PCI 3.0 requirements without limiting your integration options or user interface.

UltraCart Hosted Credit Card Fields are seamless iframe inputs that collect the sensitive credit card data from the customer within your checkout without requiring substantial modification to your existing HTML, CSS, or JavaScript. This will help you meet the the new data security mandates of PCI 3.0, while ensuring your organization can complete the simplest self assessment questionnaires.

Retains your ability to control the styling of the input
Helps maintain your eligibility for SAQ-A PCI certification
Comes standard in the legacy checkout and StoreFronts.
Requires minimal changes to external forms or API based checkouts.

What is the New PCI 3.0 Requirement?

As the PCI (Payment Card Industry) standard continues to evolve there are new requirements that must be implemented to maintain the security of card holder data. With PCI 3.0, which comes into full effect in 2015, there is a new requirement that ALL sensitive payment data form fields MUST come from the PCI-DSS certified provider. If your website is serving up the input fields associated with the PAN (primary account number 15-16 digits) or the card verification number (CVV/CVV2) then you will be exposing yourself to SAQ-EP (all 12 requirements of PCI) instead of SAQ-A (2 requirements of PCI).

Setup an Integration

Once you read the instructions below, this checklist may help you upgrade sites using UCEditor POSTs. Sorry - we don't have one for javascript checkouts yet. Those tend to vary widely.

Prerequisites

The first step in integrating UltraCart Hosted Credit Card Fields into your site is to include the three prerequisite script files.

jQuery
JSON
UltraCart Hosted Credit Card Fields.

The easiest way to include these three scripts is to use the block of code below.

<script type="text/javascript" src="https://token.ultracart.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://token.ultracart.com/js/json3.min.js"></script>
<script type="text/javascript">
  // Take the version that we just included and scope it locally.  The noConflict will return $ and jQuery to their
  // original values so that the version of jQuery used for the hosted fields does not conflict with any other existing
  // version of jQuery or other JS library that use $ that are on the page.
  var jQueryHostedFields = $.noConflict(true);
  // Also make sure that we're providing consistent JSON functionality in browsers, but don't pollute existing libraries
  // by running our version in noConflict mode.  This will restore whatever is there similar to jQuery.
  // This will also make sure we have a JSON implementation in older versions of IE.
  var jsonHostedFields = JSON3.noConflict();
</script>
<script type="text/javascript" src="https://token.ultracart.com/checkout/checkout-hosted-fields-1.0.js"></script>
<script type="text/javascript">window.UltraCartHostedFields || document.write('<script src="//token.ultracart.com/checkout/checkout-hosted-fields-1.0.js?r=' + new Date().getTime() + '"><\/script>')</script>

UltraCartHostedFields.setup

There is only one method call needed to add the UltraCart Hosted Credit Card Fields to your page. This static method processes the configuration and returns an instance object.

Parameters

Argument	Type	Description

Argument

Type

Description

jQuery

An instance of jQuery. If you're using our sample above then the value would be "jQueryHostedFields", but if you already have jQuery available on the page then you can use "jQuery"

JSON

An instance of the JSON object. If you are using our sample above then the value would be "jsonHostedFields".

Most browsers provide their own JSON object which can be used by the API, but including an external version as the sample above provides consistency across all browsers and versions.

config

object

Property	Type	Required	Description
sessionCredentials	Object	Yes	See SessionCredentials below.
cssUrls	String[]		An optional array of CSS URLs that you would like injected into the iframe to further style the hosted input.
form	String		An optional jQuery selector to locate the form. The underlying fields will be re-enabled before submission so that the masked values will be submitted.
hostedFields	Object	Yes	See HostedFields below.
overlayZIndex	Integer		Change the default z-index for the overlay. If not specified then the overlay will use a z-index of 999999.
autoCopyStyles	String[]		By default, the hosted fields will copy a set of common styles from the underlying field to the input. This helps to keep fonts, colors, borders, etc. looking the same within the hosted field as the underlying field. If nothing is specified, then the default set of styles copied is: [ // Padding "paddingBottom", "paddingLeft", "paddingRight","paddingTop", // Text "lineHeight", "fontSize", "fontFamily", "fontStyle", "fontWeight", // Color "backgroundColor", "color", // Border "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius","borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderLeftColor", "borderLeftStyle","borderLeftWidth", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth" ]

Returns

Type	Description

Type	Description
UltraCartHostFields	Instance of the hosted fields object. This variable should be stored way if any of the advanced methods need to be called.