Versions Compared

Old Version 46

changes.mady.by.user Jonathan Tew

Saved on

compared with

New Version 47

changes.mady.by.user Jonathan Tew

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Removed duplicate FAQ entry

Table of Contents

UltraCart Hosted Credit Card Fields

...

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

ArgumentTypeDescription
jQueryjQueryAn 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"
JSONJSON

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

Note

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.


configobject


PropertyTypeRequiredDescription
sessionCredentialsObjectYesSee SessionCredentials below.
cssUrlsString[]
An optional array of CSS URLs that you would like injected into the iframe to further style the hosted input.
formString
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.
hostedFieldsObjectYesSee HostedFields below.
overlayZIndexInteger
Change the default z-index for the overlay. If not specified then the overlay will use a z-index of 999999.
autoCopyStylesString[]

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"

 ]


...

Due to the asynchronous nature of the hosted field loading, we recommend that you bind your event listener before the call to UltraCartHostedFields.setup.


The following sections demonstrate various types of usages for the UltraCart Hosted Credit Card Fields.

Implementing UltraCart Hosted Credit Card Fields in Simple Form Post Checkouts

...

Doing any of the above will not prevent the hosted fields from working, but your credit card will not be sync'd with the rest of the cart when you call checkect or POST to UCEditor.   

Advanced Topics

I'm having trouble with some old clients not loading the javscript file.  What can I do?

It's not recommended, and rarely needed, but we offer a means to inline the .js file so it can be included directly within your web page or hosted on your server.   If you choose to go this route, please watch this github repository for change notifications.

https://github.com/UltraCart/hosted_fields

UltraCart will provide no other means of change notification.

What happens to the value in the original credit card number field?

...

Whenever the hosted field updates the underlying field with a new value, the change event will be triggered.  This will allow existing JavaScript code to store the new value.  Please note, the value that the underlying form receives will also be the masked card (X's plus the last 4 digits) and the masked CVV2.

What about onfocus and onblur events?

The UltraCart Hosted Credit Card Fields will automatically send these events from the internal iframe to the parent window and trigger them on the original field using the jQuery triggerHandler method.  This means if you've bound some JavaScript to your original field it will still fire without making any special changes to the code.

What if the browser fails to load the iframe for some reason?

...