The Bridge widget provides a seamless way to connect user bank accounts to your application. Unlike other open banking providers, Straddle handles all the data exchanges, retrieves bank details and owner information, and manages the entire process, simplifying your integration and reducing your compliance burden.

Before implementing the Bridge widget, ensure you have created a customer in Straddle. For details on customer creation, please refer to the Customer Management Guide.

​
Overview

1

Implement the Bridge widget in your frontend

2

Generate a Bridge token in your backend

3

Initialize the widget with the token

4

Handle the widget callback

5

Create a payment using the obtained paykey

​
Implementaton Guide

​
1. Implement the Bridge Widget

First, add the Straddle Bridge widget script to your application:

<head>
  <!-- Other head elements -->
  <script src="https://widgets.straddle.io/bridge/bridge-1.0.0.js"></script>
</head>

<body>
  <!-- Your other page content -->
  <div id="straddle-bridge-container"></div>
  <!-- More page content -->
</body>

​
2. Generate a Bridge Token

In your backend, generate a Bridge token for the customer:

​
3. Initialize the Widget

Once you have the Bridge token, initialize the widget in your frontend JavaScript:

async function initializeBridgeWidget(bridgeToken) {
  straddleBridge.init({
    target: "#straddle-bridge-container", // The div where the widget will be rendered
    token: bridgeToken,
    onSuccess: (paykey) => {
      // Handle successful bank account connection
      console.log('Paykey received:', paykey);
      // Send paykey to your backend
      sendPaykeyToBackend(paykey);
    },
    onFailure: (error) => {
      // Handle errors
      console.error('Bridge widget error:', error);
      alert("An error has occurred: " + error.message);
    }
  });
}

// Call this function when you're ready to show the widget, passing the bridge token from your backend
initializeBridgeWidget('<bridge_token>');

function sendPaykeyToBackend(paykey) {
  // Implement this function to send the paykey to your backend
  // You'll use this paykey to create charges or payouts
}

​
4. Handle the Widget Callback

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:

{
   "data": {
      "paykey": "05f5d55cb14f7e8a0ec2e5689376e3b4665efc34834d30995babbd5010b39913",
      "bank_data": {
       "routing_number": "011000138",
       "account_number": "******7890",
       "account_type": "checking"
     },
     "id": "0191ef49-892c-7460-99d1-f5589d7d9989",
     "customer_id": "0191ef41-8de5-716c-bfa4-41cd79e85705",
     "label": "BANK OF AMERICA, N.A. - *7890",
     "source": "straddle",
     "institution_name": "BANK OF AMERICA, N.A.",
     "status": "active",
     "created_at": "2024-09-14T06:47:39.5648743Z",
     "updated_at": "2024-09-14T06:47:39.5648746Z"
   },
   "meta": {
     "api_request_id": "243431dd-7deb-4445-820d-55a942ace70f"
   },
   "response_type": "object"
 }

Note that sensitive information like the full account number is masked for security reasons.

​
5. Create a Payment

Once you have the paykey in your backend, you can create a charge:

​
Straddle’s Unique Approach

Straddle’s Bridge widget stands out from other open banking providers in several ways:

  1. Simplified Integration: Straddle handles all data exchanges with banks, reducing the complexity of your integration.

  2. Enhanced Security: Sensitive bank details never touch your servers, reducing your PCI compliance scope.

  3. Comprehensive Data Handling: Straddle retrieves and verifies bank details and owner information, saving you from building complex verification systems.

  4. Unified API: Use the same Straddle API for account linking, identity verification, and payment processing, streamlining your integration.

  5. Real-time Balance Checks: Straddle can perform balance checks before initiating payments, reducing the risk of insufficient funds.

  6. Fraud Prevention: By handling the entire process, Straddle can apply advanced fraud prevention techniques across the entire payment flow.

By leveraging Straddle’s Bridge widget and API, you can provide a secure, seamless payment experience while significantly reducing your development time and compliance burden.

PaykeysPlaid