The Bank Selection Interface includes customizable screens for payers to select their bank and complete any necessary authorization steps. Simply set the field UseAuthorisationLandingPages= true in the Payment Initiation Request to use this feature. It makes integration easier and streamlines the payment process. These are the typical steps to carry out a payment:
Typical Steps
Step 1: Choose bank and provide necessary information
After clicking the "Pay " button, payers can select their bank from the supported options. We display icons for popular banks, group related banks, and allow for free searching by bank name to simplify the process. In certain cases, customers may need to provide additional information, like their IBAN, which Worldline manages without any extra integration needed. If a bank's ID is provided in the Post Payments API, the bank will be automatically prefilled.
|
 |
Step 2: Accept Terms and Conditions
After selecting the bank, customers are directed to the summary page, where they can review all payment details. Here they can conveniently agree to terms and conditions by simply checking a box. Once done, they can proceed to the next steps by clicking the "Pay" button. If you are using your own PSD2 license, we can easily customize the links in the summary page to lead to your specific terms and conditions. |  |
Step 3: Authenticate and Authorize the Payment
During this step, the payer needs to authenticate themselves with their bank and approve payment execution to the bank. The following example illustrates what the bank's payment authorization process may look like. |  |
Step 4: Check Payment Status to follow on Payment Execution
After the payer authorizes the payment, they will be redirected back to the Bank Selection Interface. At this point, the Bank Selection Interface will verify the status of the payment and display it to the payer. Then the payer can be redirected back to your software to complete the purchase journey. The following example demonstrates a potential screen layout after a successful payment. |  |
Customization
You can personalize almost all elements to align with your brand - from the left bar to the title and all buttons. Customizing these elements enhances brand recognition and presents a professional appearance for your users. The following example showcases a payment summary page with customized branding.
|  |
Example scenarios
Below you can interact with a few example scenarios. The interactivity is limited, but it gives a good impression of the screen flow a payer will face when using the Bank Selection Interface (a live demo is also available here). It showcases the difference between the desktop and mobile user interface and the difference in flow when the payment preferences are saved (the payer check-marked 'Pay faster next time'), in a previous payment.
Implementation
To initiate a payment using the Bank Selection Interface the following functions should be implemented:
The diagram on the right shows the typical payment flow using Bank Selection Interface. You can click on the image to enlarge it.
|  |
Example: Post payments API request which redirects to Bank Selection Interface
curl --location --request POST 'https://xs2a-int.awltest.de/xs2a/routingservice/services/ob/pis/v3/payments' \
--header 'X-Request-ID: 6e16f87f-08b1-460e-972d-21b824f07113' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer ### Fill token here ###' \
--header 'MessageId: d1efddaf-ea94-4c37-9b57-18640bd422a4' \
--header 'MessageCreateDateTime: 2020-11-13T03:49:45.784Z' \
--header 'UseAuthorisationLandingPages: true' \
--data-raw '{
"PaymentProduct": [
"PSD2-SCT"
],
"CommonPaymentData": {
"EndToEndId": "EndtoEndId",
"InitiatingPartyReferenceId": "### unique value ###",
"Amount": {
"Amount": "238.00",
"Currency": "EUR"
},
"RemittanceInformation": "Order #322551"
}
}'