Examples
The following cases act as examples for the use of the XS2A Form API.
Login Form
{
"form_identifier": "ab12c34d-e45f-6789-0a12-3bc4de567fa",
"version": "1.0.0",
"elements": [
{
"key": "LOGINNAME",
"type": "input",
"tags": [],
"version": "1.0.0",
"password": false,
"label": "Login name",
"placeholder": "",
"prefill_value": "",
"read_only": false,
"validator": {
"min_length": 1,
"max_length": 30,
"required": true,
"numeric": true,
"letters": {
"uppercase": true,
"lowercase": true
},
"symbols": true
}
},
{
"type": "context",
"tags": [],
"version": "1.0.0",
"content": [
{
"key": "USER_PASSWORD",
"type": "input",
"tags": [],
"version": "1.0.0",
"password": true,
"label": "Password",
"placeholder": "",
"prefill_value": "",
"read_only": false,
"validator": {
"min_length": 5,
"max_length": 5,
"required": true,
"numeric": true,
"letters": {
"uppercase": true,
"lowercase": true
},
"symbols": true
}
},
{
"type": "text",
"content": "Online banking password, not the PIN of your debit/credit card",
"tags": ["HELPTEXT"],
"version": "1.0.0"
}
]
}
]
}
The JSON object displayed above should result in the rendering of a form that resembles the one displayed below:
In this rendering the text that is tagged as HELPTEXT and grouped in a context element with the password input field only appears if the consumer hovers or clicks the question mark symbol.
However, this behaviour is not mandatory and a design decision by Klarna that does not have to be imitated.
The encrypted payload that has to be passed along when submitting the form above should be structured like this:
{
"form_identifier": "ab12c34d-e45f-6789-0a12-3bc4de567fa",
"data": [
{
"key": "LOGINNAME",
"value": "johndoe"
},
{
"key": "USER_PASSWORD",
"value": "password123"
}
]
}
Access Method Selection
{
"form_identifier": "1a2b34c5-6d7e-8f9a-bc0d-ef1234567890",
"version": "1.0.0",
"elements": [
{
"key": "ACCESS_METHOD",
"type": "switchable",
"tags": ["COLLAPSIBLE"],
"version": "1.0.0",
"selected": "PRIVATE",
"validator": {
"required": true,
"numeric": true,
"letters": { "uppercase": true, "lowercase": true },
"symbols": true
},
"options": [
{
"value": "PRIVATE",
"label": "Private",
"disabled": false,
"content": [
{
"type": "context",
"tags": ["RADIOSELECT"],
"version": "1.0.0",
"content": [
{
"type": "text",
"content": "Sign in",
"tags": ["LEGEND"],
"version": "1.0.0"
},
{
"key": "ACCESS_METHOD_PRIVATE",
"type": "choice",
"tags": ["RADIO"],
"version": "1.0.0",
"label": "Sign in",
"selected": ["BANKID"],
"allow_selected": { "min": 1, "max": 1 },
"options": [
{ "value": "BANKID", "label": "BankID", "disabled": false },
{
"value": "BANKCARD",
"label": "Bank Card",
"disabled": false
},
{ "value": "OTPGENERATOR", "label": "OTP Generator", "disabled": false }
]
}
]
}
]
},
{
"value": "BUSINESS",
"label": "Business",
"disabled": false,
"content": [
{
"type": "context",
"tags": ["RADIOSELECT"],
"version": "1.0.0",
"content": [
{
"type": "text",
"content": "Sign in",
"tags": ["LEGEND"],
"version": "1.0.0"
},
{
"key": "ACCESS_METHOD_BUSINESS",
"type": "choice",
"tags": ["RADIO"],
"version": "1.0.0",
"label": "Sign in",
"selected": ["BUSINESSBANKID"],
"allow_selected": { "min": 1, "max": 1 },
"options": [
{
"value": "BUSINESSBANKID",
"label": "Business BankID",
"disabled": false
},
{
"value": "BUSINESSOTPGENERATOR",
"label": "OTP Generator (Business Version)",
"disabled": false
},
{
"value": "BUSINESSACCOUNTID",
"label": "Business Account ID",
"disabled": false
}
]
}
]
}
]
}
]
}
]
}
The JSON object displayed above should result in the rendering of a form that resembles the one displayed below, once with the "Private" and once with the "Business" section of the switchable expanded.
Example of a rendered Access Method form with the section "Private" expanded
Example of a rendered Access Method form with the section "Business" expanded
The encrypted payload that has to be passed along when submitting the form above should be structured like this:
{
"form_identifier": "1a2b34c5-6d7e-8f9a-bc0d-ef1234567890",
"data": [
{
"key": "ACCESS_METHOD_BUSINESS",
"value": "BUSINESSOTPGENERATOR"
}
]
}