SDK Components Reference¶

import {
  SubscriptionGuard,
  CheckoutWizard,
  SubscriptionCard,
  SubscriptionDashboard,
  ManageSubscriptionModal,
  PlanCard,
  PricingTable,
  SubscryptsButton,
  ConnectWalletModal,
  MerchantDashboard,
  LoadingSpinner,
  Modal,
  ErrorDisplay,
  NetworkSwitchPrompt,
  SubscryptsErrorBoundary
} from '@subscrypts/subscrypts-sdk-react';

<SubscriptionGuard planId="1" fallbackUrl="/subscribe">
  <PremiumContent />
</SubscriptionGuard>

<SubscriptionGuard planIds={['1', '2', '3']}>
  <PremiumContent />
</SubscriptionGuard>

<SubscriptionGuard planIds={['1', '2']} requireAll>
  <BundleContent />
</SubscriptionGuard>

<SubscriptionGuard
  planId="5"
  loadingComponent={<MySkeletonLoader />}
  onAccessDenied={() => analytics.track('paywall_hit')}
>
  <ExclusiveArticle />
</SubscriptionGuard>

import { useState } from 'react';
import { CheckoutWizard } from '@subscrypts/subscrypts-sdk-react';

function SubscribePage() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Subscribe to Plan #1</button>

      <CheckoutWizard
        planId="1"
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onSuccess={(subId) => {
          console.log('Subscribed! ID:', subId);
          setIsOpen(false);
        }}
        onError={(err) => console.error('Subscription failed:', err)}
      />
    </>
  );
}

<SubscryptsButton
  planId="1"
  variant="primary"
  size="lg"
  onSuccess={(subId) => navigate('/dashboard')}
>
  Subscribe Now
</SubscryptsButton>

<SubscriptionCard
  subscription={subscription}
  showManageButton={true}
  onCancelled={() => refetchSubscriptions()}
  onUpdated={() => refetchSubscriptions()}
/>

<SubscriptionDashboard
  pageSize={10}
  showFiatPrices={true}
  onSubscriptionCancelled={(id) => console.log('Cancelled:', id)}
/>

<ManageSubscriptionModal
  isOpen={showManage}
  onClose={() => setShowManage(false)}
  subscriptionId="42"
  subscription={subscriptionData}
  onCancelled={() => {
    setShowManage(false);
    refetchSubscriptions();
  }}
  onUpdated={() => refetchSubscriptions()}
/>

<PlanCard
  plan={plan}
  currency="SUBS"
  showFields={['description', 'amount', 'frequency', 'subscribers']}
  onSubscribe={(planId) => openCheckout(planId)}
  subscribeLabel="Get Started"
  featured={true}
  title="Pro Plan"
/>

<PricingTable
  plans={['1', '2', '3']}
  currency="SUBS"
  showFields={['description', 'amount', 'frequency', 'subscribers']}
/>

<PricingTable
  plans={[
    { planId: '1', title: 'Basic', subscribeLabel: 'Start Free' },
    { planId: '2', title: 'Pro', featured: true, subscribeLabel: 'Go Pro' },
    { planId: '3', title: 'Enterprise', subscribeLabel: 'Contact Us' }
  ]}
  columns={3}
  onSubscriptionSuccess={(subId, planId) => {
    console.log(`Subscribed to plan ${planId}, subscription ID: ${subId}`);
  }}
/>

import { ConnectWalletModal, useSubscrypts } from '@subscrypts/subscrypts-sdk-react';

function ConnectButton() {
  const [showModal, setShowModal] = useState(false);
  const { connectors, connectWith } = useSubscrypts();

  return (
    <>
      <button onClick={() => setShowModal(true)}>Connect Wallet</button>

      <ConnectWalletModal
        isOpen={showModal}
        onClose={() => setShowModal(false)}
        connectors={connectors}
        onConnect={async (id) => {
          await connectWith(id);
        }}
      />
    </>
  );
}

import { MerchantDashboard } from '@subscrypts/subscrypts-sdk-react';

function MerchantPage() {
  return <MerchantDashboard />;
}

import { LoadingSpinner } from '@subscrypts/subscrypts-sdk-react';

<LoadingSpinner />

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Confirm Action" size="sm">
  <p>Are you sure you want to proceed?</p>
  <button onClick={handleConfirm}>Confirm</button>
</Modal>

<ErrorDisplay
  error={subscriptionError}
  onRetry={() => subscribe(params)}
  onDismiss={() => setError(null)}
/>

import { NetworkSwitchPrompt, useWallet } from '@subscrypts/subscrypts-sdk-react';

function NetworkBanner() {
  const { walletState, switchNetwork } = useWallet();

  if (!walletState.chainId || walletState.chainId === 42161) return null;

  return (
    <NetworkSwitchPrompt
      currentChainId={walletState.chainId}
      onSwitch={() => switchNetwork(42161)}
    />
  );
}

<SubscryptsErrorBoundary
  fallback={(error, reset) => (
    <div>
      <p>Something went wrong: {error.message}</p>
      <button onClick={reset}>Try Again</button>
    </div>
  )}
  onError={(error) => analytics.trackError(error)}
>
  <SubscriptionDashboard />
</SubscryptsErrorBoundary>