Headless Components

1import { HeadlessSubscriptionQRGenerator } from 'pyhard-vendor-sdk';
2
3function CustomSubscriptionForm() {
4  return (
5    <HeadlessSubscriptionQRGenerator>
6      {({ 
7        amount, 
8        setAmount, 
9        interval, 
10        setInterval, 
11        generateQR, 
12        qrData 
13      }) => (
14        <div className="bg-white p-6 rounded-lg shadow-lg">
15          <h2 className="text-2xl font-bold mb-4">Create Subscription</h2>
16          <div className="space-y-4">
17            <div>
18              <label className="block text-sm font-medium mb-2">
19                Amount (PYUSD)
20              </label>
21              <input
22                type="number"
23                value={amount}
24                onChange={(e) => setAmount(e.target.value)}
25                className="w-full p-2 border rounded"
26              />
27            </div>
28            <div>
29              <label className="block text-sm font-medium mb-2">
30                Interval
31              </label>
32              <select
33                value={interval}
34                onChange={(e) => setInterval(e.target.value)}
35                className="w-full p-2 border rounded"
36              >
37                <option value="daily">Daily</option>
38                <option value="weekly">Weekly</option>
39                <option value="monthly">Monthly</option>
40              </select>
41            </div>
42            <button
43              onClick={generateQR}
44              className="w-full bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700"
45            >
46              Generate QR Code
47            </button>
48            {qrData && (
49              <div className="text-center">
50                <img src={qrData.qrCode} alt="Subscription QR" />
51                <p className="text-sm text-gray-600 mt-2">
52                  Scan with PyHard mobile app
53                </p>
54              </div>
55            )}
56          </div>
57        </div>
58      )}
59    </HeadlessSubscriptionQRGenerator>
60  );
61}