Search docs

Are you looking for test card numbers?

Would you like to contact support?

Start searching Adyen's documentation...

  Documentation

Open banking

Open banking is an online banking method, supported by most major banks in the United Kingdom. When paying with open banking, the shopper selects their bank from a drop-down in your checkout, and is redirected to their bank's website or app to complete the payment.

Payment Type Payment flow Recurring Refunds Partial Refunds Captures Partial Captures Chargebacks
Online banking Redirect No Yes Yes No No No

You can accept open banking payments with:

Integrate with Checkout SDKs

Our Checkout SDKs support open banking payments without any additional configuration.

To know whether a payment is successful, you'll also need to set up notifications.

Integrate with API

In this section, we show the API integration steps for open banking.

Before you begin this section, make sure you read and understand our API Integration guide.

Step 1: Collect required shopper details

To collect the shopper's details, you can either use:

Collect with open banking Component

To add the open banking Component to your payments form:

  1. Make sure that you have already added the Components JavaScript file and the required configuration on your payments page.
  2. Create a DOM element, placing it where you want the open banking form to be rendered:
    <div id="openbanking"></div>
  3. Make a /paymentMethods call. The response contains an object with type: openbanking_UK. Store this object, for example as openbankingData.

  4. Create an instance of the open banking Component and mount it, specifying:

    • openbankingData.details: The contents of the details array of the object that you stored in the previous step.

      const openbanking = checkout.create("openbanking_UK", {
       details: openbanking.details,
       onChange: handleOnChange
      }).mount("#openbanking");
  5. Create a function to listen to and handle the onChange event triggered by the Component: 

         function handleOnChange(state, component) {    
             state.data
             /* {type: "openbanking_UK",
                 issuer: "123"}
             */
         }
  6. Collect the values passed in the state.data. You'll use these to make the payment.

    To configure how the open banking Component renders in your payment form, see Configuring the Component.

Collect with your own payment form

Use your dynamically generated or hard-coded payment form. For more information, refer to Build your own payment form.
When a shopper chooses to pay with open banking:

  1. Present a list of available banks in your payment form: 

    Bank Name Issuer ID
    Allied Irish Bank 1
    Allied Irish Bank (Corporate) 2
    Barclays 3
    Bank of Scotland 4
    Danske Bank 5
    Danske Bank (Corporate) 6
    First Direct 7
    First Trust Bank 8
    First Trust Bank (Corporate) 9
    Halifax 10
    HSBC Bank 11
    Lloyds Bank 12
    M&S Bank 13
    Nationwide Building Society 14
    National Westminster Bank 15
    Royal Bank of Scotland 16
    Santander 17
    Ulster Bank 18
    Bank of Ireland 19
  2. Collect the Issuer ID that corresponds to the shopper's bank. You'll need this to make an open banking payment for this shopper.

Step 2:  Make a payment

  • Make a /payments API call, providing:

    • reference: Your unique reference for this payment.
    • amount
    • paymentMethod.type: openbanking_UK
    • paymentMethod.issuer: The shopper's bank. Specify this with the Issuer ID value that corresponds to this bank.
    • returnUrl: The URL the shopper will be redirected back to after they complete the payment.

      {
         "merchantAccount":"YOUR_MERCHANT_ACCOUNT",
         "reference":"open banking test",
         "amount":{
            "currency":"GBP",
            "value":1000
         },
         "paymentMethod":{
            "type":"openbanking_UK",
            "issuer":"1"
         },
         "returnUrl":"https://your-company.com/..."
      }

      This returns a /payments response containing:

    • resultCode of RedirectShopper.
    • redirect object containing a url.

      {
       "resultCode":"RedirectShopper",
       "details":[
          {
             "key":"payload",
             "type":"text"
          }
       ],
       "paymentData":"abcxyz...",
       "redirect":{
          "method":"GET",
          "url":"https://test.adyen.com/hpp/redirectopen banking.shtml?brandCode=open banking&countryCode=NL..."
       }
      }

Step 3: Redirect shopper

To complete the open banking payment, the shopper will need to approve it on their bank's website or app.

  • Redirect the shopper to the URL specified at redirect.url.

    When the shopper has completed the payment they will be redirected back to your website or app using the returnUrl you specified earlier. This will be appended with a payload.

      https://your-company.com/?payload=sdfsdf...&type=complete&resultCode=authorised

    Do not use the resultCode you receive from the returnUrl to determine whether the payment was successful. Instead, verify the result on your server.

Step 4: Present payment result

  1. To verify the result of the payment, submit the payload to the /payments/details endpoint:

      {
        "details":{
          "payload":"sdfsdfsdf..."
        }
      }

    The response will contain a pspReference, which is our unique identifier for this payment, and a resultCode.

  2. Use the resultCode you received from the /payments/details endpoint to present the payment result to your shopper via your website or app.

Open banking result codes

The resultCodes you can receive for open banking are:

  • Authorised: The payment was successful. You will receive the funds in 2-3 days.
  • Cancelled: The shopper cancelled the payment while on their bank's website or app. Ask the shopper whether they want to continue with the order, or request that they select a different payment method.
  • Refused: The payment was refused by the shopper's bank.
  • Pending: The shopper has completed the payment but the final result is not yet known. It may take minutes or hours to confirm this. Inform the shopper that you've received their order, and are waiting for the payment to be completed.

    To find out more about result codes and how you can action them, see Result codes.

Open banking notifications

When accepting open banking payments, we recommend that you set up notifications. After set up, you will receive notifications informing you of the result of open banking payments, including those:

  • With a Pending status.
  • Where the shopper failed to return to your website or app after completing the payment.

Successful payments

If the payment was successful, you'll receive a notification with:

  • eventCodeAUTHORISATION.
  • successtrue.

Configuring the Component

Our open banking Component lets you configure whether to display a list of bank logos on your payments form.
When instantiating the open banking Component, you can optionally specify:

  • showImage: Set to false to remove the bank logos from the open banking form.
  • issuer: Set this to the id of the issuer to preselect it.

      const openbanking = checkout.create('openbanking_UK', {
          items: [{id: 1, name: "Model Bank v2"}...],
          showImage: false,
          issuer: "1"
      }).mount('#openbanking');

Testing open banking payments

Before accepting live open banking payments, test your integration using the following details: 

Bank name Issuer ID Username Password
Model Bank v2 1 mits mits

Check the status of open banking test payments in your Customer Area > Transactions > Payments.

See also