Additional Tips

Changing display text for month drop down

To change the display text in month selection drop down just add this code block just before initiating the iFrames via “new Payone.ClientApi.HostedIFrames (config, request)” in your shop:

---end

display text for month drop down
Payone.ClientApi.Language.de.months.month1 = "Januar";
Payone.ClientApi.Language.de.months.month2 = "Februar";
Payone.ClientApi.Language.de.months.month3 = "März";
…
Payone.ClientApi.Language.en.months.month1 = "January";
Payone.ClientApi.Language.en.months.month2 = "February";
Payone.ClientApi.Language.en.months.month3 = "March";
…

---end

Please pay attention to replace “en” by your desired language. Further languages can be added.

Changing display text for error messages

To change the display text for error messages add this code block just before initiating the iFrames via “new Payone.ClientApi.HostedIFrames (config, request)” in your shop:

---end

display text for error messages
Payone.ClientApi.Language.en.invalidCardpan = "your error text";
Payone.ClientApi.Language.en.invalidCvc = "your error text";
Payone.ClientApi.Language.en.invalidPanForCardtype = "your error text";
Payone.ClientApi.Language.en.invalidCardtype = "your error text";
Payone.ClientApi.Language.en.invalidExpireDate = "your error text";
Payone.ClientApi.Language.en.invalidIssueNumber = "your error text";
Payone.ClientApi.Language.en.transactionRejected = "your error text";
…
other languages if desired

---end

Please pay attention to replace “en” by your desired language. Further languages can be added.

Specifying placeholder text for input fields

A placeholder text can be specified per input field (type “text”, “password” and “tel”); a placeholder text can not be specified for input field type “select”. Therefore add this block just before initiating the iFrames via “new Payone.ClientApi.HostedIFrames (config, request)” in your shop:

---end

placeholder text for input fields
Payone.ClientApi.Language.de.placeholders.cardpan = 'Kartennummer';
Payone.ClientApi.Language.de.placeholders.cvc = 'CVC';
Payone.ClientApi.Language.de.placeholders.expireMonth = '(MM)';     // not for input field type “select”
Payone.ClientApi.Language.de.placeholders.expireYear = '(JJJJ)';    // not for input field type “select”
…
Payone.ClientApi.Language.en.placeholders.cardpan = 'Cardnumber';
Payone.ClientApi.Language.en.placeholders.cvc = 'CVC';
Payone.ClientApi.Language.en.placeholders.expireMonth = '(MM)';     // not for input field type “select”
Payone.ClientApi.Language.en.placeholders.expireYear = '(YYYY)';    // not for input field type “select”
…

---end

Please pay attention to replace “de”/“en” by your desired language. Further languages can be added.

Change style for active input fields

You can specifiy the style for an input field like this:

---end

style for active input fields
cardpan: {
                    selector: "cardpan",
                    style: "font-size: 14px; border: 1px solid #000;",
                    type: "input"
                },

---end

To change the stly of the element when it gets focused, simply add “styleFocus”:

---end

styleFocus
cardpan: {
                    selector: "cardpan",
                    style: "font-size: 14px; border: 1px solid #000;",
                    styleFocus: "font-size: 12px; border: 1px solid orange;",
                    type: "input"
                },

---end