Proof Digital Credentials - Web Components

Web Components to harness Proof Digital Credentials built on top of @proof.com/proof-vc-common.

Read our documentation or try them!

Table of Contents

• Installation
• Getting Started
  • Transaction Templates
  • Custom authorization URL
• Styles
• TypeScript
  • React
• Documentation
• Contributing

Installation

npm install @proof.com/proof-vc-web

Getting Started

To request a Verifiable Presentation, init the client once at the start of your application:

import { init } from "@proof.com/proof-vc-web";

init({
  environment: "sandbox",
  client_id: "<CLIENT_ID>",
  callback_uri: "<CALLBACK_URI>",
});

then use the <proof-verify-id /> HTML tag anywhere:

<proof-verify-id nonce="3e8e4918-e9fb-453a-a538-81152be15c1b" />

You can also provide a login-hint or state:

<proof-verify-id
  nonce="3e8e4918-e9fb-453a-a538-81152be15c1b"
  state="6A2B4CD830"
  login-hint="frodo.baggins@theshire"
/>

Transaction Templates

You can use Transaction Templates provided by @proof.com/proof-vc-common via the transactionData prop:

import { transactionData } from "@proof.com/proof-vc-web";

const data = transactionData.paymentItemized({
  title: "Drive Shaft",
  description: "The Roadhouse (18+), May 6 2026",
  currency: "USD",
  items: [
    { quantity: 2, unit_cost: 40.0, label: "General Admission" },
    { quantity: 2, unit_cost: 11.4, label: "Fees" },
  ],
});

<proof-verify-id
  nonce="3e8e4918-e9fb-453a-a538-81152be15c1b"
  transactionData={data}
/>;

Custom authorization URL

You can pass a resolveAuthorizationUrl property to create your own authorization request URL (e.g. a Pushed Authorization Request server-side). When set, the element ignores the nonce / state / login-hint / transactionData attributes.

<proof-verify-id
  resolveAuthorizationUrl={async () => await getAuthorizationRequestURL()}
/>

Return null (or undefined) to cancel the redirect.

Styles

You can customize your <proof-verify-id /> with the following attributes:

• theme: dark | gray | outline | primary (default)
• size: icon | small | medium (default) | large

TypeScript

The package ships its own type definitions; everything you import from @proof.com/proof-vc-web is fully typed by default.

React

<proof-verify-id /> works in React 19+ JSX. To get type checking and prop autocomplete in TSX, opt in to the React types subpath in your project's tsconfig.json:

{
  "compilerOptions": {
    "types": ["@proof.com/proof-vc-web/react"]
  }
}

Or, drop a triple-slash reference in any .d.ts file in your project:

/// <reference types="@proof.com/proof-vc-web/react" />

Both forms activate the React.JSX.IntrinsicElements augmentation that types nonce, theme, size, transactionData, and the other attributes.

Documentation

Digital Credentials guides https://dev.proof.com/docs/digital-credentials-overview
API Documentation https://dev.proof.com/reference/authorizeverifiablecredentialpresentation

Contributing

Contribution guidelines for this project