Enable Banking Docs

Auth Flow Customisation for TPPs

# Domain names

A TPP can assign domain names to the web service (deployed in it dedicated environment) for handling of authentication and authorisation flows taking place when end-users (PSUs) interact with their ASPSPs.

This is done by adding an A record to the TPP's DNS, pointing to the IP address provided by Enable Banking.

# UI

# Page structure

<html>
  <body class="{tppName}">
    <div id="app">
      <main>
        <div class="enablebanking-locale">
          <!-- the locale indicator and the modal (pop-up) dialog used for manual locale change -->
        </div>
        <div class="enablebanking-[ais|pis|home]">
          <div class="enablebanking-status">
            <div class="enablebanking-status-spinner">
              <!-- the spinner element appering when an end-user needs to wait -->
            </div>
            <div class="enablebanking-status-message">
              <!-- the messages describing the current status of authorisation -->
            </div>
            <div class="enablebanking-status-error">
              <!-- the messages displayed in case of errors occuring during authorisation -->
            </div>
          </div>
          <!--
            Elements used during authorisation flow, such as the authentication form,
            the account selection form or the OTP input form.
          -->
        </div>
      </main>
    </div>
  </body>
</html>

# Classes

# Body class

The body element includes the class attribute, which is set to the name of the TPP as internally used by the Enable Banking API.

# Page classes

  • enablebanking-home - element wrapping the main content on the root page (/) of the domain assigned for authorisation flow handling
  • enablebanking-ais - element wrapping the main content on the page handling authorisation for access to account information (/ais/)
  • enablebanking-pis - element wrapping the main content on the page handling authorisation of payments (/pis/)

# Locale selection classes

  • enablebanking-locale - element wrapping the locale indicator and the modal (pop-up) dialog used for manual locale change

# Status indication classes

  • enablebanking-status - element wrapping the top part of the pages handling authorisation flow and containing the spinner element, info messages and errors
  • enablebanking-status-spinner - element wrapping the spinner element appering when an end-user needs to wait
  • enablebanking-status-info - element wrapping the messages describing the current status of authorisation
  • enablebanking-status-error - element wrapping the messages displayed in case of errors occuring during authorisation

# Generic action classes

  • enablebanking-cancel-button - button element, which can be used for cancelling authorisation

# Authentication form classes

  • enablebanking-auth-form - form element wrapping the form used for input of credentials required by an ASPSP for authorisation of access to account information or payment authorisation
  • enablebanking-auth-form-method-section - element wrapping the UI for auth method selection
  • enablebanking-auth-form-credentials-section - element wrapping the UI for credentials input
  • enablebanking-auth-form-submit-section - element wrapping the form submission button
  • enablebanking-auth-method-select - select element displayed in case multiple authentication methods are available
  • enablebanking-auth-credential-row, enablebanking-auth-credential-col - nested elements containing the UI for input of one credential
  • enablebanking-auth-credential-input-group - element wrapping the input element and the element used for toggling visibility of the credential input text
  • enablebanking-auth-credential-input - input element used for entering a credential
  • enablebanking-auth-credential-visibility - element used for toggling visibility of the credential input text
  • enablebanking-auth-credential-visibility-caption - element containing the icon indicating visibility of the credential input text
  • enablebanking-auth-credential-description - element containing the credential description
  • enablebanking-auth-submit-button - button element used for submission of the authentication form

# Account selection classes

  • enablebanking-account-selection - element wrapping the account selection UI
  • enablebanking-account-selection-caption - element wrapping the text "Please select an account to pay from"
  • enablebanking-account-selection-form - form element wrapping the form displayed in case payment initiation requires account selection to be done one the TPP side and multiple payment accounts are available to an end-user
  • enablebanking-account-selection-radio-input - input element wrappign the information about one account
  • enablebanking-account-selection-submit-button - button element used for submission of the account selection form

# OTP input form classes

  • enablebanking-otp-form - form element wrapping the form displayed when an end-user is required to input a code for the second factor authentication (so-called embedded SCA flow)
  • enablebanking-otp-input - input element used for input of the second factor OTP
  • enablebanking-otp-submit-button - button element used for submission of the OTP input form

# QR code classes

  • enablebanking-qrcode-container - element wrapping the image or canvas element with the QR code used authentication
  • enablebanking-qrcode-image - image or canvas element with the QR code used authentication

# Custom CSS hosting

A TPP shall host a single file containing CSS customising styles used by the web service for handling of authentication and authorisation flows. Enable Banking will load the custom CSS for the provided URL.

# CSS caching

To ensure that web browsers do not cache outdated versions of the CSS file, you can either:

  1. Redirect from the URL provided to Enable Banking to a URL that includes a content hash in the file name and update the hash whenever the content changes. E.g. https://tpp.domain/custom-auth-flow.css -> https://tpp.domain/custom-auth-flow.8743b5.css

  2. Use advanced caching headers to control how content is cached by web browsers. E.g. Cache-Control: max-age=31536000, must-revalidate, ETag: "8743b5"

# Separate URLs for sandbox and production

It is also possible to use different URLs for sandbox and production environments. This allows testing changes in a sandbox without impacting the production setup.

Example:

  • Sandbox URL: https://tpp.domain/custom-auth-flow.sandbox.css
  • Production URL: https://tpp.domain/custom-auth-flow.production.css