@cdr-kit/react-ui/Components/SubscribeButton

<SubscribeButton>

Batteries-included CTA. Wraps useSubscribeAndAccess, renders an inline AccessStepper through the wait phases, then shows the decrypted JSON when access is granted.

import { SubscribeButton } from "@cdr-kit/react-ui"

Live preview

mock kit

import { CdrProvider } from "@cdr-kit/react";
import { createMockCdrKit } from "@cdr-kit/core";
import { SubscribeButton } from "@cdr-kit/react-ui";

<CdrProvider mockKit={createMockCdrKit()}>
<SubscribeButton
  uuid={4200}
  priceWei={5n * 10n ** 18n}
  priceLabel="5 $IP"
/>
</CdrProvider>

Props

Prop	Type	Default	Description
uuidrequired	number	—	The CDR vault id to subscribe to.
priceWeirequired	bigint	—	Total value (wei) sent to subscribe. Use the maxPricePerPeriod from your condition config.
priceLabelrequired	string	—	Human-readable price rendered on the button (e.g. "5 $IP").
periods	bigint	1n	Number of subscription periods to pay for in this call.
subscriptionCondition	Hex	—	Override the default deployed SubscriptionCondition address.
onAccess	(bytes: Uint8Array) => void	—	Called with the decrypted bytes once the flow completes.

← Previous

AccessStepper

VaultCard