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

---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>

---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)

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

Attributes and values in object "config.fields"

---end

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;

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;

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

---end

---end

Table of request-attributes

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

---end

---end

Attributes and values in object "config.defaultStyle"

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

Attributes and values in object "config.autoCardtypeDetection"