Express Checkout HTML Guide

The hostedPCI Express Checkout solution is designed to integrate with any ecommerce site that requires credit card and CVV information capture. The express checkout solution uses an iframe module that is installed on the main ecommerce sites payment pages. The iframe only displays the credit card fields which are in scope for PCI compliance, that is the credit card number and CVV field. The rest of the page is presented by the ecommerce application as usual.

The iframe module is designed to use the main ecommerce sites payment form to submit credit card information to hostedPCI and have hostedPCI return the credit card token back to the ecommerce application. Creating the token through hostedPCI is the first step to maintaining a PCI compliant environment using the HostedPCI toolset.

Backend processing of the HPCI token is described in Checkout Web Services API Guide

Key Terms

VARIABLEDESCRIPTION
hpciSiteIdThe site id (a number) configured and provided by HPCI after the activation of the HPCI account. There will be a different Site Id for staging and live sites.
locationThe location reference within the HPCI application. Locations are configured through the HPCI customer portal.
fullParentHostIs the full hostname where the parent ecommerce site resides (not the iframe).
fullParentQStrIs the query string currently used by the payment page where the iframe resides. This parameter is required for backward compatibility with browsers that do not support “post” frame messages. This string has to match the current url that appears on the browser address bar.
jqVersionThis setting is optional, allows control on the JQuery version of the iFrame that is being used. Available versions are 1.11.2 or 2.1.3 or 1.4.1. Values can be [jq1 | jq2 | jqdef] respectively. This parameter need the V2 iFrame to be enabled in order for it to work.
browserTypeThis setting is optional, sets the iFrame for mobile or desktop use. Values can be [mobile | def]
cvvValidateSet the value of the parameter to Y if basic CVV form validation is required. Basic validation will report an error if the entered value is not numbers only and is not between 3 and 4 characters regardless of credit card type.
reportCCTypeSet the value of the parameter to Y if preliminary credit card and CVV data needs to be reported once the user has entered the details and moves the focus from the respective fields. Credit card type, credit card and CVV length and credit card validity using Mod 10 check is reported.
reportCCDigitsThis function is optional and requires iFrame V2 to be enabled on the account. This function enables key press feedback from the ccNum field within the iFrame. Set to Y if CC data needs to be reported back during key press.
formatCCDigitsCredit card formatting feature, automatically add delimiter while customer types the card in, for example “4444333322221111” will be turned to “4444-3333-2222-1111”. Turn on or off [Y/N].
formatCCDigitsDelimiterCredit card formatting feature, set the delimiter value which can be space, dash or tab, just need to remember that the value has to be URL encoded [%20/-/%09].
reportCVVDigitsThis function is optional and requires iFrame V2 to be enabled on the account. This function enables key press feedback from the ccCVV field within the iFrame. Set to Y if CVV data needs to be reported back during key press.
hpciCCFrameNameThe name of the iframe used for displaying the credit card entry fields.
hpciSiteSuccessHandlerThe reference to the function that handles successful credit card mapping. This function will typically copy the mappedCCValue, mappedCVVValue parameter values to form hidden fields that need to contain the credit card and CVV values respectively. Finally this function should submit the order processing form that encloses the credit card entry fields.
hpciSiteErrorHandlerThe reference to the function that displays the credit card mapping errors. Typically the following function uses DHTML/DOM to display the error.
hpci3DSitePINSuccessHandlerThis function is optional and needs to be implemented only for sites that use 3D Secure functionality. The reference to the function that handles successful PIN validation. This function will typically submit the order processing form that encloses the credit card entry fields and the PIN validation iFrame.
hpci3DSitePINErrorHandlerThis function is optional and needs to be implemented only for sites that use 3D Secure functionality. The reference to the function that displays the PIN validation errors. Typically the following function uses DHTML/DOM to display the error.
hpciCCPreliminarySuccessHandlerThis function is optional and needs to be implemented only for sites that use reportCCType functionality. The function signature should accept credit card type, BIN, validity flag and length in that order.
hpciCVVPreliminarySuccessHandlerThis function is optional and needs to be implemented only for sites that use reportCCType functionality. The function signature should accept CVV length.
hpciCCDigitsSuccessHandlerThis function is optional and requires iFrame V2 to be enabled on the account and needs to be implemented for sites that use key press functionality. The function signature should accept credit card type, BIN, validity flag and length in that order.
hpciCVVDigitsSuccessHandlerThis function is optional and requires iFrame V2 to be enabled on the account and needs to be implemented for sites that use key press functionality. The function signature should accept CVV length.
sendHPCIChangeClassMsgThis function is optional and requires iFrame V2 to be enabled on the account and needs to be implemented for sites that require changes to the class of the fields inside the iFrame based on interactive feedback during customer keypress of CC/CVV data. The function signature expects elementId of ccNum/ccCVV from within the iFrame and replaces the class with the new classValue that can correspond to the classes from the style header of the iFrame.
enableTokenDisplaySet to “Y” if you want the iFrame to show pre-populated masked value that is stored inside. It applies to both credit card and CVV fields. If it’s not empty, it means there is already a value stored inside.
ccNumTokenIdxThis parameter is used to define which iFrame index is going to be used. Used mainly for instances where you would need to load multiple iFrames on the same page. Set to “1” unless there is a need for multiple iFrames on the same page. Required for CVV only iFrame.
ccNumTokenIs the credit card token that is associated with the CVV iFrame. To re-tokenize CVV for token 4111-1111-1111-1111 set this parameter to “4111111111111111”.

Installing the iFrame

The HostedPCI iFrame can be installed in a few different ways, the first would be the basic iFrame model with the CVV. This version of the iframe is basic in functionality, the iFrame V2 version is the second generation iFrame the difference with this iFrame allows companies to use keystroke feedback capabilities which can provide you customer with an idea of if they missed a digits or added a digits, the keystroke feedback also as the ability select the card type based on the first 4 digits of the PAN number. With the HostedPCI iFrame you also have the ability to set a CVV only iFrame or a credit card PAN only iFrame depending on your business needs.

Iframe Prerequisites

In order to install the iFrame and have it communicate with the main eCommerce payment form, some prerequisite JavaScript is required.

Required JavaScript Includes

<script src="https://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/hpci-cciframe-1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/jquery.ba-postmessage.2.0.0.min.js" type="text/javascript" charset="utf-8"></script>

Optional JavaScript Includes

<script src="https://ccframe.hostedpci.com/WBSStatic/site60/proxy/js/jquery-1.4.1.min.js" type="text/javascript" charset="utf-8"></script>