@ic-pay/icpay-widget 1.2.106 → 1.2.111

package/README.md

@@ -1,6 +1,6 @@
-# ICPay Widget (Web Components)
+# ICPay Widget
 
-Embeddable, framework-agnostic payment widgets powered by `@ic-pay/icpay-sdk`.
+Embeddable, framework-agnostic payment widgets for **ICPay** — multi-chain crypto payments on **EVM (e.g. Base)**, **Solana**, and **Internet Computer**. Drop-in Web Components and React wrappers powered by `@ic-pay/icpay-sdk`.
 
 ## Installation
 
@@ -21,16 +21,26 @@ npm install @ic-pay/icpay-widget @ic-pay/icpay-sdk
 
 ## Components
 
-- `icpay-pay-button` — One‑click pay button
-- `icpay-amount-input` — Enter custom amount, then pay
-- `icpay-premium-content` — Gated content unlock
-- `icpay-tip-jar` — Tips/donations
-- `icpay-article-paywall` — Article paywall/unlock
-- `icpay-coffee-shop` — Simple store with preset items
-- `icpay-donation-thermometer` — Donation progress tracker
-- `icpay-progress-bar` — Transaction progress indicator
+| Component | Description |
+|-----------|-------------|
+| `icpay-pay-button` | One-click pay with fixed or configurable amount |
+| `icpay-amount-input` | Enter custom USD amount, then pay |
+| `icpay-tip-jar` | Preset tip amounts (e.g. $1, $5, $10) |
+| `icpay-premium-content` | Gated content unlock (paywall) |
+| `icpay-article-paywall` | Article paywall with preview and unlock |
+| `icpay-coffee-shop` | Simple store with preset items and prices |
+| `icpay-donation-thermometer` | Donation progress toward a goal |
+| `icpay-progress-bar` | Transaction progress indicator (used internally) |
 
-React bindings are available for all components via `@ic-pay/icpay-widget/react`.
+React bindings for all components: `@ic-pay/icpay-widget/react`.
+
+## Supported chains and wallets
+
+- **EVM** (Base, etc.) — MetaMask, Coinbase Wallet, Brave, Rabby, OKX, WalletConnect (QR + deep links).
+- **Solana** — Phantom, Backpack (and compatible `window.solana` providers).
+- **Internet Computer** — Plug, Internet Identity (II), Oisy, NFID.
+
+Use **token shortcodes** (e.g. `base_usdc`, `sol_usdc`, `ic_icp`) to choose chain and token. Filter options with `tokenShortcodes`, `chainShortcodes`, or `chainTypes` in config.
 
 ## Quick usage
 
@@ -43,7 +53,7 @@ HTML (with a bundler):
 <icpay-pay-button
   id="pay"
   publishable-key="YOUR_PK"
-  token-shortcode="icp"
+  token-shortcode="base_usdc"
   amount-usd="5"
 ></icpay-pay-button>
 ```
@@ -54,16 +64,34 @@ import { IcpayPayButton } from '@ic-pay/icpay-widget/react';
 
 export default function Example() {
   return (
-    <IcpayPayButton config={{ publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK!, tokenShortcode: 'icp', amountUsd: 5 }} />
+    <IcpayPayButton
+      config={{
+        publishableKey: process.env.NEXT_PUBLIC_ICPAY_PK!,
+        tokenShortcode: 'base_usdc',
+        amountUsd: 5,
+      }}
+    />
   );
 }
 ```
 
-## Styling & theming
+## Config highlights
+
+- **publishableKey** (required) — From your ICPay account.
+- **tokenShortcode** — Token/chain (e.g. `base_usdc`, `sol_usdc`, `ic_icp`). Omit to let the user pick.
+- **tokenShortcodes** / **chainShortcodes** / **chainTypes** — Restrict which tokens or chains are shown.
+- **recipientAddresses** — `{ evm?, ic?, sol? }` for relay payments to your addresses per chain.
+- **theme** — `'light' | 'dark'` or a `ThemeConfig` object.
+- **evmProvider** — Pass `window.ethereum` (or another provider) for EVM flows in the browser.
+
+Full config and options: [docs.icpay.org](https://docs.icpay.org).
+
+## Styling and theming
 
-- Works out of the box. Customize with CSS variables on `:root` or the element.
-- A minimal Tailwind CSS build is available in `dist/tailwind.css` (optional).
+- Works out of the box. Override with CSS variables on `:root` or the component (e.g. `--icpay-primary`, `--icpay-surface`, `--icpay-text`).
+- Optional Tailwind build: `dist/tailwind.css`.
 
 ## Documentation
 
-Full component reference, theming, events, and examples: https://docs.icpay.org
+- **Component reference, theming, events, examples:** [https://docs.icpay.org](https://docs.icpay.org)
+- **Sandbox (testnets):** [betterstripe.com](https://betterstripe.com) — test with Base Sepolia, Solana Devnet, and other test networks.

package/dist/{amount-input-CbtNz-UV.d.ts → amount-input-DlnLWkeX.d.ts}

@@ -64,6 +64,12 @@ type CommonConfig = {
     disableAfterSuccess?: boolean;
     onrampDisabled?: boolean;
     onramp?: OnrampConfig;
+    /**
+     * Optional: existing payment intent id (e.g. from server/checkout).
+     * When set, widget loads the intent from icpay-api; if already completed, shows success.
+     * Otherwise amount/currency and payment flow are driven by the loaded intent.
+     */
+    paymentIntentId?: string;
 };
 type PremiumContentConfig = CommonConfig & {
     priceUsd: number;
@@ -700,12 +706,15 @@ declare class ICPayPayButton extends LitElement {
     private balancesLoading;
     private balancesError;
     private walletBalances;
+    private loadedPaymentIntent;
+    private paymentIntentLoading;
     private onrampPollTimer;
     private pnp;
     private oisyConnectRetriedNewTab;
     private sdk;
     private onrampPollingActive;
     private onrampNotifyController;
+    private onTransactionCompleted;
     private getSdk;
     /** Ensure WalletSelect (pnp) is created with same config as wallet modal; used by generateWalletConnectQr. */
     private getOrCreatePnp;
@@ -730,6 +739,9 @@ declare class ICPayPayButton extends LitElement {
      */
     connectWallet(walletId: string): Promise<void>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Load payment intent by id from config; if completed show success, else merge intent into config for amount/currency and pass to SDK. */
+    private loadPaymentIntentIfNeeded;
     protected updated(changed: Map<string, unknown>): void;
     private onSwitchAccount;
     private selectSymbol;