Banked.js

Embed Banked's account to account payments in your application

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:

Try our demo payment flowTry our demo payment flow

📘

You can see this in action in our Top-ups demo and view its source code to understand the implementation.

How to implement Banked.js

Banked.js is implemented as a web-component, so it exposes a fully encapsulated DOM API. Using Web Components also allows it to further isolate its UI and avoid clashing with any other styles or JavaScript on the page.

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 <body> tag.

<head>
    <title>Your Application</title>
</head>
<body>
    <!-- 1. Include our <script> tag on your page -->
    <script src="https://js.banked.com/v3" type="text/javascript" async defer></script>
    <!-- 2. Include the checkout element on your page, where you would like the UI to be rendered -->
    <banked-checkout api-key="YOUR_CLIENT_KEY" payment-id="YOUR_PAYMENT_ID"></banked-checkout>
</body>

You will need to pass some parameters into the banked-checkout component:

  • api-key is the client key that will need to be retrieved from the Banked console
  • payment-id should 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 success_url or error_url that were provided when the payment was created.

The components are fully responsive and have been tested across many device types.

FAQs

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?
Take a look at our status page for the current statistics. The JavaScript itself is served via Cloudflare's CDN, and is backed by their 100% uptime SLA.

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.


Did this page help you?