Skip to main content

​
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

import { TrustScoreWidget } from '@usmewe/react';

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

​
HTML Embed

<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: 
<TrustScoreWidget
  userId={userId}
  variant="badge"
/>
Output: 
┌────────────────┐
│ ⭐ 56 Trusted  │
└────────────────┘

​
Standard Card

Full score with tier: 
<TrustScoreWidget
  userId={userId}
  variant="card"
/>
Output: 
┌─────────────────────────┐
│    Trust Score          │
│                         │
│      ⭐ 56              │
│    Established          │
│                         │
│  ████████████░░░░  56%  │
└─────────────────────────┘

​
Detailed View

Complete breakdown: 
<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

// 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

// Small (120px)
<TrustScoreWidget size="sm" />

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

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

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

​
Display Options

<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: 
GET /v1/trust-score/{userId}

Authorization: Bearer YOUR_API_KEY
Response: 
{
  "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: 
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: 
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: 
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: 
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: 
<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

Trust Scores are public by default. Users can make their scores private in settings.
Handle private scores: 
<TrustScoreWidget
  userId={userId}
  fallback={<PrivateScoreBadge />}
/>

​
Rate Limits

PlanRequests/min
Free100
Pro1,000
EnterpriseUnlimited

​
Best Practices

Trust Scores don’t change frequently. Cache for 5-15 minutes.
Always provide a fallback UI for errors or private scores.
Don’t display scores without user consent in sensitive contexts.

usmewe Pay

Accept payments

API Reference

Trust Score API