Transaction Enrichment

Let's take your user experience to 💯

Transaction enrichment allows you to present your users with relevant information from their data and make it useful to them, so you can make their lives easier. Beyond this transaction enrichment also helps your company provide a personalized experience to your users, and make informed business decisions backed by data from card transactions.

If you want to read a whole article we wrote about this you can find it here.

You won't need to be doing alot of work to set this up, we've tried our best to do most of the heavy lifting for you, so you don't have to write so many lines of code.

For now, we'll be focusing on two tasks 1. Transforming your transaction history page into something your users can make sense of. 2. Displaying spending graphs for your users so they can better track their spending.

Let's get started.

TRANSFORMING YOUR TRANSACTION HISTORY

We now provide you with a field from the response on the transaction history API that contains more information about the transaction. The data enrichment is AI generated and we use a state-of-the-art model to achieve this and can guarantee a 99.8% accuracy.

A typical transaction from the Get card transaction API looks like this

[
  {
    "amount": "0",
    "bridgecard_transaction_reference": "7832a4d6371e4643aba4aa1f3c7030ab",
    "card_id": "70b34986c13c4026a9c1607e27eabc49",
    "card_transaction_type": "DEBIT",
    "cardholder_id": "d0658fedf8284207866d961e4a7083fa",
    "client_transaction_reference": "5c3598c8152446ba8093d058d8b59a1e",
    "currency": "USD",
    "description": "FACEBK CB966S3VM2       fb Eme Fad",
    "issuing_app_id": "842352f4-8a6f-4a19-89c6-4e8a240a2355",
    "livemode": false,
    "transaction_date": "2022-08-08 02:48:15",
    "transaction_timestamp": 1659923295,
    "merchant_category_code": "123478",
    "enriched_data": {
      "is_recurring": true,
      "merchant_city": "US",
      "merchant_code": "123478",
      "merchant_logo": "https://logos.ntropy.com/facebook.com",
      "merchant_name": "Facebook",
      "merchant_website": "facebook.com",
      "transaction_category": "Advertisement",
      "transaction_group": "Other Outgoing Transactions"
    }
  }
]

Using the enriched_data model you can change the description for this transaction from boring and unreadable "FACEBK CB966S3VM2 fb Eme Fad" to Facebook, the enriched data also provides you with the logo and website of the merchant and also a transaction category.

Transaction history page revamped using transaction enrichment.

This way your frontend end developer can move your transaction history page from what you currently have to something beautiful and readable like the image above. This can significantly improve your user experience and might be another reason why your customers will pick you instead of a competition.

DISPLAYING SPENDING GRAPHS

numbersWouldn't it be great if you could show your users graphs and charts that better interpret their spending to them rather than random numbers flying around. This way your users can know how much they spend on entertainment, food, transportation, etc.

We have designed a web page that you can integrate into your mobile app or website as a webview, without having to design a graph yourself. You just have to set up a frame for a webview on your app and render our URL, while we handle displaying the graph to your users, the graphs are also very interactive.

Here's how to set it up.

STEP 1:

You'll need to generate a token from your backend using your card_id and API key, this token is what you'll send to your client-side app (Mobile or Web app).

So you'll need to create an endpoint on your backend where what it does is send a token to your client-side when they want to display the graphs to your user.

Here's the API to do this

cURL

curl --location 'https://issuecards.api.bridgecard.co/v1/issuing/cards/generate_token_for_card_details?card_id=b7fc2fa1f2249e2ff' \
--header 'token: Bearer at_live_xxxxx'

Python

import requests

url = "https://issuecards.api.bridgecard.co/v1/issuing/cards/generate_token_for_card_details?card_id=b7fc2fa1f2249e2ff"

payload = {}
headers = {
  'token': 'Bearer at_live_xxxxx'
}

response = requests.request("GET", url, headers=headers, data=payload)

print(response.text)

Nodejs

var request = require('request');
var options = {
  'method': 'GET',
  'url': 'https://issuecards.api.bridgecard.co/v1/issuing/cards/generate_token_for_card_details?card_id=b7fc2fa1f2249e2ff',
  'headers': {
    'token': 'Bearer at_live_xxxxx'
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});

PHP

<?php
require_once 'HTTP/Request2.php';
$request = new HTTP_Request2();
$request->setUrl('https://issuecards.api.bridgecard.co/v1/issuing/cards/generate_token_for_card_details?card_id=b7fc2fa1f2249e2ff');
$request->setMethod(HTTP_Request2::METHOD_GET);
$request->setConfig(array(
  'follow_redirects' => TRUE
));
$request->setHeader(array(
  'token' => 'Bearer at_live_xxxxx'
));
try {
  $response = $request->send();
  if ($response->getStatus() == 200) {
    echo $response->getBody();
  }
  else {
    echo 'Unexpected HTTP status: ' . $response->getStatus() . ' ' .
    $response->getReasonPhrase();
  }
}
catch(HTTP_Request2_Exception $e) {
  echo 'Error: ' . $e->getMessage();
}

Go

package main

import (
  "fmt"
  "net/http"
  "io/ioutil"
)

func main() {

  url := "https://issuecards.api.bridgecard.co/v1/issuing/cards/generate_token_for_card_details?card_id=b7fc2fa1f2249e2ff"
  method := "GET"

  client := &http.Client {
  }
  req, err := http.NewRequest(method, url, nil)

  if err != nil {
    fmt.Println(err)
    return
  }
  req.Header.Add("token", "Bearer at_live_xxxxx")

  res, err := client.Do(req)
  if err != nil {
    fmt.Println(err)
    return
  }
  defer res.Body.Close()

  body, err := ioutil.ReadAll(res.Body)
  if err != nil {
    fmt.Println(err)
    return
  }
  fmt.Println(string(body))
}

Response

🟢 200: card token generated successfully.

{    
    "status": "success",
    "message": "Card token generated successfully, token is only valid for 5 minutes.",
    "data": {
        "token": "0d225cfe23e8496e84d8caa8c3ac3618"
    }
}

🔴 400: Invalid card ID

{
    "message": "Invalid card ID, there's no card with this ID."
}

Note: This token is only valid for 5 minutes and also for one-time use

STEP 2:

Now that your client-side has a valid token they can compose a url using this format https://issuecards.graphs.bridgecard.co/?card_token=<card token>&chart_type=<type of chart> and render this url in a webview.

The variable <card token> is where your client-side will use the token they got from the backend in step 1 above and for <type of chart> the current valid values are bar_chart or pie_chart

Eventually, you can render graphs looking like this.

Bar Chart

A bar chart with transactions categorized

Interactive view when you hover around each bar

Pie Chart

Pie chart showing transactions categorized

We hope you love this and that your users love it more !!!!.