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

# Trust Score Widget

> Display user Trust Scores in your application

# Trust Score Widget

Embed Trust Score displays in your application to show user creditworthiness.

## Overview

The Trust Score Widget allows you to:

* Display a user's Trust Score
* Show score breakdown
* Indicate borrowing eligibility
* Verify user creditworthiness

## Quick Start

### React Component

```tsx theme={null}
import { TrustScoreWidget } from '@usmewe/react';

function UserProfile({ userId }) {
  return (
    <TrustScoreWidget
      userId={userId}
      showBreakdown={true}
      theme="light"
    />
  );
}
```

### HTML Embed

```html theme={null}
<div
  data-usmewe-widget="trust-score"
  data-user-id="user_abc123"
  data-theme="light"
  data-show-breakdown="true"
></div>

<script src="https://cdn.usmewe.com/widgets/v1.js" async></script>
```

## Widget Variants

### Compact Badge

Small badge showing score and tier:

```tsx theme={null}
<TrustScoreWidget
  userId={userId}
  variant="badge"
/>
```

Output:

```
┌────────────────┐
│ ⭐ 56 Trusted  │
└────────────────┘
```

### Standard Card

Full score with tier:

```tsx theme={null}
<TrustScoreWidget
  userId={userId}
  variant="card"
/>
```

Output:

```
┌─────────────────────────┐
│    Trust Score          │
│                         │
│      ⭐ 56              │
│    Established          │
│                         │
│  ████████████░░░░  56%  │
└─────────────────────────┘
```

### Detailed View

Complete breakdown:

```tsx theme={null}
<TrustScoreWidget
  userId={userId}
  variant="detailed"
  showBreakdown={true}
/>
```

Output:

```
┌─────────────────────────────────┐
│         Trust Score             │
│            ⭐ 56                │
│         Established             │
│                                 │
│  Seniority        ████░░   6/12 │
│  Repayments       ██████  20/40 │
│  Volume           █████░  10/20 │
│  Social           ██████  15/15 │
│  Level Bonus      █████░   5/13 │
│                                 │
│  Borrowing Power: $100          │
└─────────────────────────────────┘
```

## Customization

### Themes

```tsx theme={null}
// Light theme (default)
<TrustScoreWidget theme="light" />

// Dark theme
<TrustScoreWidget theme="dark" />

// Custom theme
<TrustScoreWidget
  theme={{
    background: '#1a1a2e',
    text: '#ffffff',
    primary: '#6366F1',
    secondary: '#a5a5a5',
    border: '#2d2d44'
  }}
/>
```

### Size

```tsx theme={null}
// Small (120px)
<TrustScoreWidget size="sm" />

// Medium (200px, default)
<TrustScoreWidget size="md" />

// Large (300px)
<TrustScoreWidget size="lg" />

// Custom
<TrustScoreWidget width={250} height={150} />
```

### Display Options

```tsx theme={null}
<TrustScoreWidget
  userId={userId}
  showBreakdown={true}      // Show component breakdown
  showTier={true}           // Show tier name
  showBorrowingPower={true} // Show max borrow amount
  animated={true}           // Animate score display
  interactive={false}       // Disable hover effects
/>
```

## API Endpoint

Fetch Trust Score data directly:

```bash theme={null}
GET /v1/trust-score/{userId}

Authorization: Bearer YOUR_API_KEY
```

Response:

```json theme={null}
{
  "userId": "user_abc123",
  "score": 56,
  "tier": "Established",
  "breakdown": {
    "seniority": 6,
    "repaymentHistory": 20,
    "transactionVolume": 10,
    "socialNetwork": 15,
    "levelBonus": 5
  },
  "borrowingPower": {
    "maxAmount": 100,
    "maxDuration": 30,
    "interestRate": 0.03
  }
}
```

## JavaScript Integration

For custom implementations:

```javascript theme={null}
import { UsmeweClient } from '@usmewe/sdk';

const usmewe = new UsmeweClient({ apiKey: 'YOUR_API_KEY' });

async function displayTrustScore(userId, containerId) {
  const score = await usmewe.trustScore.get(userId);

  const container = document.getElementById(containerId);
  container.innerHTML = `
    <div class="trust-score-widget">
      <div class="score">${score.score}</div>
      <div class="tier">${score.tier}</div>
    </div>
  `;
}

displayTrustScore('user_abc123', 'score-container');
```

## Use Cases

### E-commerce Checkout

Show buyer's Trust Score during checkout:

```tsx theme={null}
function Checkout({ buyerId }) {
  return (
    <div className="checkout">
      <h2>Checkout</h2>

      <div className="buyer-info">
        <TrustScoreWidget
          userId={buyerId}
          variant="badge"
        />
        <span>Verified Buyer</span>
      </div>

      {/* Rest of checkout */}
    </div>
  );
}
```

### Marketplace Listings

Display seller trustworthiness:

```tsx theme={null}
function SellerCard({ seller }) {
  return (
    <div className="seller-card">
      <img src={seller.avatar} alt={seller.name} />
      <h3>{seller.name}</h3>

      <TrustScoreWidget
        userId={seller.id}
        variant="compact"
        showBorrowingPower={false}
      />
    </div>
  );
}
```

### Loan Eligibility

Check if user qualifies for financing:

```tsx theme={null}
function FinancingOption({ userId, amount }) {
  const { score, borrowingPower } = useTrustScore(userId);

  const eligible = borrowingPower.maxAmount >= amount;

  return (
    <div className={`financing ${eligible ? 'eligible' : 'ineligible'}`}>
      <TrustScoreWidget userId={userId} variant="card" />

      {eligible ? (
        <button>Pay with usmewe Credit</button>
      ) : (
        <p>Improve your Trust Score to unlock financing</p>
      )}
    </div>
  );
}
```

## Events

Listen to widget events:

```tsx theme={null}
<TrustScoreWidget
  userId={userId}
  onLoad={(score) => {
    console.log('Score loaded:', score);
  }}
  onError={(error) => {
    console.error('Failed to load score:', error);
  }}
  onClick={() => {
    // Open detailed view or profile
  }}
/>
```

## Privacy Considerations

<Warning>
  Trust Scores are public by default. Users can make their scores private in settings.
</Warning>

Handle private scores:

```tsx theme={null}
<TrustScoreWidget
  userId={userId}
  fallback={<PrivateScoreBadge />}
/>
```

## Rate Limits

| Plan       | Requests/min |
| ---------- | ------------ |
| Free       | 100          |
| Pro        | 1,000        |
| Enterprise | Unlimited    |

## Best Practices

<AccordionGroup>
  <Accordion title="Cache Responses" icon="database">
    Trust Scores don't change frequently. Cache for 5-15 minutes.
  </Accordion>

  <Accordion title="Graceful Degradation" icon="triangle-exclamation">
    Always provide a fallback UI for errors or private scores.
  </Accordion>

  <Accordion title="Respect Privacy" icon="eye-slash">
    Don't display scores without user consent in sensitive contexts.
  </Accordion>
</AccordionGroup>

<CardGroup cols={2}>
  <Card title="usmewe Pay" icon="credit-card" href="/guides/developers/integrate-usmewe-pay">
    Accept payments
  </Card>

  <Card title="API Reference" icon="code" href="/developers/api-reference/trust-score">
    Trust Score API
  </Card>
</CardGroup>