Basic Integration

Get started with PyHard SDK in your React app

Setup

1npm install pyhard-vendor-sdk

Provider Setup

1import { PyHardProvider } from 'pyhard-vendor-sdk';
2
3function App() {
4  return (
5    <PyHardProvider
6      projectId={process.env.NEXT_PUBLIC_PROJECT_ID!}
7      chainId={421614}
8      paymasterUrl={process.env.NEXT_PUBLIC_PAYMASTER_URL!}
9    >
10      <VendorDashboard />
11    </PyHardProvider>
12  );
13}

Basic Components

1import { 
2  WalletConnect, 
3  SubscriptionQRGenerator, 
4  SubscriptionList 
5} from 'pyhard-vendor-sdk';
6
7function VendorDashboard() {
8  return (
9    <div className="p-6">
10      <h1>Vendor Dashboard</h1>
11      
12      <div className="mb-6">
13        <WalletConnect />
14      </div>
15      
16      <div className="mb-6">
17        <SubscriptionQRGenerator 
18          onQRGenerated={(qrData) => {
19            console.log('QR Code:', qrData);
20          }}
21        />
22      </div>
23      
24      <SubscriptionList 
25        vendorAddress="0x..."
26        onPaymentExecuted={(id, hash) => {
27          console.log('Payment executed:', id, hash);
28        }}
29      />
30    </div>
31  );
32}