Drop-in UI component to securely connect user bank accounts to your application.
The Bridge widget allows users to securely connect their bank accounts to your application. Unlike other open banking providers, Straddle handles all the data exchanges, retrieves bank details and owner information automatically, and generates a secure payment token, without exposing sensitive information to your frontend.
Before interacting with the Bridge widget, ensure you have created a customer in Straddle. For details on customer creation, please refer to the Customers Guide.
Straddle offers multiple ways to integrate the Widget into your application. Choose the option that best fits your development environment and requirements.
Hosted Script
The simplest way to implement the Bridge widget is by using our hosted script. This method is ideal for quick integrations and applications without a specific JavaScript framework.
Copy
Ask AI
<head> <!-- Other head elements --> <script src="https://widgets.straddle.io/bridge/bridge-0.1.23.js"></script></head><body> <!-- Your page content --> <script> straddleBridge.init({ mode: 'sandbox', // 'production' or 'sandbox' token: 'bridge_token', // replace with your token onSuccess: (payload) => { console.log('Success event, paykey data is:', payload) }, onSuccessCTAClicked: () => { console.log('Success CTA clicked') }, onClose: () => { console.log('Straddle widget closed') }, onLoadError: (error) => { console.error('Error loading Straddle Bridge Widget', error) }, style: { position: 'absolute', width: '100%', height: '80%', top: '200px', left: '0', }, debug: true, }) </script> <!-- Your other page content --></body>
JavaScript Package
For applications using vanilla JavaScript or other frameworks, we offer a JavaScript package that provides more flexibility in implementation.
Check out our GitHub repository for the latest updates and additional resources.
Install the package:
Copy
Ask AI
npm install @straddleio/bridge-js
or
Copy
Ask AI
yarn add @straddleio/bridge-js
Use the package in your JavaScript code:
Copy
Ask AI
import { straddleBridge } from '@straddleio/bridge-js'straddleBridge.init({ mode: 'sandbox', // 'production' or 'sandbox' token: 'bridge_token', // replace with your token onSuccess: (payload) => { console.log('Success event, paykey data is:', payload) }, onSuccessCTAClicked: () => { console.log('Success CTA clicked') }, onClose: () => { console.log('Straddle widget closed') }, onLoadError: (error) => { console.error('Error loading Straddle Bridge Widget', error) }, style: { position: 'absolute', width: '100%', height: '80%', top: '200px', left: '0', }, debug: true,})// To show the widgetstraddleBridge.show()// To hide the widgetstraddleBridge.hide()// To remove the widget from the DOMstraddleBridge.remove()// To send a custom message to the widgetstraddleBridge.send(message)
React Package
For React applications, we provide a dedicated npm package that offers a more integrated experience with your React components.
Check out our GitHub repository for the latest updates and additional resources.
Install the package:
Copy
Ask AI
npm install @straddleio/bridge-react
or
Copy
Ask AI
yarn add @straddleio/bridge-react
Use the Bridge component in your React application:
When creating a paykey, the account holder’s name is matched against the customer’s name. Therefore, when using the Bridge Widget and the MX open banking flow, to get an active paykey, the customer’s name must match the MX account holder’s name. In sandbox, the MX account holder’s name is hardcoded to Charlie Pouros.
In sandbox, this behavior can be overriden by specifying a sandbox outcome in the request.
In the onSuccess callback, you’ll receive a paykey object. This object contains all the necessary information about the connected bank account, without exposing sensitive details to your frontend.
Here’s an example of the paykey object you’ll receive:
After successfully implementing the Bridge widget and generating a paykey, you can start creating payments. For more information on these topics, please refer to the following guides:
Working with Paykeys: Learn how to use paykeys for secure account-to-account payments.
Creating Payments: Understand the process of initiating payments using paykeys.