Ensure Compliance With PCI DSS SAQ A With Our Hosted-iFrame Mode

With the PAYONE hosted-iFrame Mode you have the flexibility with design of integration and an easy PCI DSS certification with level SAQ A.

The basic requirements to be eligible for SAQ A are:

  • Your company accepts only card-not-present (e-commerce or mail/telephone-order) transactions
  • All payment acceptance and processing are entirely outsourced to PCI DSS validated third-party service providers
  • Your company has no direct control of the manner in which cardholder data is captured, processed, transmitted, or stored
  • Your company does not electronically store, process, or transmit any cardholder data on your systems or premises, but relies entirely on a third party(s) to handle all these functions
  • Your company has confirmed that all third party(s) handling acceptance, storage, processing, and/or transmission of cardholder data are PCI DSS compliant
  • Your company retains only paper reports or receipts with cardholder data, and these documents are not received electronically.
and
  • The entirety of all payment pages delivered to the consumer’s browser originates directly from a third-party PCI DSS validated service provider(s).

---end

Solution:

With PAYONE hosted-iFrame mode you will be compliant with all these requirements as the input fields for sensitive credit card data are designed as iframes and are provided by the PCI DSS certified PAYONE platform.

Usage

Include the following JavaScript in your HTML page containing the form:
JavaScript URL: https://secure.pay1.de/client-api/js/v1/payone_hosted_min.js

<script type="text/javascript" src="https://secure.pay1.de/client-api/js/v1/payone_hosted_min.js"></script>

We provide an un-minified and human readable version of the file at https://secure.pay1.de/client-api/js/v1/payone_hosted.js

---end

Please find some samples here:  Hosted Iframe Examples 

Remarks

This JavaScript includes support of classic Client-API features described in chapter "AJAX mode" and "Redirect mode" (see following chapters) to support bank based payments and the PAYONE hosted iFrame mode.
To use the features of the classic Client-API with the new JavaScript you simply have to change "new PayoneRequest(…)" to "new Payone.ClientApi.Request(…)".

Known issues

There is a known issue with an old version (1.6 or before) of framework "prototype" – please ensure to use the current version (at least 1.7).

Brief description

The merchant has to implement:

  • A selector for cardtype (see example: <select id="cardtype">)
    Configure your credit card acceptance here with the desired credit card types.

The selected cardtype has to be passed to the public method "setCardType".

You may also specify in config.cardtype available cardtypes for selection in a PAYONE iFrame.

  • Place a label for each credit card input field and a div-container for the input iframes (see example: <div id="cardpanInput"></div>)
  • Optional: place a div-container to display error messages returned from the creditcardcheck (see example: <div id="error"></div>)
  • Define an object to configure the design of the iFrames (see example: config = )
    • Optional: Attribute "cardtype" can be configured with allowed cardtypes that are displayed in a PAYONE iFrame.
      -> Then the cardtype selector in your shop has to be removed.
    • The attributes "cardpan", "cardcvc2", "cardexpiremonth", "cardexpireyear" are fixed.
    • The value for attribute "selector" refers to the name of your div-container where the PAYONE iFrame should be rendered.
    • You may specify for each field the type of input (text, password, tel and select (month/year only) using the attribute "type" and a CSS-style using the attribute "style".
    • The value for attribute "error" refers to the name of your div-container where error-messages should be displayed.
    • Pass your currently selected language to the config-object
    • Coming Feature, May 2019: Use "styleFocus" and "inputFocus"/"selectFocus" to set/overwrite a new style when an elements gets focused.
  • New Feature: Decide whether you would like to use the feature of automatic cardtype detection. To use this feature simply add a block "autoCardtypeDetection" to the config-section. If enabled the user simply has to enter the PAN and the cardtype is detected automatically (for most major brands). By using a callback-function you may even get the result of the automatic detection, e.g. in order to change your creditcard brand logos.
  • Coming Feature, May 2019: Get an information within your application via callback-function when loading of application is finished. See "events / rendered" in example 3.1.5.5

Once all fields are set you will have to start the public function "iframes.creditCardCheck" which will initiate a creditcardcheck-request. This request will check the entered creditcard details and return a response-object which contains either:

  • response.status = "VALID"
  • response.pseudocardpan containing the unique pseudocardnumber (Pseudo-PAN)
  • response.truncatedcardpan containing the masked creditcard number (masked PAN)
  • response.cardtype containing the selected cardtype
  • response. cardexpiredate containing the entered expiredate (YYMM)

or
  • response.status = "INVALID"
  • response.errorcode -> please refer to the section "error messages"
    • response.errormessage in the specified language

Hosted-iFrame Mode - Table of config attributes

Attributes and values in object "config.fields"

---end

card
type

card
pan

card
cvc2

card
expire
month

card
expire
year

attribute

value

x

 

 

 

 

cardtypes

Define possible cardtypes for selection in PAYONE iFrame, e.g. ["V", "M", "A"].

New cardtype "#" has been implemented to enforce user selection and display "Please select" initially. If used, it should be the first element of the array.

o

o

o

o

o

selector

Name of your div-container, e.g. "cardpan".

Either "selector" or "element" is required.

o

o

o

o

o

element

Javascript Element of the div-container, e.g. "document.getElementById("cardpan")"

Either " element" or "selector" is required.

 

x

x

x

x

size

Size of input field in characters, e.g. "20"

 

x

x

x

x

maxlength

Maximum length of accepted input, e.g. "20"

 

 

x

 

 

length

Array of exact length of accepted input per CC-type

e.g.: length: { "A": 4, "V": 3, "M": 3, "J": 0 }

While optional, we strongly recommend using the "length" parameter so the enforced CVC length corresponds to the selected card type.

 

x

x

x

x

type

Define type of input field:

"text"

input is visible

"tel"

input is visible, simple keyboard is displayed on mobile devices

"password"

input is masked

"select"

display selection/drop-down with possible values
(only valid for month and year)

x

x

x

x

x

style

CSS  style properties for not-focused element, e.g.

font-size: 1em; border: 1px solid #000; background: white; color: red;
width: 145px; height: 70px; font-family: 'Courier'; font-style: italic;
font-weight: bold; text-align: center; letter-spacing: 2px;

Remark:

  • You may use any CSS style property except "url".
  • If "url" is used the style will be ignored as PCI DSS does not allow external ressources.
  • These characters must not be used: "\", "/", "?", "<" and ">"
  • "styleFocus" overwrites "style"

x

x

x

x

x

styleFocus

 

CSS  style properties for focused element, e.g. 

font-size: 1em; border: 1px solid #000; background: white; color: red;
width: 145px; height: 70px; font-family: 'Courier'; font-style: italic;
font-weight: bold; text-align: center; letter-spacing: 2px;

Remark:

  • You may use any CSS style property except "url".
  • If "url" is used the style will be ignored as PCI DSS does not allow external ressources.
  • These characters must not be used: "\", "/", "?", "<" and ">"
  • "styleFocus" overwrites "style"

x

x

x

x

x

iframe

Size, e.g.:

iframe: {
     height: "25px", width: "250px"
}

---end

Some browsers do have problems if only "width" or "height" is specified. So if you want to define height or width for an input field, provide always both.

---end

Hosted-iFrame Mode - Table of request attributes

Table of request-attributes

These attributes and values are allowed in object "request":

---end

attribute

value

request

fixed value: 'creditcardcheck'

responsetype

fixed value: 'JSON'

storecarddata

fixed value: 'yes'

mode

mode for transactions, either 'live' or 'test'

encoding

your encoding, either 'ISO-8859-1' or 'UTF-8'

mid

your Merchant ID

aid

your Account ID

portalid

your Portal ID
checktype

optional configuration - valid for Deutsche Bahn only

Fixed value "TC" -> starting "creditcardcheck with travel cards"

hash

sha2_384 hash over request values (alphabetical order) plus portal key in your PMI portal configuration.

e.g.:

  • aid: '10002', // your AID
  • encoding: 'UTF-8', // desired encoding
  • mid: '10001', // your MID
  • mode: 'live', // desired mode
  • portalid: '2000002', // your PortalId
  • request: 'creditcardcheck', // fixed value
  • responsetype: 'JSON', // fixed value
  • storecarddata: 'yes', // fixed value
  • PMI Portal key: '123456'

hash_hmac("sha384", "10002UTF-810001live2000002creditcardcheckJSONyes", "123456")

=1cf456bf692453613ebb992a3fb859cc347ddc7e94e2ca764efbe8b0089de6964ab1266df0831e59de89dc5291070fe7

---end

Hosted-iFrame Mode - Table of config defaultStyle

Attributes and values in object "config.defaultStyle"

attribute

value

input

CSS style properties for input fields,
e.g. "font-size: 1em; border: 1px solid #000; width: 175px;"

inputFocus

CSS style properties for focused input fields (overwrites “input”),
e.g. "font-size: 1em; border: 1px solid #000; width: 175px;"

select

CSS style properties for focused select fields (overwrites “select”),
e.g. "font-size: 1em; border: 1px solid #000;"

iframe

Size in pixel, e.g.:

iframe{
    height: "25px",
    width: "250px"
}
Some browsers do have problems if only "width" or "height" is specified. So if you want to define height or width for an input field, provide always both.

Hosted-iFrame Mode - Table of config autoCardtypeDetection

Attributes and values in object "config.autoCardtypeDetection"

attribute

value

supportedCardtypes

Define possible cardtypes that should be accepted by automatic detection, e.g. ["V", "M", "A"]

callback

Define a function that is used as a callback-function if result of automatic cardtype detection changes. Detection starts after first 6 digits of the PAN – this is the BIN (Bank Identification Number) of a credit card and the official id for cardtype and origin detection.

This callback-function can be used to change highlighting of logos for selected / detected cardtypes.

Possible result codes in callback-function:

Resultcode Meaning -> Detected for PAN starting

A,D,J,M,O,P,V,U

see cardtype - definition

?

Cardtype not automatically detected

-

Cardtype automatically detected, but not allowed because not in array supportedCardtypes

Further cardtypes may be added in future.

select

CSS style properties for focused select fields (overwrites “select”),
e.g. "font-size: 1em; border: 1px solid #000;"
Some browsers do have problems if only "width" or "height" is specified. So if you want to define height or width for an input field, provide always both.