@openreceive/elements 0.4.5 → 0.4.8

package/README.md

@@ -1,6 +1,30 @@
 # @openreceive/elements
 
-The OpenReceive checkout custom element (`<openreceive-checkout>`) and theme toggle (`<openreceive-theme-toggle>`).
+Add Bitcoin Lightning checkout to any website with
+`<openreceive-checkout>`. The custom element displays payment choices, QR
+codes, and live payment status, with no frontend framework required. It also
+ships `<openreceive-theme-toggle>` for switching the checkout theme.
+
+OpenReceive supports optional swaps from **USDT, USDC, SOL, and ETH** through
+a configured swap provider. The provider converts the payment to **BTC over
+Lightning**, which settles into the merchant's connected wallet. Available
+assets and networks depend on the provider; swaps are optional.
+
+Pair this browser package with an OpenReceive server integration. Your server
+authorizes the order, sets the amount, configures swaps, and verifies
+settlement; wallet and provider credentials stay on the server.
+
+## Install
+
+Use Node.js 22 or later for package tooling.
+
+```sh
+npm install @openreceive/elements
+```
+
+Follow the [frontend checkout guide](https://github.com/openreceive/openreceive/blob/master/docs/guides/frontend-checkout.md)
+to connect the component to your server routes. Use the server-side payment
+hook to fulfill orders; browser callbacks update the interface.
 
 ## Mount
 

package/dist/{chunk-4APDZW7L.js → chunk-YRVW5RLP.js}

@@ -1250,7 +1250,7 @@ function renderElementCompactPaymentSelectorHtml(swapAssetOptions, view) {
         <h2 id="payment-method-heading" class="${orClasses5.wizardHeaderTitle}">${escapeHtml6(checkoutLabels5.wizardTitle)}</h2>
         <p class="${orClasses5.wizardHeaderSubtitle}">${escapeHtml6(checkoutLabels5.wizardSubtitle)}</p>
       </header>
-      <div class="${orClasses5.wizardBody}" aria-labelledby="payment-method-heading">
+      <div class="${orClasses5.methodBody}" aria-labelledby="payment-method-heading">
         <div part="method-grid" role="group" aria-label="${escapeHtml6(checkoutLabels5.paymentMethod)}" class="${orClasses5.methodGrid}">
           ${tiles}${loadingTile}
         </div>
@@ -1284,7 +1284,7 @@ function renderElementNetworkSelectorHtml(group, view, continueButtonHtml, mobil
       label: option.network_label
     })}
             </span>
-            <span class="truncate">${escapeHtml6(option.network_label)}</span>
+            <span class="${orClasses5.methodNetworkLabel}">${escapeHtml6(option.network_label)}</span>
             ${optionSelected ? `<span aria-hidden="true" class="${networkCheckClasses(accent)}">\u2713</span>` : ""}
           </button>
           ${optionDisabled && optionLimit !== void 0 ? `<span class="${orClasses5.methodLimitHint}">${escapeHtml6(optionLimit)}</span>` : ""}
@@ -1503,6 +1503,10 @@ function renderCheckoutHtml(view) {
     <section part="root" data-theme="${escapeHtml7(resolvedTheme)}" class="${orClasses6.root}">
       <slot name="${OPENRECEIVE_CHECKOUT_ELEMENT_SLOTS.order}"></slot>
       ${orderDescription}
+      ${view.mintingLightning ? `<div part="status" role="status" aria-live="polite" class="${orClasses6.creating}">
+              <span part="spinner" class="${orClasses6.spinner}" aria-hidden="true"></span>
+              <p>${escapeHtml7(checkoutLabels6.preparingPayment)}</p>
+            </div>` : ""}
       ${hideLightning ? "" : `<div part="payment-layout" class="${paymentLayoutClass}">
             ${lightningPane}
             <div part="payment-info" class="${orClasses6.paymentInfo}">
@@ -1919,6 +1923,7 @@ function defineElements(options = {}) {
           this.getAttribute(OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES3.paymentWizard)
         ),
         lightningRequested: this.session.mintingLightning ? false : lightningRequested,
+        mintingLightning: this.session.mintingLightning,
         wizard: {
           selectedMethod: this.selection.selectedMethod,
           selectedBitcoinRoute: this.selection.selectedBitcoinRoute,

package/dist/{define-elements-bLhlu_xC.d.ts → define-elements-CdcAT6pW.d.ts}

@@ -30,6 +30,8 @@ interface CheckoutView {
     readonly inlineStyles?: boolean;
     /** False until the payer selects Bitcoin in create-mode (deferred Lightning mint). */
     readonly lightningRequested?: boolean;
+    /** True while the session is creating the Lightning invoice. */
+    readonly mintingLightning?: boolean;
     readonly wizard?: ElementsWizardView;
     /**
      * Live controller state, when the element has one. Preferred over the

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { TransactionDetailsSource } from '@openreceive/browser/headless';
 export { OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES, OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS, OPENRECEIVE_CHECKOUT_ELEMENT_TAG_NAME, OPENRECEIVE_THEME_TOGGLE_ELEMENT_ATTRIBUTES, OPENRECEIVE_THEME_TOGGLE_ELEMENT_EVENTS, OPENRECEIVE_THEME_TOGGLE_ELEMENT_TAG_NAME, TransactionDetailsSource, createThemeToggleElement } from '@openreceive/browser/headless';
-import { C as CheckoutView } from './define-elements-bLhlu_xC.js';
-export { D as DefineElementsOptions, E as ElementsWizardView, d as defineElements } from './define-elements-bLhlu_xC.js';
+import { C as CheckoutView } from './define-elements-CdcAT6pW.js';
+export { D as DefineElementsOptions, E as ElementsWizardView, d as defineElements } from './define-elements-CdcAT6pW.js';
 
 declare function renderCheckoutHtml(view: CheckoutView): string;
 /**

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   renderCheckoutHtml,
   renderThemeToggleHtml,
   renderTransactionDetailsHtml
-} from "./chunk-4APDZW7L.js";
+} from "./chunk-YRVW5RLP.js";
 export {
   OPENRECEIVE_CHECKOUT_ELEMENT_ATTRIBUTES,
   OPENRECEIVE_CHECKOUT_ELEMENT_EVENTS,