# Transaction Enrichment

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](https://bridgecard.cards/blog/details/Transaction%20Data%20Enrichment:%20Be%20Adequately%20Informed%20About%20All%20Your%20Transactions.?blog_id=10).

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](https://docs.bridgecard.co/reference/usd-cards#get-card-transactions) 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.

<figure><img src="https://content.gitbook.com/content/qI17YRyYeAeRUYVag72N/blobs/MiT7DqKTZbATXmwRAS0y/38489efa5633d83a3cc8af76590668dabba167241d799bf6c62e330f11bca5f0.jpeg" alt="" width="563"><figcaption><p>Transaction history page revamped using transaction enrichment.</p></figcaption></figure>

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).&#x20;

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

{% tabs %}
{% tab title="cURL" %}

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

{% endtab %}

{% tab title="Python" %}

```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)


```

{% endtab %}

{% tab title="Nodejs" %}

```javascript
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);
});



```

{% endtab %}

{% tab title="PHP" %}

```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();
}
```

{% endtab %}

{% tab title="Go" %}

```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))
}
```

{% endtab %}
{% endtabs %}

<details>

<summary>Response</summary>

🟢 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."
}
```

</details>

<mark style="color:red;">Note: This token is only valid for 5 minutes and also for one-time use</mark>

**STEP 2:**

Now that your client-side has a valid token they can compose a url using this format [`https://bridgecard.cards/transaction-graphs?card_token=<card token>&chart_type=<type of chart>`](https://bridgecard.cards/transaction-graphs/?card_token=%3Ccard%20token%3E\&chart_type=%3Ctype%20of%20chart%3E)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**

<div><figure><img src="https://content.gitbook.com/content/qI17YRyYeAeRUYVag72N/blobs/JaU90Hm6iua2YxcwPp7A/Screenshot%202023-06-26%20at%208.00.13%20PM.png" alt=""><figcaption><p>A bar chart with transactions categorized </p></figcaption></figure> <figure><img src="https://content.gitbook.com/content/qI17YRyYeAeRUYVag72N/blobs/TxRvsysnvue17SdzYBRA/Screenshot%202023-06-26%20at%208.00.46%20PM.png" alt=""><figcaption><p>Interactive view when you hover around each bar</p></figcaption></figure></div>

**Pie Chart**

<figure><img src="https://content.gitbook.com/content/qI17YRyYeAeRUYVag72N/blobs/xCfQKEKvWU2T7XuvADUE/Screenshot%202023-06-26%20at%208.01.23%20PM.png" alt=""><figcaption><p>Pie chart showing transactions categorized</p></figcaption></figure>

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