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.

​

Limits confirmation and How it works

After bank selection, cVRP payers are shown a limits confirmation screen displaying the mandate parameters they are agreeing to, followed by a “How it works” disclosure overlay before they are redirected to their bank. Presented limits The consent screen displays the parameters the payer is agreeing to: per payment limit, periodic limit, and expiry date (or “Ongoing” for open-ended mandates). These must be proportionate to your actual billing pattern and use case - setting limits significantly above what you’ll collect is a Damaging Practice under cVRP scheme rules. A good rule of thumb is 20–25% above your highest expected charge. How it works This overlay covers the mandatory pre-mandate disclosure obligations (cancellation rights, how payments are initiated, and dispute options).

​

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 strong 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. Customisation can be applied at both the application and sub-application level, allowing you to tailor the user experience for individual merchants or use cases.

​

Example customisation options: