Banked.js enables you to embed Banked's checkout into your web application, allowing your users to choose their bank and be redirected to its authorisation process without needing to go into Banked's hosted checkout.
Try out the checkout, and the different Banked.js configurations below:
Implementing Banked.js involves two steps: including our script tag anywhere on the page, and adding the custom checkout element to your HTML, within the
You will need to pass some parameters into the
api-keyis the client key that will need to be retrieved from the Banked console
payment-idshould be generated on your applications back-end. There's an example of how to do this in our Top-up example using our Node.js library
hide-header(optional) is a flag you can use to hide the header in the checkout
show-all-providers(optional) is a flag you can use to show all available bank providers. By default a search bar will be shown instead, and the most common providers.
show-line-items(optional) us a flag you can use to show individual line items of the order on the checkout page. By default only the total will be shown.
Once given the payment ID and client key, the Banked components will handle:
- Rendering the UI for your user to choose their bank
- Agreeing to Banked's Terms and Conditions
- Redirecting users to their Bank's authorisation flow, either through mobile handoff, or a web redirect
When a user completes the authorisation step with their bank they'll be redirected to the
error_url that were provided when the payment was created.
The components are fully responsive and have been tested across many device types.
I have a Single Page App (SPA), will the component work?
Yes. The Web Components specification is just 'HTML + magic' so you shouldn't need to worry about initialising the component at the right time; as long as the
<script> tag is loaded before you try to initialise the component on the page and you provide the component with a valid payment ID.
Is this secure?
Yes. The payment is still created on your server and so can't be tampered with, only the payment ID is shared with the client; we handle all the authorisation process with your customers bank securely via our API. Nothing sensitive is exposed in the client.
What availability do you support for this embedded checkout?
What browsers does embedded checkout support?
We support all modern browsers. We do not support IE11, but if you need it we suggest using the official polyfills from the WebComponents team.
I am seeing a CORS error when embedding Banked.js into my website
Check the following:
- You have created your client key in the console, and have added your application domain in the format
- You have set the client key as the
api-keyattribute when adding Banked.js to your page
If you continue seeing the error, reach out to our support team.
Updated 7 months ago