@htmlbricks/hb-payment-paypal 0.71.36 → 0.72.0

package/README.md

@@ -1,31 +1,30 @@
-# hb-payment-paypal
+# `hb-payment-paypal` — integrator guide
 
 **Category:** commerce · **Tags:** commerce, payment · **Package:** `@htmlbricks/hb-payment-paypal`
 
-## Overview
+## Summary
 
 `hb-payment-paypal` loads the official [PayPal JS SDK](https://developer.paypal.com/docs/checkout/) using your **client id** and **currency**, renders **PayPal Buttons** for a **single fixed order total**, and on buyer approval runs **order capture** (`intent: "CAPTURE"`). When capture succeeds, the element dispatches a **`paymentCompleted`** custom event so your host page can continue checkout, clear a cart, or show a receipt.
 
 The visible PayPal button chrome is drawn by PayPal inside the mounted region; this web component owns wiring, totals, and the completion event.
 
-## Custom element
+## Custom element tag
 
-```text
-hb-payment-paypal
+```html
+<hb-payment-paypal …></hb-payment-paypal>
 ```
 
-## Attributes (HTML)
+## Attributes (HTML / reflected props)
 
-All attribute names are **snake_case**. Values from HTML are **strings**; the component coerces `total` to a number when needed.
+All names are **snake_case**. Values from HTML are **strings**; **`total`** is coerced with **`Number(...)`** inside the component.
 
 | Attribute | Required | Description |
 |-----------|----------|-------------|
-| `paypalid` | Yes | PayPal **client id** (REST app / “Client ID” in the PayPal Developer Dashboard). Passed to the SDK as `client-id`. |
-| `currency` | Yes | Order currency: **`EUR`** or **`USD`**. Non-empty values are normalized to **uppercase**; if missing, the implementation defaults to **`EUR`**. |
-| `total` | Yes | Order **amount** as a string (e.g. `"40"`, `"12.5"`). Coerced with `Number(...)` for PayPal’s `purchase_units[].amount.value`. Use a decimal string that matches your pricing rules. |
-| `id` | No | Optional string (default empty). Reserved for host/DOM use; does not change PayPal SDK behavior in the current markup. |
-
-> **Typings note:** `types/webcomponent.type.d.ts` may list an optional `style` field on the logical `Component` shape. The current Svelte implementation does not read `style` from props, so setting a `style` attribute has no defined effect on this build.
+| `paypalid` | Yes | PayPal **client id** (passed to the SDK as **`client-id`**). |
+| `currency` | No | **`EUR`** or **`USD`** (uppercased when set; defaults to **`EUR`**). |
+| `total` | No | Order amount (string or number after coercion; default **`0`** in the implementation). |
+| `id` | No | Optional host id. |
+| `style` | No | Optional on **`Component`**; normal host **`style`** still applies in the light DOM. |
 
 ## Behavior
 
@@ -70,6 +69,10 @@ See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/
 |------|--------|
 | `btn` | Host wrapper around the PayPal Buttons mount (`#paypalbtn`). Use `::part(btn)` for **layout and spacing** around the SDK; do not expect to theme PayPal’s internal button art. |
 
+## TypeScript typings (authoring)
+
+From `types/webcomponent.type.d.ts`: **`Component`** (`paypalid`, optional **`currency`**, **`total`**, **`id`**, **`style`**) and **`Events`** (`paymentCompleted`).
+
 ## Integration notes
 
 - **Content Security Policy:** Allow PayPal’s script and frame origins required by the JS SDK and Smart Payment Buttons, or the load/render step will fail.

package/manifest.json

@@ -60,9 +60,7 @@
             }
           },
           "required": [
-            "paypalid",
-            "currency",
-            "total"
+            "paypalid"
           ],
           "type": "object"
         }
@@ -186,5 +184,5 @@
   "size": {},
   "iifePath": "main.iife.js",
   "repoName": "@htmlbricks/hb-payment-paypal",
-  "version": "0.71.36"
+  "version": "0.72.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htmlbricks/hb-payment-paypal",
-  "version": "0.71.36",
+  "version": "0.72.0",
   "contributors": [],
   "description": "Loads the PayPal JS SDK with your client id and currency, renders PayPal Buttons for a fixed order total, captures payment on approval, and dispatches paymentCompleted when the order is captured successfully.",
   "licenses": [

package/types/webcomponent.type.d.json

@@ -26,9 +26,7 @@
         }
       },
       "required": [
-        "paypalid",
-        "currency",
-        "total"
+        "paypalid"
       ],
       "type": "object"
     }

package/types/webcomponent.type.d.ts

@@ -1,11 +1,11 @@
 export type Component = {
-	id?: string;
-	style?: string;
-	paypalid: string;
-	currency: "EUR" | "USD";
-	total: number;
+  id?: string;
+  style?: string;
+  paypalid: string;
+  currency?: "EUR" | "USD";
+  total?: number;
 };
 
 export type Events = {
-	paymentCompleted: { method: "paypal"; total: number };
+  paymentCompleted: { method: "paypal"; total: number };
 };