Yapily Hosted Pages UI screens

UI screens

Yapily Hosted Pages includes the following out-of-the-box screens.

Bank selection

Displays the list of supported banks to the end user so they can select which bank they want to pay from.

Consent

If you are a Yapily Connect customer, your users will be shown a consent screen before being redirected to their bank.

This screen states that you are partnering with Yapily Connect as a TPP and includes Yapily Connect’s Terms and Conditions and Privacy Notice. By selecting “continue” the end user is consenting to Yapily Connect initiating a payment from their account and the associated terms.

Note: If you use your own licences the consent page will not be displayed. You should ensure to meet any necessary consent requirements before directing your users to the Hosted Pages flow.

Redirect to bank

Redirects the user to their selected bank to authenticate and authorise the payment request.

The QR code allows desktop users to continue the payment on their mobile bank app.

Mobile bank apps usually offer a more streamlined user experience, enhancing security and reducing the number of steps needed to provide a consent.

Bank login

Provides input fields for the user to submit their bank login username and password.

Additional details

Provides input fields for the user to provide additional information to complete the payment. For example, IBAN number.

Note: This screen is only displayed if the details are required by the bank when confirming user consent for the payment.

SCA selection

Allows the user to select their preferred secure customer authentication (SCA) method. The available methods depend on what the user has configured with their bank.

Note: This screen is only displayed if the details are required by the bank when confirming user consent for the payment.

SCA code entry

Provides an input field for the user to submit the SCA code sent directly to them by the bank.

Note: This screen is only displayed if the details are required by the bank when confirming user consent for the payment.

Loading

Displays a loading screen to the user while the consent authorisation is being confirmed in the background.

Success and redirection

Displays confirmation of the payment initiation to the user. Redirects the user back to your application.

UI customisation

Customisation is available on all screens to create a more consistent experience for your end users as they transition between your application and Yapily Hosted Pages.

The following customisation options are available:

• Custom logo
• Primary colour
• Background colour
• Page background colour
• Primary text colour
• Secondary text colour

Currently, the implementation of customisation requests is managed by Yapily. Please let us know what customisation you would like.

Example customisation options: