@ic-pay/icpay-widget 1.2.57 → 1.2.59

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +47 -9
  2. package/dist/{chunk-GILUWNAP.js → chunk-MEP5DSFP.js} +17 -17
  3. package/dist/chunk-MEP5DSFP.js.map +1 -0
  4. package/dist/index.js +1 -1
  5. package/dist/react/index.js +1 -1
  6. package/package.json +1 -1
  7. package/dist/chunk-GILUWNAP.js.map +0 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- ## ICPay Widget (Web Components)
1
+ # ICPay Widget (Web Components)
2
2
 
3
3
  Embeddable, framework-agnostic payment widgets powered by `@ic-pay/icpay-sdk`.
4
4
 
5
- ### Installation
5
+ ## Installation
6
6
 
7
7
  Using pnpm:
8
8
  ```bash
@@ -19,13 +19,51 @@ Using npm:
19
19
  npm install @ic-pay/icpay-widget @ic-pay/icpay-sdk
20
20
  ```
21
21
 
22
- ### Documentation
22
+ ## Components
23
23
 
24
- For full usage, component list, configuration, theming, and examples, see the ICPay documentation: [ICPay Docs](https://docs.icpay.org).
24
+ - `icpay-pay-button` — One‑click pay button
25
+ - `icpay-amount-input` — Enter custom amount, then pay
26
+ - `icpay-premium-content` — Gated content unlock
27
+ - `icpay-tip-jar` — Tips/donations
28
+ - `icpay-article-paywall` — Article paywall/unlock
29
+ - `icpay-coffee-shop` — Simple store with preset items
30
+ - `icpay-donation-thermometer` — Donation progress tracker
31
+ - `icpay-progress-bar` — Transaction progress indicator
25
32
 
26
- ### Basic Info
33
+ React bindings are available for all components via `@ic-pay/icpay-widget/react`.
27
34
 
28
- - Framework-agnostic Web Components (works with vanilla JS, React, Next.js, etc.)
29
- - Requires and integrates with `@ic-pay/icpay-sdk`
30
- - TypeScript types included
31
- - Theming via CSS variables
35
+ ## Quick usage
36
+
37
+ HTML (with a bundler):
38
+ ```html
39
+ <script type="module">
40
+ import '@ic-pay/icpay-widget';
41
+ </script>
42
+
43
+ <icpay-pay-button
44
+ id="pay"
45
+ publishable-key="YOUR_PK"
46
+ token-shortcode="icp"
47
+ amount-usd="5"
48
+ ></icpay-pay-button>
49
+ ```
50
+
51
+ React:
52
+ ```tsx
53
+ import { IcpayPayButton } from '@ic-pay/icpay-widget/react';
54
+
55
+ export default function Example() {
56
+ return (
57
+ <IcpayPayButton config={{ publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK!, tokenShortcode: 'icp', amountUsd: 5 }} />
58
+ );
59
+ }
60
+ ```
61
+
62
+ ## Styling & theming
63
+
64
+ - Works out of the box. Customize with CSS variables on `:root` or the element.
65
+ - A minimal Tailwind CSS build is available in `dist/tailwind.css` (optional).
66
+
67
+ ## Documentation
68
+
69
+ Full component reference, theming, events, and examples: https://docs.icpay.org