> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brandfetch.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Transaction enrichment

> Turn raw payment descriptors into clean merchant identity, category, and logo using the Transaction API

export const TransactionEnrichmentDemo = () => <div className="w-full max-w-[340px] rounded-xl border border-[#63636333] bg-white dark:bg-[#1c1d1f] p-5">
    <div className="text-[11px] font-semibold uppercase tracking-[0.05em] text-[#9ca3af]">Raw descriptor</div>
    <div className="mt-1.5 font-mono text-[13px] bg-[#6363630d] rounded-lg px-3 py-2">SQ *BLUE BOTTLE COFFEE OAKLAND</div>
    <div className="my-3 text-center text-[#9ca3af] text-lg">↓</div>
    <div className="text-[11px] font-semibold uppercase tracking-[0.05em] text-[#9ca3af]">Recognized merchant</div>
    <div className="mt-1.5 flex items-center gap-3 rounded-lg border border-[#63636326] px-3 py-2.5">
      <img noZoom src="https://cdn.brandfetch.io/domain/bluebottlecoffee.com/w/72/h/72/fallback/lettermark?c=1bfwsmEH20zzEfSNTed" alt="Blue Bottle Coffee logo" className="w-9 h-9 rounded-lg shrink-0" />
      <div>
        <div className="font-semibold text-[15px]">Blue Bottle Coffee</div>
        <div className="text-[#6b7280] text-[13px]">bluebottlecoffee.com · Food & Beverage</div>
      </div>
    </div>
  </div>;

export const TransactionFeedDemo = () => {
  const txns = [{
    domain: "starbucks.com",
    merchant: "Starbucks",
    raw: "STARBUCKS 1523 OMAHA NE",
    amount: "6.45",
    date: "Jul 3"
  }, {
    domain: "amazon.com",
    merchant: "Amazon",
    raw: "AMZN MKTP US*2X4B1QT0",
    amount: "42.99",
    date: "Jul 2"
  }, {
    domain: "uber.com",
    merchant: "Uber Eats",
    raw: "UBER *EATS 8005928996 CA",
    amount: "23.10",
    date: "Jul 1"
  }, {
    domain: "netflix.com",
    merchant: "Netflix",
    raw: "NETFLIX.COM 866-579-7172",
    amount: "15.49",
    date: "Jun 30"
  }];
  return <div className="w-full max-w-[420px] flex flex-col gap-0.5">
      {txns.map(t => <div key={t.raw} className="flex items-center gap-3 py-2.5 px-3 rounded-[10px] hover:bg-[#6363631f] transition-colors duration-150">
          <img noZoom src={`https://cdn.brandfetch.io/domain/${t.domain}/w/80/h/80/fallback/lettermark?c=1bfwsmEH20zzEfSNTed`} alt={`${t.merchant} logo`} className="w-10 h-10 rounded-lg shrink-0" />
          <div className="flex-1 min-w-0">
            <div className="font-semibold text-[15px]">{t.merchant}</div>
            <div className="text-[#9ca3af] text-[12px] font-mono truncate">{t.raw}</div>
          </div>
          <div className="text-right shrink-0">
            <div className="font-semibold text-[15px]">-${t.amount}</div>
            <div className="text-[#6b7280] text-[12px]">{t.date}</div>
          </div>
        </div>)}
    </div>;
};

export const Preview = ({children}) => <div className="relative rounded-xl border border-[#63636333] bg-[#6363630d] pt-12 px-8 pb-8 mt-4 mb-4 overflow-hidden">
    <style>{`
      .bf-preview-body img { margin: 0 !important; max-width: none; }
      .bf-preview-body ul, .bf-preview-body ol { margin: 0; padding: 0; }
      .bf-preview-body li { margin: 0 !important; padding-left: 0 !important; }
      .bf-preview-body li::before, .bf-preview-body li::marker { content: none !important; display: none !important; }
      .bf-preview-body p { margin: 0; }
    `}</style>
    <span className="absolute top-3.5 left-[18px] text-[11px] font-semibold tracking-[0.06em] uppercase text-[#636363b3]">
      Preview
    </span>
    <div className="bf-preview-body flex justify-center">{children}</div>
  </div>;

Bank and card statements arrive as unstructured line-item text, `SQ *BLUE BOTTLE COFFEE OAKLAND`, `AMZN MKTP US*2X4B1QT0`, `UBER *EATS 8005928996 CA`. Users don't recognize the charge, support tickets follow, and spend categorization breaks.

The [Transaction API](/transaction-api/overview) resolves that text to the real merchant in a single call, returning the company's name, domain, industry, and logo, so banking, spend-tracking, and accounting apps can categorize spend and show a feed people actually recognize.

## Show merchants, not codes

Raw transaction descriptors like `SQ *BLUE BOTTLE COFFEE OAKLAND` are unreadable. The [Transaction API](/transaction-api/overview) resolves that line-item text to a real merchant, name, domain, industry, and logo, in a single call, so banking and spend-tracking apps can show a clean, recognizable feed.

### Transaction feed

A statement-style feed where each charge shows the recognized merchant and logo, with the original bank descriptor kept underneath for reference.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <TransactionFeedDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx TransactionFeed.tsx theme={null}
    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    // merchant + domain come from the Transaction API; the raw descriptor is the input.
    const TXNS = [
      { domain: "starbucks.com", merchant: "Starbucks", raw: "STARBUCKS 1523 OMAHA NE", amount: "6.45", date: "Jul 3" },
      { domain: "amazon.com", merchant: "Amazon", raw: "AMZN MKTP US*2X4B1QT0", amount: "42.99", date: "Jul 2" },
      { domain: "uber.com", merchant: "Uber Eats", raw: "UBER *EATS 8005928996 CA", amount: "23.10", date: "Jul 1" },
      { domain: "netflix.com", merchant: "Netflix", raw: "NETFLIX.COM 866-579-7172", amount: "15.49", date: "Jun 30" },
    ];

    export function TransactionFeed() {
      return (
        <div className="flex w-full max-w-[420px] flex-col gap-0.5">
          {TXNS.map((t) => (
            <div
              key={t.raw}
              className="flex items-center gap-3 rounded-[10px] px-3 py-2.5 transition-colors duration-150 hover:bg-[#6363631f]"
            >
              <img
                src={`https://cdn.brandfetch.io/domain/${t.domain}/w/80/h/80/fallback/lettermark?c=${CLIENT_ID}`}
                alt={`${t.merchant} logo`}
                className="h-10 w-10 shrink-0 rounded-lg"
              />
              <div className="min-w-0 flex-1">
                <div className="text-[15px] font-semibold">{t.merchant}</div>
                <div className="truncate font-mono text-[12px] text-[#9ca3af]">{t.raw}</div>
              </div>
              <div className="shrink-0 text-right">
                <div className="text-[15px] font-semibold">-${t.amount}</div>
                <div className="text-[12px] text-[#6b7280]">{t.date}</div>
              </div>
            </div>
          ))}
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want a bank feed with recognizable merchant logos? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a transaction feed for a banking or spend-tracking app. Each row shows the merchant's logo, the recognized merchant name, the original raw bank descriptor underneath in a smaller monospaced muted font, and the amount and date on the right.

  Resolve each raw descriptor to a merchant with Brandfetch's Transaction API (get an API key at `https://developers.brandfetch.com/register`):

  ```
  POST https://api.brandfetch.io/v2/brands/transaction
  Authorization: Bearer YOUR_API_KEY
  Content-Type: application/json

  { "transactionLabel": "STARBUCKS 1523 OMAHA NE", "countryCode": "US" }
  ```

  The response includes the merchant's `name`, `domain`, and `industry`. Render its logo from the domain via the Logo API: `https://cdn.brandfetch.io/domain/{domain}/w/40/h/40/fallback/lettermark?c=YOUR_CLIENT_ID`

  Call the Transaction API from your server so the API key stays secret, then hotlink the returned merchant logo URL directly on the client rather than downloading or re-hosting it.
</Prompt>

### Descriptor enrichment

Show the raw-to-recognized transformation directly, useful in a transaction detail view or when confirming a match.

<Tabs>
  <Tab title="Preview">
    <Preview>
      <TransactionEnrichmentDemo />
    </Preview>
  </Tab>

  <Tab title="Code">
    ```tsx TransactionEnrichment.tsx theme={null}
    const CLIENT_ID = "YOUR_CLIENT_ID"; // free client ID from developers.brandfetch.com/register

    export function TransactionEnrichment() {
      return (
        <div className="w-full max-w-[340px] rounded-xl border border-[#63636333] bg-white p-5 dark:bg-[#1c1d1f]">
          <div className="text-[11px] font-semibold uppercase tracking-[0.05em] text-[#9ca3af]">Raw descriptor</div>
          <div className="mt-1.5 rounded-lg bg-[#6363630d] px-3 py-2 font-mono text-[13px]">SQ *BLUE BOTTLE COFFEE OAKLAND</div>
          <div className="my-3 text-center text-lg text-[#9ca3af]">↓</div>
          <div className="text-[11px] font-semibold uppercase tracking-[0.05em] text-[#9ca3af]">Recognized merchant</div>
          <div className="mt-1.5 flex items-center gap-3 rounded-lg border border-[#63636326] px-3 py-2.5">
            <img
              src={`https://cdn.brandfetch.io/domain/bluebottlecoffee.com/w/72/h/72/fallback/lettermark?c=${CLIENT_ID}`}
              alt="Blue Bottle Coffee logo"
              className="h-9 w-9 shrink-0 rounded-lg"
            />
            <div>
              <div className="text-[15px] font-semibold">Blue Bottle Coffee</div>
              <div className="text-[13px] text-[#6b7280]">bluebottlecoffee.com · Food &amp; Beverage</div>
            </div>
          </div>
        </div>
      );
    }
    ```
  </Tab>
</Tabs>

<Prompt description="Want to show raw descriptors resolving to real merchants? This prompt gives your AI coding tool everything it needs to build it in your framework." actions={["copy", "cursor"]}>
  Build a transaction detail card that shows the enrichment visually: at the top, the raw bank descriptor in a monospaced pill; below it a downward arrow; then the recognized merchant in a bordered row with its logo, name, domain, and industry.

  Resolve the descriptor with Brandfetch's Transaction API (get an API key at `https://developers.brandfetch.com/register`):

  ```
  POST https://api.brandfetch.io/v2/brands/transaction
  Authorization: Bearer YOUR_API_KEY
  Content-Type: application/json

  { "transactionLabel": "SQ *BLUE BOTTLE COFFEE OAKLAND", "countryCode": "US" }
  ```

  Use the returned `domain` to render the merchant logo from the Logo API: `https://cdn.brandfetch.io/domain/{domain}/w/36/h/36/fallback/lettermark?c=YOUR_CLIENT_ID`

  Call the Transaction API from your server so the API key stays secret, then hotlink the returned merchant logo URL directly on the client rather than downloading or re-hosting it.
</Prompt>

## Implementation

<Steps>
  <Step title="Send the descriptor">
    POST the raw line-item text as `transactionLabel`, with a `countryCode` to disambiguate merchants that share a name across regions. Keep the call on your server so the API key stays secret.

    ```bash theme={null}
    curl --request POST "https://api.brandfetch.io/v2/brands/transaction" \
      --header "Authorization: Bearer YOUR_API_KEY" \
      --header "Content-Type: application/json" \
      --data '{ "transactionLabel": "SQ *BLUE BOTTLE COFFEE OAKLAND", "countryCode": "US" }'
    ```
  </Step>

  <Step title="Use the response">
    The identified merchant comes back as a full brand record, use `name` as the display label, `industry` as the spend category, and render the logo from `domain` via the [Logo API](/logo-api/overview): `https://cdn.brandfetch.io/domain/{domain}/w/40/h/40/fallback/lettermark?c=YOUR_CLIENT_ID`.
  </Step>

  <Step title="Cache and fall back">
    The same descriptor recurs across statements, cache resolutions by normalized descriptor text. When a descriptor can't be resolved, keep showing the raw text rather than guessing.
  </Step>
</Steps>

## Pricing

The Transaction API is an [enterprise product](https://brandfetch.com/developers/contact/sales). Requests count as brand fetches, the shared usage unit across the Brand API, Brand Context API, and Transaction API, so a single quota pool covers all three.

## Measuring impact

Enrichment works when people recognize their charges, so track the merchant match rate on incoming descriptors and the drop in "what is this charge?" support tickets and disputes.

[Envestnet | Yodlee used this pattern to improve merchant identification](https://brandfetch.com/developers/customers/yodlee) across its network.

## Going further

<CardGroup cols={3}>
  <Card title="Transaction API reference" icon="code" href="/reference/transaction-api">
    Request and response shape, including countryCode.
  </Card>

  <Card title="Brand API" icon="palette" href="/brand-api/overview">
    The response is a full brand record: colors, socials, and company details.
  </Card>

  <Card title="Get started" icon="rocket" href="https://developers.brandfetch.com/register">
    Create a free account and start building.
  </Card>
</CardGroup>