Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

The PAYONE Frontend hosted-iFrame is configured in the same way as the existing Frontend solution. You can configure the Frontend design via PMI, payment portals, extended configuration. You will now find two tabs named "Classic Frontend (secure.pay1.de)" and "Frontend PCI DSS SAQ A (frontend.pay1.de)". For both frontend configuration the HTML header and footer can be specified and the design of the frontend can be customized.
PAYONE already copied your existing frontend configuration into the configuration for PAYONE Frontend hosted-iFrame. However, the display of the PAYONE Frontend hosted-iFrame may differ from the existing Frontend as the size of an input field and an input iframe may differ. So please verify that the design of the PAYONE Frontend hosted-iFrame meets your expectations.
After setup the new PAYONE Frontend hosted-iFrame you will simply have to replace the URL in your shop:

  • old URL to Frontend: https://secure.pay1.de/frontend/

-> HTML footer/header in PMI-Tab "Classic Frontend (secure.pay1.de)"

  • new URL to PAYONE Frontend hosted-iFrame: https://frontend.pay1.de/frontend/v2/

-> HTML footer/header in PMI-Tab "Frontend PCI DSS SAQ A (frontend.pay1.de)"
Important notes:
The HTML footer and header for "PAYONE Frontend" and "PAYONE Frontend hosted-iFrame" can be and have to be configured separately.
It is recommended to disable the usage of the Frontend classic once the PAYONE Frontend hosted-iFrame has been setup and tested. Otherwise it may be possible that an offender may change the new URL after calling the PAYONE Frontend hosted-iFrame to the old URL.
Feature "auto-submit" must not be used with PAYONE Frontend hosted-iFrame and credit card data.

Customization of hosted-iFrames

You may customize the HTML-type and HTML-CSS for the PAYONE hosted-iFrames. Therefore you may put a script-block named "config" into your HTML Header Code within the PMI-Portal configuration in tab "Frontend PCI DSS SAQ A (frontend.pay1.de)".
This block may look like this (example):

Code Block
languagejs
<script>
config = {
	fields:{
		cardpan: {
			type: "tel",
			size: "21",
			maxlength: "21"
		},
		cardexpiremonth: {
			type: "select",
			size: "2",
			maxlength: "2"
		},
		cardexpireyear: {
			type: "select",
			size: "4",
			maxlength: "4"
		},
		cardcvc2: {
			type: "password",
			size: "4",
			maxlength: "4",
			style: "font-size: 10px; line-height: 12px; width: 60px;"
		}
	},
	defaultStyle: {
		input: " font-size: 10px; line-height: 12px; width: 220px",
		select: "font-size: 10px;",
		iframe: {
			height: "27px",
			width: "98%"
		}
	}
};
</script>


Please pay attention to separate the elements by "," – but not the last element of a list.
Please find a list of supported elements in the next chapter.

Anchor
_Toc531760958
_Toc531760958
Anchor
_Toc425421907
_Toc425421907
Table of config-attributes

These attributes and values are allowed in object "config.fields":

cardtype

cardpan

cardcvc2

cardexpiremonth

cardexpireyear

attribute

value

x

 

 

 

 

cardtypes




Wiki Markup
define possible cardtypes for selection in PAYONE iFrame, e.g. \["V", "M", "A"\]




 

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 }

 

x

x

x

x

type

define type of input field:

typeComments

"text"


"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, 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: if "url" is used the style will be ignored as PCI DSS does not allow external ressources.

x

x

x

x

x

iframe.height

size

x

x

x

x

x

iframe.width

size, e.g.:
iframe: {
height: "25px",
width: "250px"
}

These attributes and values are allowed in object "config.defaultStyle":

attribute

value

input

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

select

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

iframe.height

size in pixel

iframe.width

size in pixel, e.g.:
iframe: {
height: "25px",
width: "250px"
}


Table of Contents
outlinetrue
indent2em
absoluteUrltrue