How do I use the linkExternalAccount (Plaid) Method for my web application?

Using Transact API's integration with Plaid, you can easily facilitate connecting your investor’s bank account for making investments.

The following code is for server side only and should not be exposedUsing Transact API's integration with Plaid, you can easily facilitate connecting your investor’s bank account for making investments. This article discusses the way to do this on a web application.

The following is a diagram that explains how the connectivity is established on portals powered by TransactAPI:

Once you invoke a call to /LinkExternalAccount. This call will give you a response with a URL. The URL should be used in the div section so your investor user sees the Plaid widget loaded for them. They interact within the widget by authenticating the desired bank account, selecting the specific account etc.

There may be 2 actions at this point. The user may prematurely exit the widget, in which case, the callback URL processes the OnExit(). If the user completes the process within the widget, then the onSuccess() collects the data (i.e. Routing number and Account number) and makes the necessary updates into your account.

NOTE: If the investor needs to change the connected account, you may invoke /updateLinkExternalAccount **you do not need to invoke this method unless a change is needed**

Please note! in order to protect your API keys, any code that contains your clientID or developerAPIKey needs to be kept on the server-side.

Step 1. create client side code.

Below is some example code using HTML, CSS, Javascript and Axios.

//This code is for the client-side
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
          #link_button {
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            background-color: black;
            color: white;
            width: 150px;
            cursor: pointer;
            margin: 20px;
          }
          #tapi_iframe {
            width: 600px;
            height: 420px;
            border: none;
          }
          #iframe_container {
            display: none;
            padding: 10px;
            border-radius: 5px;
            -webkit-box-shadow: 0010px rgb(122, 122, 122);
            box-shadow: 0010px rgb(122, 122, 122);
         }
         #close_button {
           text-align: right;
           float: right;
           text-decoration: underline;
           cursor: pointer;
           width: fit-content;
         }
      </style>
  </head>
  <body>
      <div id="link_button">Link Bank Account</div>
      <div id="iframe_container">
          <div id="close_button">Close</div>
          <iframe id="tapi_iframe"></iframe>
      </div>
  </body>
</html>

function closeStripeIframe() {
   document.getElementById('iframe_container').style.display = 'none';
}

document.getElementById('close_button').onclick = function () {
    closeStripeIframe();
}

window.addEventListener('message', function(event) {
    let response = JSON.parse(event.data);
    if(response.statusCode == 101) { closeStripeIframe(); }
    else if(response.errorCode) {} //Handle error case (not required)
};

document.getElementById('close_button').onclick = function () {
    closeStripeIframe();
}

function closeStripeIframe() {
   document.getElementById('iframe_container').style.display = 'none';
}

The following code is for server side only and should not be exposed

import axios from 'axios';

function linkPlaidAccount() {
    const options = {
        method: 'POST',
        url: 'https://api-sandboxdash.norcapsecurities.com/tapiv3/index.php/v3/linkExternalAccount',
        header: {'content-type': 'application/json'},
        data: {
            clientID: 'yourClientID',
            developerAPIKey: 'yourDeveloperAPIKey',
            accountId: 'theAccountID'
        }
    };
    axios.request(options)
    .then(function (response) {
        //handle success
        return response;
    })
    .catch(function (error) {
        console.error(error); //handle error
    });
}

PHP server side example code

<?php
    // Get the key and url information from your constant file
    $fields = array(
        'developerAPIKey' => 'yourDeveloperAPIKey',
        'clientID' => 'yourClientID',
        'accountId' => 'theAccountID'
    );
    $url = 'https://*******/*****/index.php/v3/linkExternalAccount' . ;
    $fields_string = '';
    foreach ($fields as $key => $value) {
        $fields_string .= $key . '=' . rawurlencode($value) . '&';
    }
    rtrim($fields_string, '&');
    //open connection
    $ch = curl_init();
    //set the url, number of POST vars, POST data
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_USERPWD, 
    'nc_admin_rest_basic:nc_admin_basic_pwd');
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
    curl_setopt($ch, CURLOPT_POST, count($fields));
    curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
    curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
    //execute post
    $result = curl_exec($ch);
    $r_str = str_replace("\'", "&#x27;", $result);
    $response = json_decode($r_str, true);
    print_r($response);
?>

Step 3. call your server side code from the client side. This may differ depending on your code stack. You should add this code to the client side code file we created earlier in Step 1.

document.getElementById('link_button').onclick = function(){
   //This function should make a call to your server side code shown above
   //It should also handle successful and failure responses correctly
}