Bank Selection Interface

API Reference Live Demonstration

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 1

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 2

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 3

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.

Step 4

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.
 

 

Customized page

 

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:

  • Retrieve Token (An API to retrieve a token which is used in the subsequent API requests)
  • Single Payment (An API to initiate a single payment, use 'UseAuthorisationLandingPages=true' in the Header)
  • Payment Status (An API to request the status of a payment) or Push Notification (an API which allows you to receive requests when a payment status update occurs)

 

The diagram on the right shows the typical payment flow using Bank Selection Interface. You can click on the image to enlarge it.

 

Sequence diagram

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"
                    }
                }'
Enable "on this page" menu on doc section
On