Build Your Own UI
Create a fully API-based integration, enabling you to design your own checkout UI. This page will help you to integrate into our Pay by Bank APIs.
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.
Updated about 1 year ago