@openreceive/browser 0.3.2 → 0.4.0

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 (13) hide show
  1. package/README.md +18 -36
  2. package/dist/{chunk-D4S2GCC4.js → chunk-64ROVMMY.js} +60 -46
  3. package/dist/headless.d.ts +20 -15
  4. package/dist/headless.js +10 -2
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.js +1 -1
  7. package/dist/{status-BMYd00Xn.d.ts → status-CzIEJWjS.d.ts} +15 -5
  8. package/dist/styles.css +1 -1
  9. package/package.json +6 -4
  10. package/skills/debug-openreceive-payment/SKILL.md +89 -0
  11. package/skills/integrate-openreceive/SKILL.md +116 -0
  12. package/skills/integrate-openreceive/references/node.md +484 -0
  13. package/skills/integrate-openreceive/references/rails.md +577 -0
package/README.md CHANGED
@@ -25,39 +25,21 @@ will move without notice.
25
25
 
26
26
  ## Icon assets
27
27
 
28
- The checkout UI (used directly or via `@openreceive/react` /
29
- `@openreceive/elements`) loads its payment-method icons from
30
- `dist/assets/icons/*.svg` **by URL at runtime** — the SVGs are not inlined into
31
- the JS. Each URL is resolved with `new URL()` against the module's own
32
- `import.meta.url`:
33
-
34
- - module emitted as `…/assets/<chunk>.js` (typical Vite/Rollup output) →
35
- icons resolve to a sibling `…/assets/icons/*.svg`;
36
- - any other module URL → `./assets/icons/*.svg` next to the module file.
37
-
38
- Bundlers do not follow these dynamic URLs, so your app must serve the icon
39
- files where the resolution lands. Per setup:
40
-
41
- - **Plain `<script type="module">` / import map**: serve the package's `dist/`
42
- directory as-is (e.g. `/vendor/openreceive/dist/index.js`). The icons already
43
- sit at `dist/assets/icons/`, so nothing to copy.
44
- - **Vite / Rollup**: chunks are emitted under `assets/`, so serve the icons at
45
- `assets/icons/` in the same output — either copy
46
- `node_modules/@openreceive/browser/dist/assets/icons` into
47
- `public/assets/icons/`, or copy it into the build output from a small
48
- `writeBundle` plugin (the repo demos use
49
- `examples/buttons/shared/copy-openreceive-payment-icons-plugin.ts`).
50
- - **webpack / Next.js**: copy the icons next to your emitted bundles with
51
- `copy-webpack-plugin` (the repo's Rails Shakapacker demo copies
52
- `node_modules/@openreceive/browser/dist/assets/icons` to
53
- `<packs output>/js/assets/icons`). Note webpack can compile `import.meta.url`
54
- to a build-machine `file://` URL; always confirm the URLs the page actually
55
- requests (see below) and place — or serve — the icons at that path.
56
-
57
- To verify a setup, check the DevTools network panel for `…/icons/*.svg`
58
- requests, or log `paymentIconUrls` (exported from
59
- `@openreceive/browser/headless`) to see every resolved URL.
60
-
61
- `@openreceive/provider-data` follows the same contract for its runtime images
62
- (`dist/assets/provider-icons`, `dist/assets/pay_tutorials`); the copy recipes
63
- above handle those directories the same way.
28
+ The payment-method icons (`btc`, `lightning`, `usdt`, …) are compiled into
29
+ this package's JavaScript — nothing to copy, serve, or configure, under any
30
+ bundler:
31
+
32
+ - The custom element (`@openreceive/elements`, and the Vue/Svelte/Angular
33
+ wrappers over it) draws them inline in its shadow root from
34
+ `paymentIconSvgs`.
35
+ - Everything that wants a URL — `@openreceive/react`, the display models,
36
+ `getPaymentMethodIcon` and friends, your own `<img>` — gets the same icons
37
+ from `paymentIconUrls` as `data:image/svg+xml` URIs. If your
38
+ Content-Security-Policy `img-src` forbids `data:`, allow it, or pass
39
+ `assetBaseUrl` / `resolveAssetUrl` and the icons are served as files
40
+ instead (`dist/assets/icons/*.svg` still ships, keyed by
41
+ `paymentIconPaths`).
42
+
43
+ `@openreceive/provider-data`'s wallet logos and pay tutorials are files
44
+ (PNG/WebP) your host serves; see
45
+ [docs/guides/provider-registry.md](../../../docs/guides/provider-registry.md#assets).