Examples

The following cases act as examples for the use of the XS2A Form API.

Login Form

{
    "formIdentifier": "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.

Example: Login

Example of a rendered login form

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: Access Method with section "Private" expanded

Example of a rendered Access Method form with the section "Private" expanded

Example: Access Method with section "Business" 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"
        }
    ]
}

results matching ""

    No results matching ""