Build Your Own UI

Before you begin building your integration, make sure that you've read our getting started and that you have a test account, are able to create an access token and have configured your Redirect URL.

The following steps are required to complete your integration:

Build a bank selection page
Create a payment request
Handle the customer redirect

Step 1: Build a bank selection page

The process begins with making an API request into our ASPSPs endpoint.

This endpoint serves two purposes:

Tells you which banks are currently supported.
Provides you with the assets that can be rendered in your bank selection page, including logos and the banks display name.

Step 2: Create a payment request

Once your customer has selected their bank you should submit a POST request into our single immediate payment endpoint, populating the aspsp_id parameter with the customers preferred bank.

{
  "transaction": {
    "order_id": "your_unique_reference_1",
    "amount": 14.99,
    "currency": "GBP"
  },
  "payment": {
    "single_immediate_payment": {
      "aspsp_id": "hsbc",
      "reference": "Custom Ref 001"
    }
  }
}

Example response data:

{
    "transaction_id": "2323386b-73f6-464a-a64e-070635ba07c5",
    "status": "awaiting_authorization",
    "timestamp": 1645093603,
    "auth_type": "redirect",
    "url": "https://verify.monzo.com/open-banking/authorize?client_id=oauth2client_0000AFMLS7NttWAyy8tAu1&response_type=code+id_token&scope=openid+payments&redirect_uri=https%3A%2F%2Fqahpp2.acquired.com%2Fpisp%2Fredirect&request=eyJhbGciOiJQUzI1NiIsImtpZCI6ImYya0ZwQlJDNTByaWtzMW9JTlF1cnFzdWpIcyIsInR5cCI6IkpXUyJ9.eyJjb25zZW50cmVmaWQiOiJvYnBpc3Bkb21lc3RpY3BheW1lbnRjb25zZW50XzAwMDBBR1o0d2llSW1mYUpzSjVDejMiLCJzY29wZSI6Im9wZW5pZCBwYXltZW50cyIsImFjcl92YWx1ZXMiOiJ1cm46b3BlbmJhbmtpbmc6cHNkMjpjYSIsImlzcyI6Im9hdXRoMmNsaWVudF8wMDAwQUZNTFM3TnR0V0F5eTh0QXUxIiwiYXVkIjoiaHR0cHM6XC9cL2FwaS5tb256by5jb21cL29wZW4tYmFua2luZ1wvIiwiY2xhaW1zIjp7ImlkX3Rva2VuIjp7ImFjciI6eyJlc3NlbnRpYWwiOnRydWV9LCJvcGVuYmFua2luZ19pbnRlbnRfaWQiOnsidmFsdWUiOiJvYnBpc3Bkb21lc3RpY3BheW1lbnRjb25zZW50XzAwMDBBR1o0d2llSW1mYUpzSjVDejMiLCJlc3NlbnRpYWwiOnRydWV9fSwidXNlcmluZm8iOnsiYWNyIjp7ImVzc2VudGlhbCI6dHJ1ZX0sIm9wZW5iYW5raW5nX2ludGVudF9pZCI6eyJ2YWx1ZSI6Im9icGlzcGRvbWVzdGljcGF5bWVudGNvbnNlbnRfMDAwMEFHWjR3aWVJbWZhSnNKNUN6MyIsImVzc2VudGlhbCI6dHJ1ZX19fSwicmVzcG9uc2VfdHlwZSI6ImNvZGUgaWRfdG9rZW4iLCJyZWRpcmVjdF91cmkiOiJodHRwczpcL1wvcWFocHAyLmFjcXVpcmVkLmNvbVwvcGlzcFwvcmVkaXJlY3QiLCJzdGF0ZSI6IjIzMjMzODZiLTczZjYtNDY0YS1hNjRlLTA3MDYzNWJhMDdjNSIsImV4cCI6MTY0NTA5MzYwMywibm9uY2UiOiJmMGIxMGZlMC0xYjQ4LTQ2NmUtOTA4NS0zMGFjOGUzMWEzZjMiLCJjbGllbnRfaWQiOiJvYXV0aDJjbGllbnRfMDAwMEFGTUxTN050dFdBeXk4dEF1MSJ9.XpwO3v2OfdJihioHVWR5DPMoj5wx74nmH9CtTMOMMyqfe3uKoqPq1zZKLxyaBS10LFFCvlcShyuTdRCzVWOXxm4pPhVdUUEKOP3A9HMYMyTGGCrKRIrW647gAOGu4itnYOOvJT8mTaGi9rPVkR8wuHWo8pYOJiop20_UmZK9HL-5tzAB6JPUwYsINCKb5uIWpuov0_WcEWiCPcpOeYQFeZooxelr4HRHxtBXzwU1CYa27NOTcVz1q3BvkIwNM5nRfXaEBdbzk9IZ0ZNXKpABDWu0yrL0tJUilOHeZkBvxdB23-XXTsstogyNsdosAZvSie4WH6hXSgAJOCq7dRoIFg",
    "qr_code": "data:image/png;base64,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",
    "expires_in": 600
}

In the response data we will be return a url value. Use this value to redirect your user to authorise the payment.

Alternatively, present the qr_code image to your user. The url value is embedded in the QR code.

Step 3: Handle the redirect

Once the user has completed the payment we will redirect them to your redirect_url configured in the Hub, unless a different URL was provided in your initial single-immediate-payment request.

In order for you to be able to present your customer with the payment status, we will send a form POST to the redirect URL.

We also send webhook notifications to update your application with the final status of each payment.