@power-elements/stripe-elements - npm Package Compare versions

Comparing version 2.3.12 to 3.0.0-next.3

CHANGELOG.md

@@ -0,1 +1,46 @@
+# [3.0.0-next.3](https://github.com/bennypowers/stripe-elements/compare/v3.0.0-next.2...v3.0.0-next.3) (2022-02-15)
+
+
+### Bug Fixes
+
+* update docs ([e34687d](https://github.com/bennypowers/stripe-elements/commit/e34687dbf31b5204cef0454ffd3a7b258247c837))
+
+# [3.0.0-next.2](https://github.com/bennypowers/stripe-elements/compare/v3.0.0-next.1...v3.0.0-next.2) (2022-02-15)
+
+
+### Bug Fixes
+
+* update deps ([2c34c91](https://github.com/bennypowers/stripe-elements/commit/2c34c9140f54dd4beb2fca4ca508c4a92c8a742f))
+
+# [3.0.0-next.1](https://github.com/bennypowers/stripe-elements/compare/v2.3.12...v3.0.0-next.1) (2022-02-11)
+
+
+* feat!: load stripe automatically ([eee9c53](https://github.com/bennypowers/stripe-elements/commit/eee9c5335dfa7884a82fcab50cd693bed5e7701b))
+
+
+### BREAKING CHANGES
+
+* migrate to stripe npm, with `window.Stripe` fallback
+
+remove ShadyDOM support
+
+remove `ReadOnlyMixin` and `LitNotifyMixin` in favour of decorators
+  - private `setReadonlyProperties` removed
+
+move breadcrumb code to a controller.
+
+remove deprecated properties
+  - `isComplete` => `complete
+  - `isEmpty` => `empty`
+  - `card` => `element`
+  - `stripeReady` => `ready`
+  - `hasError` => `error`
+
+remove deprecated events
+  - `stripe-ready` => `ready`
+  - `stripe-error` => `error`
+  - `stripe-payment-method` => `payment-method`
+  - `stripe-source` => `source`
+  - `stripe-token` => `token`
+
 ## [2.3.12](https://github.com/bennypowers/stripe-elements/compare/v2.3.11...v2.3.12) (2021-10-03)
@@ -2,0 +47,0 @@

custom-elements-manifest.config.js

 // @ts-check
-import { readmePlugin } from 'cem-plugin-readme';
 import { moduleFileExtensionsPlugin } from 'cem-plugin-module-file-extensions';
 
 export default {
+  litelement: true,
   globs: ['src/stripe-*.ts', 'src/index.ts'],
@@ -13,7 +13,4 @@ exclude: ['**/*.d.ts'],
     }),
-    readmePlugin({
-      head: 'src/README.template.md',
-      headerLevel: 3,
-    }),
   ],
 };
+

custom-elements.json

@@ -232,7 +232,6 @@ {
               "kind": "field",
-              "name": "slotName",
+              "name": "element",
               "type": {
-                "text": "SlotName"
-              },
-              "privacy": "protected"
+                "text": "Stripe.StripeCardElement"
+              }
             },
@@ -263,3 +262,3 @@ {
               "type": {
-                "text": "stripe.elements.ElementsOptions['iconStyle']"
+                "text": "Stripe.StripeCardElementOptions['iconStyle']"
               },
@@ -274,3 +273,3 @@ "default": "'default'",
               "type": {
-                "text": "stripe.elements.ElementsOptions['value']"
+                "text": "Stripe.StripeCardElementOptions['value']"
               },
@@ -285,3 +284,3 @@ "default": "{}",
               "type": {
-                "text": "stripe.brandType"
+                "text": "Stripe.StripeCardElementChangeEvent['brand']"
               },
@@ -326,34 +325,2 @@ "default": "null",
             {
-              "kind": "field",
-              "name": "card",
-              "type": {
-                "text": "stripe.elements.Element"
-              },
-              "default": "null",
-              "description": "The Stripe card object.\n**DEPRECATED**. Will be removed in a future version. use `element` instead",
-              "attribute": "card"
-            },
-            {
-              "kind": "field",
-              "name": "isEmpty",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether the form is empty.\n**DEPRECATED**. Will be removed in a future version. use `empty` instead",
-              "attribute": "is-empty",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "isComplete",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the form is complete.\n**DEPRECATED**. Will be removed in a future version. use `complete` instead",
-              "attribute": "is-complete",
-              "reflects": true
-            },
-            {
               "kind": "method",
@@ -364,3 +331,3 @@ "name": "createPaymentMethod",
                 "type": {
-                  "text": "Promise<stripe.PaymentMethodResponse>"
+                  "text": "Promise<Stripe.PaymentMethodResult>"
                 }
@@ -373,3 +340,3 @@ },
                   "type": {
-                    "text": "stripe.PaymentMethodData"
+                    "text": "Stripe.CreatePaymentMethodData"
                   }
@@ -386,3 +353,3 @@ }
                 "type": {
-                  "text": "Promise<stripe.SourceResponse>"
+                  "text": "Promise<Stripe.SourceResult>"
                 }
@@ -395,3 +362,3 @@ },
                   "type": {
-                    "text": "stripe.SourceOptions"
+                    "text": "Stripe.CreateSourceData"
                   }
@@ -408,3 +375,3 @@ }
                 "type": {
-                  "text": "Promise<stripe.TokenResponse>"
+                  "text": "Promise<Stripe.TokenResult>"
                 }
@@ -415,6 +382,3 @@ },
                   "name": "tokenData",
-                  "default": "this.tokenData",
-                  "type": {
-                    "text": "stripe.TokenOptions"
-                  }
+                  "default": "this.tokenData"
                 }
@@ -470,2 +434,7 @@ ],
               "kind": "method",
+              "name": "updateStyle",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
               "name": "getPaymentMethodData",
@@ -475,3 +444,3 @@ "privacy": "private",
                 "type": {
-                  "text": "stripe.PaymentMethodData"
+                  "text": "Stripe.CreatePaymentMethodData"
                 }
@@ -487,3 +456,3 @@ },
                 "type": {
-                  "text": "StripeStyleInit"
+                  "text": "Stripe.StripeElementStyle"
                 }
@@ -505,2 +474,15 @@ },
               "kind": "method",
+              "name": "createElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "Stripe.StripeCardElementOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
               "name": "onChange",
@@ -517,3 +499,3 @@ "privacy": "private",
                   "type": {
-                    "text": "stripe.elements.ElementChangeResponse"
+                    "text": "Stripe.StripeCardElementChangeEvent"
                   }
@@ -553,3 +535,3 @@ }
               "type": {
-                "text": "stripe.elements.ElementsOptions['iconStyle']"
+                "text": "Stripe.StripeCardElementOptions['iconStyle']"
               },
@@ -563,3 +545,3 @@ "default": "'default'",
               "type": {
-                "text": "stripe.elements.ElementsOptions['value']"
+                "text": "Stripe.StripeCardElementOptions['value']"
               },
@@ -573,3 +555,3 @@ "default": "{}",
               "type": {
-                "text": "stripe.brandType"
+                "text": "Stripe.StripeCardElementChangeEvent['brand']"
               },
@@ -606,29 +588,2 @@ "default": "null",
               "fieldName": "invalid"
-            },
-            {
-              "name": "card",
-              "type": {
-                "text": "stripe.elements.Element"
-              },
-              "default": "null",
-              "description": "The Stripe card object.\n**DEPRECATED**. Will be removed in a future version. use `element` instead",
-              "fieldName": "card"
-            },
-            {
-              "name": "is-empty",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether the form is empty.\n**DEPRECATED**. Will be removed in a future version. use `empty` instead",
-              "fieldName": "isEmpty"
-            },
-            {
-              "name": "is-complete",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the form is complete.\n**DEPRECATED**. Will be removed in a future version. use `complete` instead",
-              "fieldName": "isComplete"
             }
@@ -734,10 +689,2 @@ ],
               "kind": "field",
-              "name": "slotName",
-              "type": {
-                "text": "SlotName"
-              },
-              "privacy": "protected"
-            },
-            {
-              "kind": "field",
               "name": "amount",
@@ -755,3 +702,3 @@ "type": {
               "type": {
-                "text": "CanMakePaymentType"
+                "text": "Stripe.CanMakePaymentResult"
               },
@@ -776,3 +723,3 @@ "default": "null",
               "type": {
-                "text": "StripePaymentRequestOptions['currency']"
+                "text": "Stripe.PaymentRequestOptions['currency']"
               },
@@ -787,3 +734,3 @@ "description": "Three character currency code",
               "type": {
-                "text": "DisplayItem[]"
+                "text": "Stripe.PaymentRequestItem[]"
               }
@@ -795,5 +742,5 @@ },
               "type": {
-                "text": "DisplayItem[]"
+                "text": "Stripe.PaymentRequestItem[]"
               },
-              "description": "An array of DisplayItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above.",
+              "description": "An array of PaymentRequestItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above.",
               "attribute": "displayItems"
@@ -815,3 +762,3 @@ },
               "type": {
-                "text": "PaymentIntent"
+                "text": "Stripe.PaymentIntent"
               },
@@ -826,3 +773,3 @@ "default": "null",
               "type": {
-                "text": "stripe.paymentRequest.StripePaymentRequest"
+                "text": "Stripe.PaymentRequest"
               },
@@ -885,3 +832,3 @@ "default": "null",
               "type": {
-                "text": "ShippingOption[]"
+                "text": "Stripe.PaymentRequestShippingOption[]"
               }
@@ -893,5 +840,5 @@ },
               "type": {
-                "text": "ShippingOption[]"
+                "text": "Stripe.PaymentRequestShippingOption[]"
               },
-              "description": "An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option.",
+              "description": "An array of PaymentRequestShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option.",
               "attribute": "shippingOptions"
@@ -903,3 +850,3 @@ },
               "type": {
-                "text": "PaymentRequestButtonStyleOptions['type']"
+                "text": "StripePaymentRequestButtonType"
               },
@@ -913,3 +860,3 @@ "default": "'default'",
               "type": {
-                "text": "PaymentRequestButtonStyleOptions['theme']"
+                "text": "StripePaymentRequestButtonTheme"
               },
@@ -935,6 +882,6 @@ "default": "'dark'",
                 "type": {
-                  "text": "StripePaymentRequestOptions"
+                  "text": "Stripe.PaymentRequestOptions"
                 }
               },
-              "description": "Creates a StripePaymentRequestOptions object."
+              "description": "Creates a PaymentRequestOptions object."
             },
@@ -1003,25 +950,5 @@ {
             {
-              "kind": "method",
+              "kind": "field",
               "name": "complete",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<StripePaymentRequestResponse | { error: stripe.Error | null }>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "paymentResponse",
-                  "type": {
-                    "text": "StripePaymentRequestResponse"
-                  }
-                },
-                {
-                  "name": "confirmationError",
-                  "optional": true,
-                  "type": {
-                    "text": "stripe.Error"
-                  }
-                }
-              ],
               "description": "Completes the PaymentRequest."
@@ -1040,5 +967,5 @@ },
                 {
-                  "name": "paymentResponse",
+                  "name": "event",
                   "type": {
-                    "text": "StripePaymentRequestResponse"
+                    "text": "StripePaymentRequestEvent"
                   }
@@ -1062,3 +989,3 @@ }
                   "type": {
-                    "text": "StripePaymentRequestResponse"
+                    "text": "Stripe.PaymentRequestPaymentMethodEvent"
                   }
@@ -1075,3 +1002,3 @@ }
                 "type": {
-                  "text": "Promise<PaymentIntentResponse>"
+                  "text": "Promise<Stripe.PaymentIntentResult>"
                 }
@@ -1084,3 +1011,3 @@ },
                   "type": {
-                    "text": "stripe.ConfirmCardPaymentData"
+                    "text": "Stripe.ConfirmCardPaymentData"
                   }
@@ -1092,3 +1019,3 @@ },
                   "type": {
-                    "text": "stripe.ConfirmCardPaymentOptions"
+                    "text": "Stripe.ConfirmCardPaymentOptions"
                   }
@@ -1112,3 +1039,3 @@ }
                   "type": {
-                    "text": "ShippingAddressChangeEvent"
+                    "text": "Stripe.PaymentRequestShippingAddressEvent"
                   }
@@ -1131,3 +1058,3 @@ }
                   "type": {
-                    "text": "ShippingOptionChangeEvent"
+                    "text": "Stripe.PaymentRequestShippingOptionEvent"
                   }
@@ -1143,3 +1070,3 @@ }
                 "type": {
-                  "text": "ShippingOption[]"
+                  "text": "Stripe.PaymentRequestShippingOption[]"
                 }
@@ -1163,3 +1090,3 @@ },
                 "type": {
-                  "text": "DisplayItem[]"
+                  "text": "Stripe.PaymentRequestItem[]"
                 }
@@ -1182,3 +1109,3 @@ },
                 "type": {
-                  "text": "(stripe.paymentRequest.DisplayItem|stripe.paymentRequest.ShippingOption)[]"
+                  "text": "(Stripe.PaymentRequestItem|Stripe.PaymentRequestShippingOption)[]"
                 }
@@ -1230,3 +1157,3 @@ },
               "type": {
-                "text": "CanMakePaymentType"
+                "text": "Stripe.CanMakePaymentResult"
               },
@@ -1248,3 +1175,3 @@ "default": "null",
               "type": {
-                "text": "StripePaymentRequestOptions['currency']"
+                "text": "Stripe.PaymentRequestOptions['currency']"
               },
@@ -1257,5 +1184,5 @@ "description": "Three character currency code",
               "type": {
-                "text": "DisplayItem[]"
+                "text": "Stripe.PaymentRequestItem[]"
               },
-              "description": "An array of DisplayItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above.",
+              "description": "An array of PaymentRequestItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above.",
               "fieldName": "displayItems"
@@ -1274,3 +1201,3 @@ },
               "type": {
-                "text": "PaymentIntent"
+                "text": "Stripe.PaymentIntent"
               },
@@ -1284,3 +1211,3 @@ "default": "null",
               "type": {
-                "text": "stripe.paymentRequest.StripePaymentRequest"
+                "text": "Stripe.PaymentRequest"
               },
@@ -1335,5 +1262,5 @@ "default": "null",
               "type": {
-                "text": "ShippingOption[]"
+                "text": "Stripe.PaymentRequestShippingOption[]"
               },
-              "description": "An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option.",
+              "description": "An array of PaymentRequestShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option.",
               "fieldName": "shippingOptions"
@@ -1344,3 +1271,3 @@ },
               "type": {
-                "text": "PaymentRequestButtonStyleOptions['type']"
+                "text": "StripePaymentRequestButtonType"
               },
@@ -1353,3 +1280,3 @@ "default": "'default'",
               "type": {
-                "text": "PaymentRequestButtonStyleOptions['theme']"
+                "text": "StripePaymentRequestButtonTheme"
               },
@@ -1356,0 +1283,0 @@ "default": "'dark'",

index.js

@@ -1,12 +0,1084 @@
-export { StripeElements } from './stripe-elements.js';
-export { StripePaymentRequest } from './stripe-payment-request.js';
-import 'lit/decorators.js';
-import './shared.js';
-import 'lit';
-import 'lit/directive.js';
-import 'lit/directives/if-defined.js';
-import '@typed/curry';
-import '@lavadrop/kebab-case';
-import '@lavadrop/camel-case';
-import '@pacote/memoize';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+
+// src/stripe-elements.ts
+import { property as property2, customElement } from "lit/decorators.js";
+import { bound as bound2 } from "./lib/bound.js";
+
+// src/StripeBase.ts
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { bound } from "./lib/bound.js";
+import { dash } from "./lib/strings.js";
+import { isRepresentation } from "./lib/predicates.js";
+import { throwBadResponse } from "./lib/fetch.js";
+
+// src/breadcrumb-controller.ts
+function getRandom() {
+  return (Date.now() + Math.random() * 1e3).toString(36).substr(0, 8);
+}
+var BreadcrumbController = class {
+  constructor(host, options) {
+    this.host = host;
+    this.options = options;
+    this.initialized = false;
+    this.shadowHosts = [];
+    this.host.addController(this);
+    this.resetMountId();
+    this.slotName = this.options?.slotName ?? `breadcrumb-${getRandom()}`;
+  }
+  get mount() {
+    return document.getElementById(this.mountId);
+  }
+  hostUpdated() {
+    if (!this.initialized && this.options.autoInitialize !== false)
+      this.init();
+  }
+  hostDisconnected() {
+    this.destroyMountPoints();
+  }
+  resetMountId() {
+    const prefix = this.options.mountPrefix ?? this.host.localName;
+    this.mountId = `${prefix}-mount-point-${getRandom()}`;
+  }
+  createMountPoint() {
+    const node = document.createElement("div");
+    node.id = this.mountId;
+    node.classList.add(`${this.host.tagName.toLowerCase()}-mount`);
+    return node;
+  }
+  createSlot(slotName) {
+    const node = document.createElement("slot");
+    node.slot = slotName;
+    node.name = slotName;
+    return node;
+  }
+  appendTemplate(target, node = this.createMountPoint()) {
+    target.appendChild(node);
+    return node;
+  }
+  initMountPoints() {
+    this.initShadowMountPoints();
+  }
+  destroyMountPoints() {
+    for (const host of this.shadowHosts) {
+      for (const el of host.querySelectorAll(`[slot="${this.slotName}"][name="${this.slotName}"]`))
+        el.remove();
+    }
+    if (this.mount)
+      this.mount.remove();
+    this.resetMountId();
+  }
+  initShadowMountPoints() {
+    let host = this.host;
+    this.shadowHosts = [this.host];
+    while (host = host.getRootNode().host)
+      this.shadowHosts.push(host);
+    const { shadowHosts, slotName } = this;
+    const hosts = [...shadowHosts];
+    const root = hosts.pop();
+    if (!root.querySelector(`[slot="${slotName}"]`)) {
+      const div = document.createElement("div");
+      div.slot = slotName;
+      root.appendChild(div);
+    }
+    const container = root.querySelector(`[slot="${slotName}"]`);
+    this.appendTemplate(container);
+    hosts.forEach((host2) => this.appendTemplate(host2, this.createSlot(slotName)));
+  }
+  init() {
+    this.destroyMountPoints();
+    this.initMountPoints();
+    this.initialized = true;
+  }
+};
+
+// src/StripeBase.ts
+import { readonly } from "./lib/read-only.js";
+import { notify } from "./lib/notify.js";
+
+// node_modules/@stripe/stripe-js/dist/pure.esm.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function(obj2) {
+      return typeof obj2;
+    };
+  } else {
+    _typeof = function(obj2) {
+      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+    };
+  }
+  return _typeof(obj);
+}
+var V3_URL = "https://js.stripe.com/v3";
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i = 0; i < scripts.length; i++) {
+    var script = scripts[i];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "1.23.0",
+    startTime
+  });
+};
+var stripePromise = null;
+var loadScript = function loadScript2(params) {
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+  stripePromise = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      }
+      script.addEventListener("load", function() {
+        if (window.Stripe) {
+          resolve(window.Stripe);
+        } else {
+          reject(new Error("Stripe.js not available"));
+        }
+      });
+      script.addEventListener("error", function() {
+        reject(new Error("Failed to load Stripe.js"));
+      });
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise;
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var validateLoadParams = function validateLoadParams2(params) {
+  var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
+  if (params === null || _typeof(params) !== "object") {
+    throw new Error(errorMessage);
+  }
+  if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === "boolean") {
+    return params;
+  }
+  throw new Error(errorMessage);
+};
+var loadParams;
+var loadStripeCalled = false;
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadStripeCalled = true;
+  var startTime = Date.now();
+  return loadScript(loadParams).then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+loadStripe.setLoadParameters = function(params) {
+  if (loadStripeCalled) {
+    throw new Error("You cannot change load parameters after calling loadStripe");
+  }
+  loadParams = validateLoadParams(params);
+};
+
+// src/StripeBase.ts
+var StripeElementsError = class extends Error {
+  constructor(tag, message) {
+    super(`<${tag}>: ${message}`);
+    this.originalMessage = message;
+  }
+};
+function isStripeElementsError(error) {
+  return !!error && error instanceof StripeElementsError;
+}
+var errorConverter = {
+  toAttribute: (error) => !error ? null : isStripeElementsError(error) ? error.originalMessage : error.message || ""
+};
+var StripeBase = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.generate = "source";
+    this.showError = false;
+    this.paymentMethod = null;
+    this.source = null;
+    this.token = null;
+    this.element = null;
+    this.elements = null;
+    this.error = null;
+    this.focused = false;
+    this.ready = false;
+    this.stripe = null;
+    this.theme = "none";
+    this.precomputedStyle = getComputedStyle(this);
+    this.breadcrumb = new BreadcrumbController(this, {
+      slotName: `${this.constructor.is}-slot`
+    });
+  }
+  get stripeMountId() {
+    return this.breadcrumb.mountId;
+  }
+  get stripeMount() {
+    return this.breadcrumb.mount;
+  }
+  render() {
+    const { error, showError } = this;
+    const { slotName } = this.breadcrumb;
+    const errorMessage = isStripeElementsError(error) ? error.originalMessage : error?.message;
+    return html`
+      <div id="stripe" part="stripe">
+        <slot id="stripe-slot" name="${slotName}"></slot>
+      </div>
+
+      <output id="error"
+          for="stripe"
+          part="error"
+          ?hidden="${!showError}">
+        ${ifDefined(errorMessage)}
+      </output>
+    `;
+  }
+  updated(changed) {
+    super.updated?.(changed);
+    if (changed.has("error"))
+      this.errorChanged();
+    if (changed.has("publishableKey"))
+      this.init();
+    [...changed.keys()].forEach(this.representationChanged);
+  }
+  async disconnectedCallback() {
+    super.disconnectedCallback();
+    await this.unmount?.();
+  }
+  reset() {
+    this.element?.clear?.();
+    this.resetRepresentations();
+    readonly.set(this, { error: null });
+  }
+  blur() {
+    this.element?.blur();
+  }
+  focus() {
+    this.element?.focus();
+  }
+  createError(message) {
+    return new StripeElementsError(this.constructor.is, message);
+  }
+  errorChanged() {
+    this.resetRepresentations();
+    this.fireError(this.error);
+  }
+  fire(type, detail, opts) {
+    this.dispatchEvent(new CustomEvent(type, { detail, ...opts }));
+  }
+  fireError(error) {
+    this.dispatchEvent(new ErrorEvent("error", { error }));
+  }
+  getCSSCustomPropertyValue(propertyName) {
+    return this.precomputedStyle.getPropertyValue(propertyName);
+  }
+  async handleResponse(response) {
+    const { error = null, paymentMethod = null, source = null, token = null } = { ...response };
+    readonly.set(this, { error, paymentMethod, source, token });
+    await this.updateComplete;
+    if (error)
+      throw error;
+    else
+      return response;
+  }
+  initElement() {
+    "abstract";
+  }
+  async init() {
+    await this.unmount();
+    await this.initStripe();
+    await this.initElement();
+    this.initElementListeners();
+    this.breadcrumb.init();
+    this.mount();
+  }
+  initElementListeners() {
+    if (!this.element)
+      return;
+    this.element.on("ready", this.onReady);
+    this.element.on("focus", this.onFocus);
+    this.element.on("blur", this.onBlur);
+  }
+  async initStripe() {
+    const { publishableKey } = this;
+    if (!publishableKey)
+      readonly.set(this, { elements: null, element: null, stripe: null });
+    else {
+      try {
+        const stripe = window.Stripe ? window.Stripe(publishableKey) : await loadStripe(publishableKey);
+        const elements = stripe?.elements();
+        readonly.set(this, { elements, error: null, stripe });
+      } catch (e) {
+        console.warn(e);
+        const error = this.createError("Stripe.js must be loaded first.");
+        readonly.set(this, { elements: null, error, stripe: null });
+      } finally {
+        await this.updateComplete;
+      }
+    }
+  }
+  mount() {
+    if (!this.breadcrumb.mount)
+      throw this.createError("Stripe Mount missing");
+    this.element?.mount(this.breadcrumb.mount);
+  }
+  async unmount() {
+    this.element?.unmount?.();
+    readonly.set(this, { element: null });
+    await this.updateComplete;
+  }
+  async onBlur() {
+    readonly.set(this, { focused: false });
+    await this.updateComplete;
+  }
+  async onFocus() {
+    readonly.set(this, { focused: true });
+    await this.updateComplete;
+  }
+  async onReady(event) {
+    readonly.set(this, { ready: true });
+    await this.updateComplete;
+    this.fire("ready", event);
+  }
+  async postRepresentation() {
+    const onError = (error) => readonly.set(this, { error });
+    const onSuccess = (success) => this.fire("success", success);
+    const token = this.token || void 0;
+    const source = this.source || void 0;
+    const paymentMethod = this.paymentMethod || void 0;
+    const body = JSON.stringify({ token, source, paymentMethod });
+    const headers = { "Content-Type": "application/json" };
+    const method = "POST";
+    return fetch(this.action, { body, headers, method }).then(throwBadResponse).then(onSuccess).catch(onError);
+  }
+  representationChanged(name) {
+    if (!isRepresentation(name))
+      return;
+    const value = this[name];
+    if (!value)
+      return;
+    this.fire(`${dash(name)}`, value);
+    if (this.action)
+      this.postRepresentation();
+  }
+  resetRepresentations() {
+    readonly.set(this, {
+      paymentMethod: null,
+      token: null,
+      source: null
+    });
+  }
+};
+__decorateClass([
+  property({ type: String })
+], StripeBase.prototype, "action", 2);
+__decorateClass([
+  property({ type: String, attribute: "client-secret" })
+], StripeBase.prototype, "clientSecret", 2);
+__decorateClass([
+  property({ type: String })
+], StripeBase.prototype, "generate", 2);
+__decorateClass([
+  notify,
+  property({ type: String, attribute: "publishable-key", reflect: true })
+], StripeBase.prototype, "publishableKey", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-error", reflect: true })
+], StripeBase.prototype, "showError", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object, attribute: "payment-method" })
+], StripeBase.prototype, "paymentMethod", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object })
+], StripeBase.prototype, "source", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object })
+], StripeBase.prototype, "token", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "element", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "elements", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object, reflect: true, converter: errorConverter })
+], StripeBase.prototype, "error", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Boolean, reflect: true })
+], StripeBase.prototype, "focused", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Boolean, reflect: true })
+], StripeBase.prototype, "ready", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "stripe", 2);
+__decorateClass([
+  property()
+], StripeBase.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: "border-radius" })
+], StripeBase.prototype, "borderRadius", 2);
+__decorateClass([
+  property({ attribute: "color-background" })
+], StripeBase.prototype, "colorBackground", 2);
+__decorateClass([
+  property({ attribute: "color-danger" })
+], StripeBase.prototype, "colorDanger", 2);
+__decorateClass([
+  property({ attribute: "color-primary" })
+], StripeBase.prototype, "colorPrimary", 2);
+__decorateClass([
+  property({ attribute: "color-text" })
+], StripeBase.prototype, "colorText", 2);
+__decorateClass([
+  property({ attribute: "font-family" })
+], StripeBase.prototype, "fontFamily", 2);
+__decorateClass([
+  property({ attribute: "spacing-unit" })
+], StripeBase.prototype, "spacingUnit", 2);
+__decorateClass([
+  bound
+], StripeBase.prototype, "handleResponse", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onBlur", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onFocus", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onReady", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "representationChanged", 1);
+
+// src/stripe-elements.ts
+import { dash as dash2 } from "./lib/strings.js";
+import { stripeMethod } from "./lib/stripe-method-decorator.js";
+import { readonly as readonly2 } from "./lib/read-only.js";
+import { notify as notify2 } from "./lib/notify.js";
+
+// src/shared.css
+import { css } from "lit";
+var styles = css`[hidden] {
+  display: none !important;
+}
+
+:host:not([hidden]) {
+  display: block;
+  box-sizing: border-box;
+}
+
+#error {
+  font-family: sans-serif;
+  font-size: 14px;
+  padding-left: 42px;
+  padding-bottom: 10px;
+}
+`;
+var shared_default = styles;
+
+// src/stripe-elements.css
+import { css as css2 } from "lit";
+var styles2 = css2`:host {
+  min-width: var(--stripe-elements-width, 300px);
+  min-height: var(--stripe-elements-height, 50px);
+}
+
+#stripe {
+  box-sizing: border-box;
+  border-radius: var(--stripe-elements-border-radius, 4px);
+  border: var(--stripe-elements-border, 1px solid transparent);
+  box-shadow: var(--stripe-elements-box-shadow, 0 1px 3px 0 #e6ebf1);
+  transition: var(--stripe-elements-transition, box-shadow 150ms ease);
+  min-width: var(--stripe-elements-width, 300px);
+  padding: var(--stripe-elements-element-padding, 8px 12px);
+  background: var(--stripe-elements-element-background, white);
+}
+
+:host([focused]) #stripe {
+  box-shadow: 0 1px 3px 0 #cfd7df;
+}
+
+:host([error]) #stripe {
+  border-color: #fa755a;
+}
+`;
+var stripe_elements_default = styles2;
+
+// src/stripe-elements.ts
+var ALLOWED_STYLES = [
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontSmoothing",
+  "fontVariant",
+  "iconColor",
+  "lineHeight",
+  "letterSpacing",
+  "textDecoration",
+  "textShadow",
+  "textTransform"
+];
+var SUB_STYLES = [
+  ":hover",
+  ":focus",
+  "::placeholder",
+  "::selection",
+  ":-webkit-autofill",
+  ":disabled"
+];
+var StripeElements = class extends StripeBase {
+  constructor() {
+    super(...arguments);
+    this.hideIcon = false;
+    this.hidePostalCode = false;
+    this.iconStyle = "default";
+    this.value = {};
+    this.brand = null;
+    this.complete = false;
+    this.empty = true;
+    this.invalid = false;
+  }
+  async createPaymentMethod(paymentMethodData = this.getPaymentMethodData()) {
+    return this.stripe.createPaymentMethod(paymentMethodData);
+  }
+  async createSource(sourceData = this.sourceData) {
+    return this.stripe.createSource(this.element, sourceData);
+  }
+  async createToken(tokenData = this.tokenData) {
+    return this.stripe.createToken(this.element, tokenData);
+  }
+  isPotentiallyValid() {
+    return !this.complete && !this.empty && !this.error || this.validate();
+  }
+  reset() {
+    super.reset();
+    this.element?.clear();
+  }
+  async submit() {
+    switch (this.generate) {
+      case "payment-method":
+        return this.createPaymentMethod();
+      case "source":
+        return this.createSource();
+      case "token":
+        return this.createToken();
+      default: {
+        const error = this.createError(`cannot generate ${this.generate}`);
+        readonly2.set(this, { error });
+        await this.updateComplete;
+        throw error;
+      }
+    }
+  }
+  validate() {
+    const { complete, empty, error } = this;
+    const isValid = !error && complete && !empty;
+    if (empty && !error)
+      readonly2.set(this, { error: this.createError("Your card number is empty.") });
+    return isValid;
+  }
+  updateStyle() {
+    this.element?.update({
+      style: this.getStripeElementsStyles()
+    });
+  }
+  getPaymentMethodData() {
+    const type = "card";
+    const { billingDetails, paymentMethodData } = this;
+    return {
+      billing_details: billingDetails,
+      ...paymentMethodData,
+      type,
+      card: this.element
+    };
+  }
+  getStripeElementsStyles() {
+    const getStyle = (prop) => this.getCSSCustomPropertyValue(prop) || void 0;
+    const STATES = ["base", "complete", "empty", "invalid"];
+    const subReducer = (state) => (acc, sub) => {
+      if (state.includes("-"))
+        return acc;
+      const subProp = sub.split(":").pop();
+      return {
+        ...acc,
+        [sub]: ALLOWED_STYLES.reduce(styleReducer(`${state}-${subProp}`), {})
+      };
+    };
+    const styleReducer = (state) => (init, p) => {
+      const prop = `--stripe-elements-${state}-${dash2(p)}`;
+      return {
+        ...init,
+        [p]: getStyle(prop),
+        ...SUB_STYLES.reduce(subReducer(state), {})
+      };
+    };
+    return STATES.reduce((acc, state) => ({
+      ...acc,
+      [state]: ALLOWED_STYLES.reduce(styleReducer(state), {})
+    }), {});
+  }
+  async initElement() {
+    if (!this.stripe)
+      return;
+    const { hidePostalCode, hideIcon, iconStyle, value } = this;
+    const style = this.getStripeElementsStyles();
+    await this.updateComplete;
+    const element = this.createElement({
+      hideIcon,
+      hidePostalCode,
+      iconStyle,
+      style,
+      value
+    });
+    element.on("change", this.onChange);
+    readonly2.set(this, { element });
+    await this.updateComplete;
+  }
+  createElement(options) {
+    const element = this.elements.create("card", options);
+    return element;
+  }
+  async onChange(event) {
+    const { brand, complete, empty, error = null } = event;
+    const invalid = !(error || !empty && !complete);
+    readonly2.set(this, { brand, complete, empty, error, invalid });
+    await this.updateComplete;
+    this.fire("change", event);
+  }
+};
+StripeElements.is = "stripe-elements";
+StripeElements.elementType = "card";
+StripeElements.styles = [
+  shared_default,
+  stripe_elements_default
+];
+__decorateClass([
+  property2({ type: Boolean, attribute: "hide-icon" })
+], StripeElements.prototype, "hideIcon", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "hide-postal-code" })
+], StripeElements.prototype, "hidePostalCode", 2);
+__decorateClass([
+  property2({ type: String, attribute: "icon-style" })
+], StripeElements.prototype, "iconStyle", 2);
+__decorateClass([
+  property2({ type: Object })
+], StripeElements.prototype, "value", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: String })
+], StripeElements.prototype, "brand", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, reflect: true })
+], StripeElements.prototype, "complete", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, reflect: true })
+], StripeElements.prototype, "empty", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, reflect: true })
+], StripeElements.prototype, "invalid", 2);
+__decorateClass([
+  stripeMethod
+], StripeElements.prototype, "createPaymentMethod", 1);
+__decorateClass([
+  stripeMethod
+], StripeElements.prototype, "createSource", 1);
+__decorateClass([
+  stripeMethod
+], StripeElements.prototype, "createToken", 1);
+__decorateClass([
+  bound2
+], StripeElements.prototype, "onChange", 1);
+StripeElements = __decorateClass([
+  customElement("stripe-elements")
+], StripeElements);
+
+// src/stripe-payment-request.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { bound as bound3 } from "./lib/bound.js";
+import { throwResponseError } from "./lib/stripe.js";
+
+// src/stripe-payment-request.css
+import { css as css3 } from "lit";
+var styles3 = css3`#stripe {
+  box-sizing: border-box;
+  min-width: var(--stripe-payment-request-element-min-width, 300px);
+  padding: var(--stripe-payment-request-element-padding, 8px 12px);
+  background: var(--stripe-payment-request-element-background, white);
+}
+`;
+var stripe_payment_request_default = styles3;
+
+// src/stripe-payment-request.ts
+import { readonly as readonly3 } from "./lib/read-only.js";
+import { notify as notify3 } from "./lib/notify.js";
+function isStripeDisplayItem(el) {
+  return el.tagName.toLowerCase() === "stripe-display-item";
+}
+function datasetToStripeDisplayItem({ dataset: { amount, label, pending } }) {
+  return {
+    label,
+    amount: parseInt(amount),
+    ...pending !== void 0 && { pending: pending === "true" ? true : false }
+  };
+}
+function datasetToStripeShippingOption({ dataset: { amount, detail, ...rest } }) {
+  return {
+    amount: parseInt(amount),
+    detail,
+    ...rest
+  };
+}
+function mapDataset(el) {
+  return isStripeDisplayItem(el) ? datasetToStripeDisplayItem(el) : datasetToStripeShippingOption(el);
+}
+var _displayItems, _shippingOptions;
+var StripePaymentRequest = class extends StripeBase {
+  constructor() {
+    super(...arguments);
+    this.canMakePayment = null;
+    __privateAdd(this, _displayItems, void 0);
+    this.paymentIntent = null;
+    this.paymentRequest = null;
+    this.pending = false;
+    __privateAdd(this, _shippingOptions, void 0);
+    this.buttonType = "default";
+    this.buttonTheme = "dark";
+    this.complete = async (paymentResponse, confirmationError) => {
+      const { error: paymentResponseError = null } = { ...paymentResponse };
+      const status = paymentResponseError || confirmationError ? "fail" /* fail */ : "success" /* success */;
+      paymentResponse.complete(status);
+      this.fire(status, paymentResponse);
+      return confirmationError ? { error: confirmationError } : paymentResponse;
+    };
+  }
+  get displayItems() {
+    const value = __privateGet(this, _displayItems);
+    return Array.isArray(value) ? value : this.parseDatasets("stripe-display-item");
+  }
+  set displayItems(value) {
+    const oldValue = this.displayItems;
+    __privateSet(this, _displayItems, value);
+    this.requestUpdate("displayItems", oldValue);
+  }
+  get shippingOptions() {
+    const value = __privateGet(this, _shippingOptions);
+    return Array.isArray(value) ? value : this.parseDatasets("stripe-shipping-option");
+  }
+  set shippingOptions(value) {
+    const oldValue = this.shippingOptions;
+    __privateSet(this, _shippingOptions, value);
+    this.requestUpdate("shippingOptions", oldValue);
+  }
+  reset() {
+    super.reset();
+    readonly3.set(this, { paymentIntent: null });
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("generate"))
+      this.initPaymentRequestListeners();
+    if (changed.has("amount"))
+      this.updatePaymentRequest();
+  }
+  getStripePaymentRequestOptions() {
+    const {
+      country,
+      currency,
+      displayItems,
+      shippingOptions,
+      requestShipping,
+      requestPayerEmail,
+      requestPayerName,
+      requestPayerPhone,
+      label = "",
+      amount = 0
+    } = this;
+    const total = { label, amount };
+    return {
+      country,
+      currency,
+      displayItems,
+      requestPayerEmail,
+      requestPayerName,
+      requestPayerPhone,
+      requestShipping,
+      shippingOptions,
+      total
+    };
+  }
+  async initElement() {
+    await this.initPaymentRequest();
+    await this.initPaymentRequestListeners();
+    await this.initPaymentRequestButton();
+  }
+  async initPaymentRequest() {
+    if (!this.stripe)
+      return;
+    const stripePaymentRequestOptions = this.getStripePaymentRequestOptions();
+    const paymentRequest = this.stripe.paymentRequest(stripePaymentRequestOptions);
+    const canMakePayment = await paymentRequest.canMakePayment();
+    readonly3.set(this, { paymentRequest, canMakePayment });
+    await this.updateComplete;
+    if (!this.canMakePayment)
+      this.fire("unsupported");
+  }
+  async initPaymentRequestButton() {
+    const { buttonTheme: theme, buttonType: type, canMakePayment, paymentRequest } = this;
+    if (!canMakePayment || !this.elements)
+      return;
+    const propertyName = "--stripe-payment-request-button-height";
+    const height = this.getCSSCustomPropertyValue(propertyName) || "40px";
+    const style = { paymentRequestButton: { height, theme, type } };
+    const element = this.elements.create("paymentRequestButton", { paymentRequest, style });
+    readonly3.set(this, { element });
+    await this.updateComplete;
+  }
+  async initPaymentRequestListeners() {
+    if (!this.canMakePayment)
+      return;
+    this.paymentRequest.on("click", this.updatePaymentRequest);
+    this.paymentRequest.on("cancel", this.onCancel);
+    this.paymentRequest.on("shippingaddresschange", this.onShippingaddresschange);
+    this.paymentRequest.on("shippingoptionchange", this.onShippingoptionchange);
+    switch (this.generate) {
+      case "payment-method":
+        this.paymentRequest.on("paymentmethod", this.onPaymentResponse);
+        break;
+      case "source":
+        this.paymentRequest.on("source", this.onPaymentResponse);
+        break;
+      case "token":
+        this.paymentRequest.on("token", this.onPaymentResponse);
+        break;
+    }
+  }
+  async updatePaymentRequest() {
+    if (!this.paymentRequest)
+      return;
+    const { currency, total, displayItems, shippingOptions } = this.getStripePaymentRequestOptions();
+    this.paymentRequest.update({ currency, total, displayItems, shippingOptions });
+  }
+  onCancel() {
+    this.fire("cancel" /* cancel */);
+  }
+  async onPaymentResponse(event) {
+    const {
+      error = null,
+      paymentMethod = null,
+      source = null,
+      token = null
+    } = { ...event };
+    readonly3.set(this, { error, paymentMethod, source, token });
+    const isPaymentIntent = this.clientSecret && !error;
+    if (isPaymentIntent)
+      this.confirmPaymentIntent(event);
+    else
+      this.complete(event);
+  }
+  async confirmPaymentIntent(paymentResponse) {
+    const confirmCardData = { payment_method: this.paymentMethod.id };
+    const { error = null, paymentIntent = null } = await this.confirmCardPayment(confirmCardData, { handleActions: false }).then(({ error: confirmationError }) => this.complete(paymentResponse, confirmationError)).then(throwResponseError).then(() => this.confirmCardPayment()).then(throwResponseError).catch((error2) => ({ error: error2 }));
+    readonly3.set(this, { error, paymentIntent });
+    await this.updateComplete;
+  }
+  async confirmCardPayment(data, options) {
+    return this.stripe.confirmCardPayment(this.clientSecret, data, options);
+  }
+  onShippingaddresschange(originalEvent) {
+    this.fire("shippingaddresschange", originalEvent);
+  }
+  onShippingoptionchange(originalEvent) {
+    this.fire("shippingoptionchange", originalEvent);
+  }
+  parseDatasets(selector) {
+    const elements = [...this.querySelectorAll(selector)];
+    return !elements.length ? [] : elements.map(mapDataset);
+  }
+};
+_displayItems = new WeakMap();
+_shippingOptions = new WeakMap();
+StripePaymentRequest.is = "stripe-payment-request";
+StripePaymentRequest.styles = [
+  shared_default,
+  stripe_payment_request_default
+];
+__decorateClass([
+  property3({ type: Number, reflect: true })
+], StripePaymentRequest.prototype, "amount", 2);
+__decorateClass([
+  notify3,
+  readonly3,
+  property3({ type: Boolean, attribute: "can-make-payment", reflect: true })
+], StripePaymentRequest.prototype, "canMakePayment", 2);
+__decorateClass([
+  property3({ type: String })
+], StripePaymentRequest.prototype, "country", 2);
+__decorateClass([
+  property3({ type: String })
+], StripePaymentRequest.prototype, "currency", 2);
+__decorateClass([
+  property3({ type: Array })
+], StripePaymentRequest.prototype, "displayItems", 1);
+__decorateClass([
+  property3({ type: String, reflect: true })
+], StripePaymentRequest.prototype, "label", 2);
+__decorateClass([
+  notify3,
+  readonly3,
+  property3({ type: Object, attribute: "payment-intent" })
+], StripePaymentRequest.prototype, "paymentIntent", 2);
+__decorateClass([
+  readonly3,
+  property3({ type: Object, attribute: "payment-request" })
+], StripePaymentRequest.prototype, "paymentRequest", 2);
+__decorateClass([
+  property3({ type: Boolean, reflect: true })
+], StripePaymentRequest.prototype, "pending", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "request-payer-email" })
+], StripePaymentRequest.prototype, "requestPayerEmail", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "request-payer-name" })
+], StripePaymentRequest.prototype, "requestPayerName", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "request-payer-phone" })
+], StripePaymentRequest.prototype, "requestPayerPhone", 2);
+__decorateClass([
+  property3({ type: Boolean, attribute: "request-shipping" })
+], StripePaymentRequest.prototype, "requestShipping", 2);
+__decorateClass([
+  property3({ type: Array })
+], StripePaymentRequest.prototype, "shippingOptions", 1);
+__decorateClass([
+  property3({ type: String, attribute: "button-type" })
+], StripePaymentRequest.prototype, "buttonType", 2);
+__decorateClass([
+  property3({ type: String, attribute: "button-theme" })
+], StripePaymentRequest.prototype, "buttonTheme", 2);
+__decorateClass([
+  bound3
+], StripePaymentRequest.prototype, "onCancel", 1);
+__decorateClass([
+  bound3
+], StripePaymentRequest.prototype, "onPaymentResponse", 1);
+__decorateClass([
+  bound3
+], StripePaymentRequest.prototype, "confirmPaymentIntent", 1);
+__decorateClass([
+  bound3
+], StripePaymentRequest.prototype, "confirmCardPayment", 1);
+__decorateClass([
+  bound3
+], StripePaymentRequest.prototype, "onShippingaddresschange", 1);
+__decorateClass([
+  bound3
+], StripePaymentRequest.prototype, "onShippingoptionchange", 1);
+StripePaymentRequest = __decorateClass([
+  customElement2("stripe-payment-request")
+], StripePaymentRequest);
+export {
+  StripeElements,
+  StripePaymentRequest
+};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@power-elements/stripe-elements",
-  "version": "2.3.12",
+  "version": "3.0.0-next.3",
   "description": "Web Component wrapper for stripe elements",
@@ -29,6 +29,8 @@ "type": "module",
     "prepare": "npm run build",
-    "build": "run-s build:**",
-    "build:compile": "tsc",
-    "build:rollup": "rollup -c",
-    "build:analyze": "cem analyze --litelement",
+    "build": "run-p build:**",
+    "build:types": "tsc --emitDeclarationOnly",
+    "build:esbuild": "node scripts/build.js",
+    "build:analyze": "cem analyze",
+    "docs": "eleventy --config=.eleventy.cjs",
+    "start": "eleventy --config=.eleventy.cjs --watch --serve",
     "clean": "run-s clean:*",
@@ -40,6 +42,2 @@ "clean:src": "rimraf '{src,test,lib}/**/!(global).{js,js.map,d.ts}'",
     "test:watch": "wtr --watch",
-    "site:build": "npm run storybook:build",
-    "storybook": "run-s build storybook:start",
-    "storybook:build": "build-storybook",
-    "storybook:start": "web-dev-server",
     "update": "npm-check -u",
@@ -80,68 +78,54 @@ "watch": "run-p watch:*",
   "devDependencies": {
-    "@babel/core": "^7.15.5",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.15.4",
-    "@babel/plugin-proposal-dynamic-import": "^7.14.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
-    "@babel/plugin-proposal-private-methods": "^7.14.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.0",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/preset-env": "^7.15.6",
-    "@custom-elements-manifest/analyzer": "^0.5.5",
-    "@material/mwc-button": "^0.25.1",
-    "@material/mwc-dialog": "^0.25.1",
-    "@material/mwc-textfield": "^0.25.1",
-    "@open-wc/lit-helpers": "^0.3.12",
-    "@open-wc/testing": "^2.5.33",
+    "@11ty/eleventy": "^1.0.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@custom-elements-manifest/analyzer": "^0.5.7",
+    "@lit-labs/ssr": "^2.0.2",
+    "@material/mwc-button": "^0.25.3",
+    "@material/mwc-dialog": "^0.25.3",
+    "@material/mwc-textfield": "^0.25.3",
+    "@open-wc/testing": "^3.0.4",
     "@open-wc/testing-karma": "^4.0.9",
+    "@orchidjs/eleventy-plugin-ids": "^0.1.1",
     "@power-elements/codesandbox-button": "^0.1.0",
     "@power-elements/json-viewer": "^2.1.1",
-    "@pwrs/eslint-config": "^0.0.22",
-    "@rollup/plugin-commonjs": "^21.0.0",
+    "@pwrs/eslint-config": "^0.0.25",
+    "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@rollup/plugin-typescript": "^8.2.5",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@types/credit-card-type": "^9.0.0",
-    "@types/karma": "^6.3.1",
-    "@types/sinon": "^10.0.4",
-    "@web/dev-server-esbuild": "^0.2.14",
-    "@web/dev-server-storybook": "^0.3.8",
-    "@web/storybook-prebuilt": "^0.1.26-alpha.1",
-    "@web/test-runner": "^0.13.18",
-    "babel-eslint": "^10.1.0",
-    "babel-plugin-const-enum": "^1.1.0",
-    "cem-plugin-module-file-extensions": "^0.0.1",
+    "@types/express": "^4.17.13",
+    "@types/express-serve-static-core": "^4.17.28",
+    "@types/sinon": "^10.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@web/dev-server-esbuild": "^0.2.16",
+    "@web/test-runner": "^0.13.27",
+    "cem-plugin-module-file-extensions": "^0.0.2",
     "cem-plugin-readme": "^0.1.4",
-    "chai-things": "^0.2.0",
     "credit-card-type": "^9.1.0",
-    "crocks": "^0.12.4",
-    "deepmerge": "^4.2.2",
-    "eslint": "^7.32.0",
-    "husky": "^7.0.2",
+    "eleventy-plugin-toc": "^1.1.5",
+    "esbuild": "^0.14.21",
+    "esbuild-plugin-lit-css": "^1.2.3",
+    "eslint": "^8.9.0",
+    "execa": "^6.1.0",
+    "husky": "^7.0.4",
     "luhn-js": "^1.1.2",
+    "markdown-it-anchor": "^8.4.1",
     "npm-check": "^5.9.2",
     "npm-run-all": "^4.1.5",
-    "query-selector-shadow-dom": "^1.0.0",
-    "rollup": "^2.58.0",
-    "rollup-plugin-babel": "^4.4.0",
+    "rollup": "^2.67.2",
     "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-lit-css": "^3.0.2",
-    "sinon": "^11.1.2",
-    "sinon-chai": "^3.7.0",
-    "stylelint-config-standard": "^22.0.0",
-    "systemjs": "^6.10.3",
-    "typescript": "^4.4.3",
-    "typescript-lit-html-plugin": "^0.9.0",
-    "web-component-analyzer": "^1.1.6"
+    "rollup-plugin-lit-css": "^3.2.1",
+    "sinon": "^13.0.1",
+    "stylelint": "^14.5.0",
+    "stylelint-config-standard": "^25.0.0",
+    "typescript": "^4.5.5",
+    "typescript-lit-html-plugin": "^0.9.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
     "@lavadrop/camel-case": "^0.4.0",
     "@lavadrop/kebab-case": "^3.0.0",
-    "@lavadrop/pick": "^0.8.0",
-    "@morbidick/lit-element-notify": "1.1.1",
     "@pacote/memoize": "^1.1.6",
-    "@typed/curry": "^1.0.1",
-    "@types/stripe-v3": "^3.1.26",
-    "lit": "^2.0.0-rc.3",
+    "@stripe/stripe-js": "^1.23.0",
+    "lit": "^2.1.3",
     "patch-package": "^6.4.7",
@@ -148,0 +132,0 @@ "tslib": "^2.3.1"

README.md

@@ -1,291 +0,34 @@
-## `./stripe-elements.js`:
+# Stripe Elements Web Components
 
-### class: `StripeElements`, `stripe-elements`
+🛡⚛️🔰 **Any** Framework - **One** Stripe Integration. 💰💵💸
 
-#### Superclass
+[![Published on npm](https://img.shields.io/npm/v/@power-elements/stripe-elements.svg)](https://www.npmjs.com/package/@power-elements/stripe-elements)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bennypowers/stripe-elements)
+[![made with open-wc](https://img.shields.io/badge/made%20with-open--wc-%23217ff9)](https://open-wc.org)
+[![Maintainability](https://api.codeclimate.com/v1/badges/b2205a301b0a8bb82d51/maintainability)](https://codeclimate.com/github/bennypowers/stripe-elements/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/b2205a301b0a8bb82d51/test_coverage)](https://codeclimate.com/github/bennypowers/stripe-elements/test_coverage)
+[![Release](https://github.com/bennypowers/stripe-elements/workflows/Release/badge.svg)](https://github.com/bennypowers/stripe-elements/actions?query=workflow%3ARelease)
+[![Contact me on Codementor](https://cdn.codementor.io/badges/contact_me_github.svg)](https://www.codementor.io/bennyp?utm_source=github&utm_medium=button&utm_term=bennyp&utm_campaign=github)
 
-| Name         | Module             | Package |
-| ------------ | ------------------ | ------- |
-| `StripeBase` | /src/StripeBase.js |         |
+👨‍🎨 [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--enter-a-stripe-publishable-key) 👀
 
-#### Static Fields
+## 🚚 Installation
 
-| Name          | Privacy | Type     | Default             | Description | Inherited From |
-| ------------- | ------- | -------- | ------------------- | ----------- | -------------- |
-| `is`          |         | `string` | `'stripe-elements'` |             |                |
-| `elementType` |         | `string` | `'card'`            |             |                |
+You should make sure to load stripe.js on your app's index.html, as per Stripe's recommendation, before loading `<stripe-elements>`. If `window.Stripe` is not available when you load up the component, it will fail with a reasonably-polite console warning.
 
-#### Fields
+```html
+<script src="https://js.stripe.com/v3/"></script>
+```
 
-| Name             | Privacy | Type                                           | Default     | Description                                                                                                         | Inherited From |
-| ---------------- | ------- | ---------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `hideIcon`       |         | `boolean`                                      | `false`     | Whether to hide icons in the Stripe form.                                                                           |                |
-| `hidePostalCode` |         | `boolean`                                      | `false`     | Whether or not to hide the postal code field.&#xA;Useful when you gather shipping info elsewhere.                   |                |
-| `iconStyle`      |         | `stripe.elements.ElementsOptions['iconStyle']` | `'default'` | Stripe icon style.                                                                                                  |                |
-| `value`          |         | `stripe.elements.ElementsOptions['value']`     | `{}`        | Prefilled values for form.                                                                                          |                |
-| `brand`          |         | `stripe.brandType`                             | `null`      | The card brand detected by Stripe                                                                                   |                |
-| `complete`       |         | `boolean`                                      | `false`     | Whether the form is complete.                                                                                       |                |
-| `empty`          |         | `boolean`                                      | `true`      | If the form is empty.                                                                                               |                |
-| `invalid`        |         | `boolean`                                      | `false`     | Whether the form is invalid.                                                                                        |                |
-| `card`           |         | `stripe.elements.Element`                      | `null`      | The Stripe card object.&#xA;\*\*DEPRECATED\*\*. Will be removed in a future version. use \`element\` instead        |                |
-| `isEmpty`        |         | `boolean`                                      | `true`      | Whether the form is empty.&#xA;\*\*DEPRECATED\*\*. Will be removed in a future version. use \`empty\` instead       |                |
-| `isComplete`     |         | `boolean`                                      | `false`     | Whether the form is complete.&#xA;\*\*DEPRECATED\*\*. Will be removed in a future version. use \`complete\` instead |                |
+```bash
+npm i -S @power-elements/stripe-elements
+```
 
-#### Methods
+---
 
-| Name                  | Privacy | Description                                                                                                                                                         | Parameters                                    | Return                                  | Inherited From |
-| --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | --------------------------------------- | -------------- |
-| `createPaymentMethod` | public  | Submit payment information to generate a paymentMethod                                                                                                              | `paymentMethodData: stripe.PaymentMethodData` | `Promise<stripe.PaymentMethodResponse>` |                |
-| `createSource`        | public  | Submit payment information to generate a source                                                                                                                     | `sourceData: stripe.SourceOptions`            | `Promise<stripe.SourceResponse>`        |                |
-| `createToken`         | public  | Submit payment information to generate a token                                                                                                                      | `tokenData: stripe.TokenOptions`              | `Promise<stripe.TokenResponse>`         |                |
-| `isPotentiallyValid`  | public  | Checks for potential validity. A potentially valid form is one that is not empty, not complete and has no error. A validated form also counts as potentially valid. |                                               | `boolean`                               |                |
-| `reset`               | public  | Resets the Stripe card.                                                                                                                                             |                                               | `void`                                  |                |
-| `submit`              | public  | Generates a payment representation of the type specified by \`generate\`.                                                                                           |                                               | `Promise<StripePaymentResponse>`        |                |
-| `validate`            | public  | Checks if the Stripe form is valid.                                                                                                                                 |                                               | `boolean`                               |                |
+`<stripe-elements>` is a community project.
 
-#### Events
+---
 
-| Name       | Type | Description                 | Inherited From |
-| ---------- | ---- | --------------------------- | -------------- |
-| `'change'` |      | Stripe Element change event |                |
-
-#### Attributes
-
-| Name               | Field          | Inherited From |
-| ------------------ | -------------- | -------------- |
-| `hide-icon`        | hideIcon       |                |
-| `hide-postal-code` | hidePostalCode |                |
-| `icon-style`       | iconStyle      |                |
-| `value`            | value          |                |
-| `brand`            | brand          |                |
-| `complete`         | complete       |                |
-| `empty`            | empty          |                |
-| `invalid`          | invalid        |                |
-| `card`             | card           |                |
-| `is-empty`         | isEmpty        |                |
-| `is-complete`      | isComplete     |                |
-
-#### CSS Properties
-
-| Name                                         | Default                       | Description                                                        |
-| -------------------------------------------- | ----------------------------- | ------------------------------------------------------------------ |
-| `--stripe-elements-border-radius`            | `` `4px` ``                   | border radius of the element container                             |
-| `--stripe-elements-border`                   | `` `1px solid transparent` `` | border property of the element container                           |
-| `--stripe-elements-box-shadow`               | `` `0 1px 3px 0 #e6ebf1` ``   | box shadow for the element container                               |
-| `--stripe-elements-transition`               | `` `box-shadow 150ms ease` `` | transition property for the element container                      |
-| `--stripe-elements-base-color`               |                               | \`color\` property for the element in its base state               |
-| `--stripe-elements-base-font-family`         |                               | \`font-family\` property for the element in its base state         |
-| `--stripe-elements-base-font-size`           |                               | \`font-size\` property for the element in its base state           |
-| `--stripe-elements-base-font-smoothing`      |                               | \`font-smoothing\` property for the element in its base state      |
-| `--stripe-elements-base-font-variant`        |                               | \`font-variant\` property for the element in its base state        |
-| `--stripe-elements-base-icon-color`          |                               | \`icon-color\` property for the element in its base state          |
-| `--stripe-elements-base-line-height`         |                               | \`line-height\` property for the element in its base state         |
-| `--stripe-elements-base-letter-spacing`      |                               | \`letter-spacing\` property for the element in its base state      |
-| `--stripe-elements-base-text-decoration`     |                               | \`text-decoration\` property for the element in its base state     |
-| `--stripe-elements-base-text-shadow`         |                               | \`text-shadow\` property for the element in its base state         |
-| `--stripe-elements-base-text-transform`      |                               | \`text-transform\` property for the element in its base state      |
-| `--stripe-elements-complete-color`           |                               | \`color\` property for the element in its complete state           |
-| `--stripe-elements-complete-font-family`     |                               | \`font-family\` property for the element in its complete state     |
-| `--stripe-elements-complete-font-size`       |                               | \`font-size\` property for the element in its complete state       |
-| `--stripe-elements-complete-font-smoothing`  |                               | \`font-smoothing\` property for the element in its complete state  |
-| `--stripe-elements-complete-font-variant`    |                               | \`font-variant\` property for the element in its complete state    |
-| `--stripe-elements-complete-icon-color`      |                               | \`icon-color\` property for the element in its complete state      |
-| `--stripe-elements-complete-line-height`     |                               | \`line-height\` property for the element in its complete state     |
-| `--stripe-elements-complete-letter-spacing`  |                               | \`letter-spacing\` property for the element in its complete state  |
-| `--stripe-elements-complete-text-decoration` |                               | \`text-decoration\` property for the element in its complete state |
-| `--stripe-elements-complete-text-shadow`     |                               | \`text-shadow\` property for the element in its complete state     |
-| `--stripe-elements-complete-text-transform`  |                               | \`text-transform\` property for the element in its complete state  |
-| `--stripe-elements-empty-color`              |                               | \`color\` property for the element in its empty state              |
-| `--stripe-elements-empty-font-family`        |                               | \`font-family\` property for the element in its empty state        |
-| `--stripe-elements-empty-font-size`          |                               | \`font-size\` property for the element in its empty state          |
-| `--stripe-elements-empty-font-smoothing`     |                               | \`font-smoothing\` property for the element in its empty state     |
-| `--stripe-elements-empty-font-variant`       |                               | \`font-variant\` property for the element in its empty state       |
-| `--stripe-elements-empty-icon-color`         |                               | \`icon-color\` property for the element in its empty state         |
-| `--stripe-elements-empty-line-height`        |                               | \`line-height\` property for the element in its empty state        |
-| `--stripe-elements-empty-letter-spacing`     |                               | \`letter-spacing\` property for the element in its empty state     |
-| `--stripe-elements-empty-text-decoration`    |                               | \`text-decoration\` property for the element in its empty state    |
-| `--stripe-elements-empty-text-shadow`        |                               | \`text-shadow\` property for the element in its empty state        |
-| `--stripe-elements-empty-text-transform`     |                               | \`text-transform\` property for the element in its empty state     |
-| `--stripe-elements-invalid-color`            |                               | \`color\` property for the element in its invalid state            |
-| `--stripe-elements-invalid-font-family`      |                               | \`font-family\` property for the element in its invalid state      |
-| `--stripe-elements-invalid-font-size`        |                               | \`font-size\` property for the element in its invalid state        |
-| `--stripe-elements-invalid-font-smoothing`   |                               | \`font-smoothing\` property for the element in its invalid state   |
-| `--stripe-elements-invalid-font-variant`     |                               | \`font-variant\` property for the element in its invalid state     |
-| `--stripe-elements-invalid-icon-color`       |                               | \`icon-color\` property for the element in its invalid state       |
-| `--stripe-elements-invalid-line-height`      |                               | \`line-height\` property for the element in its invalid state      |
-| `--stripe-elements-invalid-letter-spacing`   |                               | \`letter-spacing\` property for the element in its invalid state   |
-| `--stripe-elements-invalid-text-decoration`  |                               | \`text-decoration\` property for the element in its invalid state  |
-| `--stripe-elements-invalid-text-shadow`      |                               | \`text-shadow\` property for the element in its invalid state      |
-| `--stripe-elements-invalid-text-transform`   |                               | \`text-transform\` property for the element in its invalid state   |
-
-<details><summary>Private API</summary>
-
-#### Fields
-
-| Name       | Privacy   | Type       | Default | Description | Inherited From |
-| ---------- | --------- | ---------- | ------- | ----------- | -------------- |
-| `slotName` | protected | `SlotName` |         |             |                |
-
-#### Methods
-
-| Name                      | Privacy   | Description                                                                | Parameters                                     | Return                     | Inherited From |
-| ------------------------- | --------- | -------------------------------------------------------------------------- | ---------------------------------------------- | -------------------------- | -------------- |
-| `getPaymentMethodData`    | private   | Generates PaymentMethodData from the element.                              |                                                | `stripe.PaymentMethodData` |                |
-| `getStripeElementsStyles` | private   | Returns a Stripe-friendly style object computed from CSS custom properties |                                                | `StripeStyleInit`          |                |
-| `initElement`             | protected |                                                                            |                                                | `Promise<void>`            |                |
-| `onChange`                | private   | Updates the element's state.                                               | `event: stripe.elements.ElementChangeResponse` | `Promise<void>`            |                |
-
-</details>
-
-<hr/>
-
-### Exports
-
-| Kind                        | Name              | Declaration    | Module               | Package |
-| --------------------------- | ----------------- | -------------- | -------------------- | ------- |
-| `js`                        | `StripeElements`  | StripeElements | ./stripe-elements.js |         |
-| `custom-element-definition` | `stripe-elements` | StripeElements | ./stripe-elements.js |         |
-
-## `./stripe-payment-request.js`:
-
-### class: `StripePaymentRequest`, `stripe-payment-request`
-
-#### Superclass
-
-| Name         | Module             | Package |
-| ------------ | ------------------ | ------- |
-| `StripeBase` | /src/StripeBase.js |         |
-
-#### Static Fields
-
-| Name | Privacy | Type     | Default                    | Description | Inherited From |
-| ---- | ------- | -------- | -------------------------- | ----------- | -------------- |
-| `is` |         | `string` | `'stripe-payment-request'` |             |                |
-
-#### Fields
-
-| Name                | Privacy | Type                                         | Default     | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Inherited From |
-| ------------------- | ------- | -------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
-| `amount`            |         | `number`                                     |             | The amount in the currency's subunit (e.g. cents, yen, etc.)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                |
-| `canMakePayment`    |         | `CanMakePaymentType`                         | `null`      | Whether or not the device can make the payment request.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |                |
-| `country`           |         | `CountryCode`                                |             | The two-letter country code of your Stripe account                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |                |
-| `currency`          |         | `StripePaymentRequestOptions['currency']`    |             | Three character currency code                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |                |
-| `displayItems`      |         | `DisplayItem[]`                              |             | An array of DisplayItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above.                                                                                                                                                                                                                                                                                                                                                                             |                |
-| `label`             |         | `string`                                     |             | A name that the browser shows the customer in the payment interface.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                |
-| `paymentIntent`     |         | `PaymentIntent`                              | `null`      | Stripe PaymentIntent                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                |
-| `paymentRequest`    |         | `stripe.paymentRequest.StripePaymentRequest` | `null`      | Stripe PaymentRequest                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |                |
-| `pending`           |         | `boolean`                                    | `false`     | If you might change the payment amount later (for example, after you have calcluated shipping costs), set this to true. Note that browsers treat this as a hint for how to display things, and not necessarily as something that will prevent submission.                                                                                                                                                                                                                                                                                                                            |                |
-| `requestPayerEmail` |         | `boolean`                                    |             | See the requestPayerName option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                |
-| `requestPayerName`  |         | `boolean`                                    |             | By default, the browser‘s payment interface only asks the customer for actual payment information. A customer name can be collected by setting this option to true. This collected name will appears in the PaymentResponse object.&#xA;&#xA;We highly recommend you collect at least one of name, email, or phone as this also results in collection of billing address for Apple Pay. The billing address can be used to perform address verification and block fraudulent payments. For all other payment methods, the billing address is automatically collected when available. |                |
-| `requestPayerPhone` |         | `boolean`                                    |             | See the requestPayerName option.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                |
-| `requestShipping`   |         | `boolean`                                    |             | Collect shipping address by setting this option to true. The address appears in the PaymentResponse.&#xA;You must also supply a valid \[ShippingOptions] to the shippingOptions property. This can be up front at the time stripe.paymentRequest is called, or in response to a shippingaddresschange event using the updateWith callback.                                                                                                                                                                                                                                           |                |
-| `shippingOptions`   |         | `ShippingOption[]`                           |             | An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option.                                                                                                                                                                                                                                                                                                                                                                                                                                                 |                |
-| `buttonType`        |         | `PaymentRequestButtonStyleOptions['type']`   | `'default'` |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-| `buttonTheme`       |         | `PaymentRequestButtonStyleOptions['theme']`  | `'dark'`    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |                |
-
-#### Methods
-
-| Name    | Privacy | Description | Parameters | Return | Inherited From |
-| ------- | ------- | ----------- | ---------- | ------ | -------------- |
-| `reset` | public  |             |            | `void` |                |
-
-#### Events
-
-| Name                      | Type | Description                                                        | Inherited From |
-| ------------------------- | ---- | ------------------------------------------------------------------ | -------------- |
-| `'unsupported'`           |      | When the element detects that the user agent cannot make a payment |                |
-| `'fail'`                  |      | When a payment request fails                                       |                |
-| `'cancel'`                |      | When a payment request is cancelled                                |                |
-| `'shippingaddresschange'` |      | When the user chooses a different shipping address                 |                |
-| `'shippingoptionchange'`  |      | When the user chooses a different shipping option                  |                |
-
-#### Attributes
-
-| Name                  | Field             | Inherited From |
-| --------------------- | ----------------- | -------------- |
-| `amount`              | amount            |                |
-| `can-make-payment`    | canMakePayment    |                |
-| `country`             | country           |                |
-| `currency`            | currency          |                |
-| `displayItems`        | displayItems      |                |
-| `label`               | label             |                |
-| `payment-intent`      | paymentIntent     |                |
-| `payment-request`     | paymentRequest    |                |
-| `pending`             | pending           |                |
-| `request-payer-email` | requestPayerEmail |                |
-| `request-payer-name`  | requestPayerName  |                |
-| `request-payer-phone` | requestPayerPhone |                |
-| `request-shipping`    | requestShipping   |                |
-| `shippingOptions`     | shippingOptions   |                |
-| `button-type`         | buttonType        |                |
-| `button-theme`        | buttonTheme       |                |
-
-#### CSS Properties
-
-| Name                                          | Default          | Description                                  |
-| --------------------------------------------- | ---------------- | -------------------------------------------- |
-| `--stripe-payment-request-element-min-width`  | `` `300px` ``    | min-width property of the container element  |
-| `--stripe-payment-request-element-padding`    | `` `8px 12px` `` | padding property of the container element    |
-| `--stripe-payment-request-element-background` | `` `white` ``    | background property of the container element |
-
-<details><summary>Private API</summary>
-
-#### Fields
-
-| Name               | Privacy   | Type               | Default | Description | Inherited From |
-| ------------------ | --------- | ------------------ | ------- | ----------- | -------------- |
-| `slotName`         | protected | `SlotName`         |         |             |                |
-| `#displayItems`    | private   | `DisplayItem[]`    |         |             |                |
-| `#shippingOptions` | private   | `ShippingOption[]` |         |             |                |
-
-#### Methods
-
-| Name                             | Privacy   | Description                                                    | Parameters                                                                       | Return                                                                        | Inherited From |
-| -------------------------------- | --------- | -------------------------------------------------------------- | -------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | -------------- |
-| `getStripePaymentRequestOptions` | private   | Creates a StripePaymentRequestOptions object.                  |                                                                                  | `StripePaymentRequestOptions`                                                 |                |
-| `initElement`                    | protected | Initializes the PaymentRequest Object.                         |                                                                                  | `Promise<void>`                                                               |                |
-| `initPaymentRequest`             | private   | Initialized the \`PaymentRequest\` object.                     |                                                                                  | `Promise<void>`                                                               |                |
-| `initPaymentRequestButton`       | private   | Creates Stripe Payment Request Element.                        |                                                                                  | `Promise<void>`                                                               |                |
-| `initPaymentRequestListeners`    | private   | Attaches listeners to the \`PaymentRequest\` object.           |                                                                                  | `Promise<void>`                                                               |                |
-| `updatePaymentRequest`           | private   | Updates the PaymentRequests's values                           |                                                                                  |                                                                               |                |
-| `onCancel`                       | private   | Handle a \`cancel\` event                                      |                                                                                  | `void`                                                                        |                |
-| `complete`                       | private   | Completes the PaymentRequest.                                  | `paymentResponse: StripePaymentRequestResponse, confirmationError: stripe.Error` | `Promise<StripePaymentRequestResponse \| { error: stripe.Error \| null }>`    |                |
-| `onPaymentResponse`              | private   | Handle a paymentResponse from Stripe                           | `paymentResponse: StripePaymentRequestResponse`                                  | `Promise<void>`                                                               |                |
-| `confirmPaymentIntent`           | private   | When a PaymentIntent client secret is set, confirm the payment | `paymentResponse: StripePaymentRequestResponse`                                  | `Promise<void>`                                                               |                |
-| `confirmCardPayment`             | private   | Stripe confirmCardPayment method                               | `data: stripe.ConfirmCardPaymentData, options: stripe.ConfirmCardPaymentOptions` | `Promise<PaymentIntentResponse>`                                              |                |
-| `onShippingaddresschange`        | private   |                                                                | `originalEvent: ShippingAddressChangeEvent`                                      | `void`                                                                        |                |
-| `onShippingoptionchange`         | private   |                                                                | `originalEvent: ShippingOptionChangeEvent`                                       | `void`                                                                        |                |
-| `parseDatasets`                  | private   | Parses an element's dataset number props from string to number | `selector: 'stripe-shipping-option'`                                             | `ShippingOption[]`                                                            |                |
-| `parseDatasets`                  | private   |                                                                | `selector: 'stripe-display-item'`                                                | `DisplayItem[]`                                                               |                |
-| `parseDatasets`                  | private   |                                                                | `selector: 'stripe-display-item'\|'stripe-shipping-option'`                      | `(stripe.paymentRequest.DisplayItem\|stripe.paymentRequest.ShippingOption)[]` |                |
-
-</details>
-
-<hr/>
-
-### Functions
-
-| Name                     | Description | Parameters    | Return                       |
-| ------------------------ | ----------- | ------------- | ---------------------------- |
-| `isStripeDisplayItem`    |             | `el: Element` | `el is StripeDisplayItem`    |
-| `isStripeShippingOption` |             | `el: Element` | `el is StripeShippingOption` |
-
-<hr/>
-
-### Exports
-
-| Kind                        | Name                     | Declaration            | Module                      | Package |
-| --------------------------- | ------------------------ | ---------------------- | --------------------------- | ------- |
-| `js`                        | `isStripeDisplayItem`    | isStripeDisplayItem    | ./stripe-payment-request.js |         |
-| `js`                        | `isStripeShippingOption` | isStripeShippingOption | ./stripe-payment-request.js |         |
-| `js`                        | `StripePaymentRequest`   | StripePaymentRequest   | ./stripe-payment-request.js |         |
-| `custom-element-definition` | `stripe-payment-request` | StripePaymentRequest   | ./stripe-payment-request.js |         |
-
-## `./index.js`:
-
-### Exports
-
-| Kind | Name                   | Declaration          | Module                      | Package |
-| ---- | ---------------------- | -------------------- | --------------------------- | ------- |
-| `js` | `StripeElements`       | StripeElements       | ./stripe-elements.js        |         |
-| `js` | `StripePaymentRequest` | StripePaymentRequest | ./stripe-payment-request.js |         |
+## 📚 API Docs
+Learn how to use Stripe Elements web components in the [docs](https://bennypowers.dev/stripe-elements)

stripe-elements.js

@@ -1,30 +0,556 @@
-import { property, customElement } from 'lit/decorators.js';
-import { s as styles$1, b as bound, S as StripeBase, d as dash } from './shared.js';
-import { css } from 'lit';
-import 'lit/directive.js';
-import 'lit/directives/if-defined.js';
-import '@typed/curry';
-import '@lavadrop/kebab-case';
-import '@lavadrop/camel-case';
-import '@pacote/memoize';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
 
-/* eslint-disable @typescript-eslint/ban-types, no-invalid-this, @typescript-eslint/no-explicit-any */
-function wrap(f) {
-    return (_target, _property, descriptor) => {
-        const original = descriptor.value;
-        descriptor.value = f(original);
-        return descriptor;
+// src/stripe-elements.ts
+import { property as property2, customElement } from "lit/decorators.js";
+import { bound as bound2 } from "./lib/bound.js";
+
+// src/StripeBase.ts
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { bound } from "./lib/bound.js";
+import { dash } from "./lib/strings.js";
+import { isRepresentation } from "./lib/predicates.js";
+import { throwBadResponse } from "./lib/fetch.js";
+
+// src/breadcrumb-controller.ts
+function getRandom() {
+  return (Date.now() + Math.random() * 1e3).toString(36).substr(0, 8);
+}
+var BreadcrumbController = class {
+  constructor(host, options) {
+    this.host = host;
+    this.options = options;
+    this.initialized = false;
+    this.shadowHosts = [];
+    this.host.addController(this);
+    this.resetMountId();
+    this.slotName = this.options?.slotName ?? `breadcrumb-${getRandom()}`;
+  }
+  get mount() {
+    return document.getElementById(this.mountId);
+  }
+  hostUpdated() {
+    if (!this.initialized && this.options.autoInitialize !== false)
+      this.init();
+  }
+  hostDisconnected() {
+    this.destroyMountPoints();
+  }
+  resetMountId() {
+    const prefix = this.options.mountPrefix ?? this.host.localName;
+    this.mountId = `${prefix}-mount-point-${getRandom()}`;
+  }
+  createMountPoint() {
+    const node = document.createElement("div");
+    node.id = this.mountId;
+    node.classList.add(`${this.host.tagName.toLowerCase()}-mount`);
+    return node;
+  }
+  createSlot(slotName) {
+    const node = document.createElement("slot");
+    node.slot = slotName;
+    node.name = slotName;
+    return node;
+  }
+  appendTemplate(target, node = this.createMountPoint()) {
+    target.appendChild(node);
+    return node;
+  }
+  initMountPoints() {
+    this.initShadowMountPoints();
+  }
+  destroyMountPoints() {
+    for (const host of this.shadowHosts) {
+      for (const el of host.querySelectorAll(`[slot="${this.slotName}"][name="${this.slotName}"]`))
+        el.remove();
+    }
+    if (this.mount)
+      this.mount.remove();
+    this.resetMountId();
+  }
+  initShadowMountPoints() {
+    let host = this.host;
+    this.shadowHosts = [this.host];
+    while (host = host.getRootNode().host)
+      this.shadowHosts.push(host);
+    const { shadowHosts, slotName } = this;
+    const hosts = [...shadowHosts];
+    const root = hosts.pop();
+    if (!root.querySelector(`[slot="${slotName}"]`)) {
+      const div = document.createElement("div");
+      div.slot = slotName;
+      root.appendChild(div);
+    }
+    const container = root.querySelector(`[slot="${slotName}"]`);
+    this.appendTemplate(container);
+    hosts.forEach((host2) => this.appendTemplate(host2, this.createSlot(slotName)));
+  }
+  init() {
+    this.destroyMountPoints();
+    this.initMountPoints();
+    this.initialized = true;
+  }
+};
+
+// src/StripeBase.ts
+import { readonly } from "./lib/read-only.js";
+import { notify } from "./lib/notify.js";
+
+// node_modules/@stripe/stripe-js/dist/pure.esm.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function(obj2) {
+      return typeof obj2;
     };
+  } else {
+    _typeof = function(obj2) {
+      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+    };
+  }
+  return _typeof(obj);
 }
-const stripeMethod = wrap(function (f) {
-    const { name } = f;
-    return async function (...args) {
-        if (!this.stripe)
-            throw new Error(`<${this.constructor.is}>: Stripe must be initialized before calling ${name}.`);
-        return f.call(this, ...args)
-            .then(this.handleResponse);
-    };
-});
+var V3_URL = "https://js.stripe.com/v3";
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i = 0; i < scripts.length; i++) {
+    var script = scripts[i];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "1.23.0",
+    startTime
+  });
+};
+var stripePromise = null;
+var loadScript = function loadScript2(params) {
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+  stripePromise = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      }
+      script.addEventListener("load", function() {
+        if (window.Stripe) {
+          resolve(window.Stripe);
+        } else {
+          reject(new Error("Stripe.js not available"));
+        }
+      });
+      script.addEventListener("error", function() {
+        reject(new Error("Failed to load Stripe.js"));
+      });
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise;
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var validateLoadParams = function validateLoadParams2(params) {
+  var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
+  if (params === null || _typeof(params) !== "object") {
+    throw new Error(errorMessage);
+  }
+  if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === "boolean") {
+    return params;
+  }
+  throw new Error(errorMessage);
+};
+var loadParams;
+var loadStripeCalled = false;
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadStripeCalled = true;
+  var startTime = Date.now();
+  return loadScript(loadParams).then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+loadStripe.setLoadParameters = function(params) {
+  if (loadStripeCalled) {
+    throw new Error("You cannot change load parameters after calling loadStripe");
+  }
+  loadParams = validateLoadParams(params);
+};
 
-const styles = css`:host {
+// src/StripeBase.ts
+var StripeElementsError = class extends Error {
+  constructor(tag, message) {
+    super(`<${tag}>: ${message}`);
+    this.originalMessage = message;
+  }
+};
+function isStripeElementsError(error) {
+  return !!error && error instanceof StripeElementsError;
+}
+var errorConverter = {
+  toAttribute: (error) => !error ? null : isStripeElementsError(error) ? error.originalMessage : error.message || ""
+};
+var StripeBase = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.generate = "source";
+    this.showError = false;
+    this.paymentMethod = null;
+    this.source = null;
+    this.token = null;
+    this.element = null;
+    this.elements = null;
+    this.error = null;
+    this.focused = false;
+    this.ready = false;
+    this.stripe = null;
+    this.theme = "none";
+    this.precomputedStyle = getComputedStyle(this);
+    this.breadcrumb = new BreadcrumbController(this, {
+      slotName: `${this.constructor.is}-slot`
+    });
+  }
+  get stripeMountId() {
+    return this.breadcrumb.mountId;
+  }
+  get stripeMount() {
+    return this.breadcrumb.mount;
+  }
+  render() {
+    const { error, showError } = this;
+    const { slotName } = this.breadcrumb;
+    const errorMessage = isStripeElementsError(error) ? error.originalMessage : error?.message;
+    return html`
+      <div id="stripe" part="stripe">
+        <slot id="stripe-slot" name="${slotName}"></slot>
+      </div>
+
+      <output id="error"
+          for="stripe"
+          part="error"
+          ?hidden="${!showError}">
+        ${ifDefined(errorMessage)}
+      </output>
+    `;
+  }
+  updated(changed) {
+    super.updated?.(changed);
+    if (changed.has("error"))
+      this.errorChanged();
+    if (changed.has("publishableKey"))
+      this.init();
+    [...changed.keys()].forEach(this.representationChanged);
+  }
+  async disconnectedCallback() {
+    super.disconnectedCallback();
+    await this.unmount?.();
+  }
+  reset() {
+    this.element?.clear?.();
+    this.resetRepresentations();
+    readonly.set(this, { error: null });
+  }
+  blur() {
+    this.element?.blur();
+  }
+  focus() {
+    this.element?.focus();
+  }
+  createError(message) {
+    return new StripeElementsError(this.constructor.is, message);
+  }
+  errorChanged() {
+    this.resetRepresentations();
+    this.fireError(this.error);
+  }
+  fire(type, detail, opts) {
+    this.dispatchEvent(new CustomEvent(type, { detail, ...opts }));
+  }
+  fireError(error) {
+    this.dispatchEvent(new ErrorEvent("error", { error }));
+  }
+  getCSSCustomPropertyValue(propertyName) {
+    return this.precomputedStyle.getPropertyValue(propertyName);
+  }
+  async handleResponse(response) {
+    const { error = null, paymentMethod = null, source = null, token = null } = { ...response };
+    readonly.set(this, { error, paymentMethod, source, token });
+    await this.updateComplete;
+    if (error)
+      throw error;
+    else
+      return response;
+  }
+  initElement() {
+    "abstract";
+  }
+  async init() {
+    await this.unmount();
+    await this.initStripe();
+    await this.initElement();
+    this.initElementListeners();
+    this.breadcrumb.init();
+    this.mount();
+  }
+  initElementListeners() {
+    if (!this.element)
+      return;
+    this.element.on("ready", this.onReady);
+    this.element.on("focus", this.onFocus);
+    this.element.on("blur", this.onBlur);
+  }
+  async initStripe() {
+    const { publishableKey } = this;
+    if (!publishableKey)
+      readonly.set(this, { elements: null, element: null, stripe: null });
+    else {
+      try {
+        const stripe = window.Stripe ? window.Stripe(publishableKey) : await loadStripe(publishableKey);
+        const elements = stripe?.elements();
+        readonly.set(this, { elements, error: null, stripe });
+      } catch (e) {
+        console.warn(e);
+        const error = this.createError("Stripe.js must be loaded first.");
+        readonly.set(this, { elements: null, error, stripe: null });
+      } finally {
+        await this.updateComplete;
+      }
+    }
+  }
+  mount() {
+    if (!this.breadcrumb.mount)
+      throw this.createError("Stripe Mount missing");
+    this.element?.mount(this.breadcrumb.mount);
+  }
+  async unmount() {
+    this.element?.unmount?.();
+    readonly.set(this, { element: null });
+    await this.updateComplete;
+  }
+  async onBlur() {
+    readonly.set(this, { focused: false });
+    await this.updateComplete;
+  }
+  async onFocus() {
+    readonly.set(this, { focused: true });
+    await this.updateComplete;
+  }
+  async onReady(event) {
+    readonly.set(this, { ready: true });
+    await this.updateComplete;
+    this.fire("ready", event);
+  }
+  async postRepresentation() {
+    const onError = (error) => readonly.set(this, { error });
+    const onSuccess = (success) => this.fire("success", success);
+    const token = this.token || void 0;
+    const source = this.source || void 0;
+    const paymentMethod = this.paymentMethod || void 0;
+    const body = JSON.stringify({ token, source, paymentMethod });
+    const headers = { "Content-Type": "application/json" };
+    const method = "POST";
+    return fetch(this.action, { body, headers, method }).then(throwBadResponse).then(onSuccess).catch(onError);
+  }
+  representationChanged(name) {
+    if (!isRepresentation(name))
+      return;
+    const value = this[name];
+    if (!value)
+      return;
+    this.fire(`${dash(name)}`, value);
+    if (this.action)
+      this.postRepresentation();
+  }
+  resetRepresentations() {
+    readonly.set(this, {
+      paymentMethod: null,
+      token: null,
+      source: null
+    });
+  }
+};
+__decorateClass([
+  property({ type: String })
+], StripeBase.prototype, "action", 2);
+__decorateClass([
+  property({ type: String, attribute: "client-secret" })
+], StripeBase.prototype, "clientSecret", 2);
+__decorateClass([
+  property({ type: String })
+], StripeBase.prototype, "generate", 2);
+__decorateClass([
+  notify,
+  property({ type: String, attribute: "publishable-key", reflect: true })
+], StripeBase.prototype, "publishableKey", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-error", reflect: true })
+], StripeBase.prototype, "showError", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object, attribute: "payment-method" })
+], StripeBase.prototype, "paymentMethod", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object })
+], StripeBase.prototype, "source", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object })
+], StripeBase.prototype, "token", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "element", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "elements", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object, reflect: true, converter: errorConverter })
+], StripeBase.prototype, "error", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Boolean, reflect: true })
+], StripeBase.prototype, "focused", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Boolean, reflect: true })
+], StripeBase.prototype, "ready", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "stripe", 2);
+__decorateClass([
+  property()
+], StripeBase.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: "border-radius" })
+], StripeBase.prototype, "borderRadius", 2);
+__decorateClass([
+  property({ attribute: "color-background" })
+], StripeBase.prototype, "colorBackground", 2);
+__decorateClass([
+  property({ attribute: "color-danger" })
+], StripeBase.prototype, "colorDanger", 2);
+__decorateClass([
+  property({ attribute: "color-primary" })
+], StripeBase.prototype, "colorPrimary", 2);
+__decorateClass([
+  property({ attribute: "color-text" })
+], StripeBase.prototype, "colorText", 2);
+__decorateClass([
+  property({ attribute: "font-family" })
+], StripeBase.prototype, "fontFamily", 2);
+__decorateClass([
+  property({ attribute: "spacing-unit" })
+], StripeBase.prototype, "spacingUnit", 2);
+__decorateClass([
+  bound
+], StripeBase.prototype, "handleResponse", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onBlur", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onFocus", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onReady", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "representationChanged", 1);
+
+// src/stripe-elements.ts
+import { dash as dash2 } from "./lib/strings.js";
+import { stripeMethod } from "./lib/stripe-method-decorator.js";
+import { readonly as readonly2 } from "./lib/read-only.js";
+import { notify as notify2 } from "./lib/notify.js";
+
+// src/shared.css
+import { css } from "lit";
+var styles = css`[hidden] {
+  display: none !important;
+}
+
+:host:not([hidden]) {
+  display: block;
+  box-sizing: border-box;
+}
+
+#error {
+  font-family: sans-serif;
+  font-size: 14px;
+  padding-left: 42px;
+  padding-bottom: 10px;
+}
+`;
+var shared_default = styles;
+
+// src/stripe-elements.css
+import { css as css2 } from "lit";
+var styles2 = css2`:host {
   min-width: var(--stripe-elements-width, 300px);
@@ -53,438 +579,203 @@ min-height: var(--stripe-elements-height, 50px);
 `;
+var stripe_elements_default = styles2;
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-const allowedStyles = [
-    'color',
-    'fontFamily',
-    'fontSize',
-    'fontStyle',
-    'fontSmoothing',
-    'fontVariant',
-    'iconColor',
-    'lineHeight',
-    'letterSpacing',
-    'textDecoration',
-    'textShadow',
-    'textTransform',
+// src/stripe-elements.ts
+var ALLOWED_STYLES = [
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontSmoothing",
+  "fontVariant",
+  "iconColor",
+  "lineHeight",
+  "letterSpacing",
+  "textDecoration",
+  "textShadow",
+  "textTransform"
 ];
-/**
- * [Stripe.js v3 Card Elements](https://stripe.com/docs/elements), but it's a Web Component!
- * Supports Shadow DOM.
- *
- * 👨‍🎨 [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-elements--enter-a-stripe-publishable-key) 👀
- *
- * ### 🧙‍♂️ Usage
- * If you prebuilt with Snowpack, load the module from your `web_modules` directory
- *
- * ```html
- * <script type="module" src="/web_modules/@power-elements/stripe-elements/stripe-elements.js"></script>
- * ```
- *
- * Alternatively, load the module from the unpkg CDN
- * ```html
- * <script type="module" src="https://unpkg.com/@power-elements/stripe-elements/stripe-elements.js?module"></script>
- * ```
- *
- * Then you can add the element to your page.
- *
- * ```html
- * <stripe-elements id="stripe"
- *     action="/payment"
- *     publishable-key="pk_test_XXXXXXXXXXXXXXXXXXXXXXXX"
- * ></stripe-elements>
- * ```
- *
- * See the demos for more comprehensive examples.
- *   - Using `<stripe-elements>` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-html--stripe-elements).
- *   - Using `<stripe-elements>` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-elements).
- *   - Using `<stripe-elements>` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-elements).
- *   - Using `<stripe-elements>` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-elements).
- *   - Using `<stripe-elements>` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-elements).
- *   - Using `<stripe-elements>` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-elements).
- *
- * ## Styling
- *
- * Stripe v3's 'Stripe Elements' are not custom elements, but rather forms
- * hosted by stripe and injected into your page via an iFrame. When we refer to the
- * 'Stripe Element' in this document, we are referring to the hosted Stripe form,
- * not the `<stripe-element>` custom element. But when I mention the 'element', I mean the custom element.
- *
- * When you apply CSS to the custom properties available, they're parsed and sent to Stripe, who should apply them to the Stripe Element they return in the iFrame.
- *
- * - `base` styles are inherited by all other variants.
- * - `complete` styles are applied when the Stripe Element has valid input.
- * - `empty` styles are applied when the Stripe Element has no user input.
- * - `invalid` styles are applied when the Stripe Element has invalid input.
- *
- * There are 11 properties for each state that you can set which will be read into the Stripe Element iFrame:
- *
- * - `color`
- * - `font-family`
- * - `font-size`
- * - `font-smoothing`
- * - `font-variant`
- * - `icon-color`
- * - `line-height`
- * - `letter-spacing`
- * - `text-decoration`
- * - `text-shadow`
- * - `text-transform`
- *
- * @cssprop [--stripe-elements-border-radius=`4px`] - border radius of the element container
- * @cssprop [--stripe-elements-border=`1px solid transparent`] - border property of the element container
- * @cssprop [--stripe-elements-box-shadow=`0 1px 3px 0 #e6ebf1`] - box shadow for the element container
- * @cssprop [--stripe-elements-transition=`box-shadow 150ms ease`] - transition property for the element container
- *
- * @cssprop [--stripe-elements-base-color] - `color` property for the element in its base state
- * @cssprop [--stripe-elements-base-font-family] - `font-family` property for the element in its base state
- * @cssprop [--stripe-elements-base-font-size] - `font-size` property for the element in its base state
- * @cssprop [--stripe-elements-base-font-smoothing] - `font-smoothing` property for the element in its base state
- * @cssprop [--stripe-elements-base-font-variant] - `font-variant` property for the element in its base state
- * @cssprop [--stripe-elements-base-icon-color] - `icon-color` property for the element in its base state
- * @cssprop [--stripe-elements-base-line-height] - `line-height` property for the element in its base state
- * @cssprop [--stripe-elements-base-letter-spacing] - `letter-spacing` property for the element in its base state
- * @cssprop [--stripe-elements-base-text-decoration] - `text-decoration` property for the element in its base state
- * @cssprop [--stripe-elements-base-text-shadow] - `text-shadow` property for the element in its base state
- * @cssprop [--stripe-elements-base-text-transform] - `text-transform` property for the element in its base state
- *
- * @cssprop [--stripe-elements-complete-color] - `color` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-font-family] - `font-family` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-font-size] - `font-size` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-font-smoothing] - `font-smoothing` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-font-variant] - `font-variant` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-icon-color] - `icon-color` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-line-height] - `line-height` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-letter-spacing] - `letter-spacing` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-text-decoration] - `text-decoration` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-text-shadow] - `text-shadow` property for the element in its complete state
- * @cssprop [--stripe-elements-complete-text-transform] - `text-transform` property for the element in its complete state
- *
- * @cssprop [--stripe-elements-empty-color] - `color` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-font-family] - `font-family` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-font-size] - `font-size` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-font-smoothing] - `font-smoothing` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-font-variant] - `font-variant` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-icon-color] - `icon-color` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-line-height] - `line-height` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-letter-spacing] - `letter-spacing` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-text-decoration] - `text-decoration` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-text-shadow] - `text-shadow` property for the element in its empty state
- * @cssprop [--stripe-elements-empty-text-transform] - `text-transform` property for the element in its empty state
- *
- * @cssprop [--stripe-elements-invalid-color] - `color` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-font-family] - `font-family` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-font-size] - `font-size` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-font-smoothing] - `font-smoothing` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-font-variant] - `font-variant` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-icon-color] - `icon-color` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-line-height] - `line-height` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-letter-spacing] - `letter-spacing` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-text-decoration] - `text-decoration` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-text-shadow] - `text-shadow` property for the element in its invalid state
- * @cssprop [--stripe-elements-invalid-text-transform] - `text-transform` property for the element in its invalid state
- *
- * @element stripe-elements
- * @extends StripeBase
- *
- * @fires 'change' - Stripe Element change event
- */
-let StripeElements = class StripeElements extends StripeBase {
-    constructor() {
-        super(...arguments);
-        /* PUBLIC FIELDS */
-        /**
-         * Whether to hide icons in the Stripe form.
-         */
-        this.hideIcon = false;
-        /**
-         * Whether or not to hide the postal code field.
-         * Useful when you gather shipping info elsewhere.
-         */
-        this.hidePostalCode = false;
-        /**
-         * Stripe icon style.
-         */
-        this.iconStyle = 'default';
-        /**
-         * Prefilled values for form.
-         * @example { postalCode: '90210' }
-         */
-        this.value = {};
-        /* READ ONLY PROPERTIES */
-        /**
-         * The card brand detected by Stripe
-         */
-        this.brand = null;
-        /**
-         * Whether the form is complete.
-         */
-        this.complete = false;
-        /**
-         * If the form is empty.
-         */
-        this.empty = true;
-        /**
-         * Whether the form is invalid.
-         */
-        this.invalid = false;
-        // DEPRECATED
-        /**
-         * The Stripe card object.
-         * **DEPRECATED**. Will be removed in a future version. use `element` instead
-         * @deprecated
-         */
-        this.card = null;
-        /**
-         * Whether the form is empty.
-         * **DEPRECATED**. Will be removed in a future version. use `empty` instead
-         * @deprecated
-         */
-        this.isEmpty = true;
-        /**
-         * Whether the form is complete.
-         * **DEPRECATED**. Will be removed in a future version. use `complete` instead
-         * @deprecated
-         */
-        this.isComplete = false;
+var SUB_STYLES = [
+  ":hover",
+  ":focus",
+  "::placeholder",
+  "::selection",
+  ":-webkit-autofill",
+  ":disabled"
+];
+var StripeElements = class extends StripeBase {
+  constructor() {
+    super(...arguments);
+    this.hideIcon = false;
+    this.hidePostalCode = false;
+    this.iconStyle = "default";
+    this.value = {};
+    this.brand = null;
+    this.complete = false;
+    this.empty = true;
+    this.invalid = false;
+  }
+  async createPaymentMethod(paymentMethodData = this.getPaymentMethodData()) {
+    return this.stripe.createPaymentMethod(paymentMethodData);
+  }
+  async createSource(sourceData = this.sourceData) {
+    return this.stripe.createSource(this.element, sourceData);
+  }
+  async createToken(tokenData = this.tokenData) {
+    return this.stripe.createToken(this.element, tokenData);
+  }
+  isPotentiallyValid() {
+    return !this.complete && !this.empty && !this.error || this.validate();
+  }
+  reset() {
+    super.reset();
+    this.element?.clear();
+  }
+  async submit() {
+    switch (this.generate) {
+      case "payment-method":
+        return this.createPaymentMethod();
+      case "source":
+        return this.createSource();
+      case "token":
+        return this.createToken();
+      default: {
+        const error = this.createError(`cannot generate ${this.generate}`);
+        readonly2.set(this, { error });
+        await this.updateComplete;
+        throw error;
+      }
     }
-    updated(changed) {
-        super.updated(changed);
-        // DEPRECATED
-        if (changed.has('element') && !this.element)
-            this.setReadOnlyProperties({ card: null });
-    }
-    /* PUBLIC API */
-    /**
-     * Submit payment information to generate a paymentMethod
-     */
-    async createPaymentMethod(paymentMethodData = this.getPaymentMethodData()) {
-        return this.stripe.createPaymentMethod(paymentMethodData);
-    }
-    /**
-     * Submit payment information to generate a source
-     */
-    async createSource(sourceData = this.sourceData) {
-        return this.stripe.createSource(this.element, sourceData);
-    }
-    /**
-     * Submit payment information to generate a token
-     */
-    async createToken(tokenData = this.tokenData) {
-        return this.stripe.createToken(this.element, tokenData);
-    }
-    /**
-     * Checks for potential validity. A potentially valid form is one that is not empty, not complete and has no error. A validated form also counts as potentially valid.
-     */
-    isPotentiallyValid() {
-        return (!this.complete && !this.empty && !this.error) || this.validate();
-    }
-    /**
-     * Resets the Stripe card.
-     */
-    reset() {
-        var _a;
-        super.reset();
-        /* istanbul ignore next */
-        (_a = this.element) === null || _a === void 0 ? void 0 : _a.clear();
-    }
-    /**
-     * Generates a payment representation of the type specified by `generate`.
-     */
-    async submit() {
-        switch (this.generate) {
-            case 'payment-method': return this.createPaymentMethod();
-            case 'source': return this.createSource();
-            case 'token': return this.createToken();
-            default: {
-                const error = this.createError(`cannot generate ${this.generate}`);
-                await this.setReadOnlyProperties({ error });
-                throw error;
-            }
-        }
-    }
-    /**
-     * Checks if the Stripe form is valid.
-     */
-    validate() {
-        const { complete, empty, error } = this;
-        const isValid = !error && complete && !empty;
-        if (empty && !error)
-            this.setReadOnlyProperties({ error: this.createError('Your card number is empty.') });
-        return isValid;
-    }
-    /* PRIVATE METHODS */
-    /**
-     * Generates PaymentMethodData from the element.
-     */
-    getPaymentMethodData() {
-        const type = 'card';
-        const { billingDetails, element: card, paymentMethodData } = this;
-        return ({
-            billing_details: billingDetails,
-            ...paymentMethodData,
-            type,
-            card,
-        });
-    }
-    /**
-     * Returns a Stripe-friendly style object computed from CSS custom properties
-     */
-    getStripeElementsStyles() {
-        const computedStyle = window.ShadyCSS ? undefined : getComputedStyle(this);
-        const getStyle = (prop) => this.getCSSCustomPropertyValue(prop, computedStyle) || undefined;
-        const styleReducer = ({ base = {}, complete = {}, empty = {}, invalid = {}, }, camelCase) => ({
-            base: { ...base, [camelCase]: getStyle(`--stripe-elements-base-${dash(camelCase)}`) },
-            complete: { ...complete, [camelCase]: getStyle(`--stripe-elements-complete-${dash(camelCase)}`) },
-            empty: { ...empty, [camelCase]: getStyle(`--stripe-elements-empty-${dash(camelCase)}`) },
-            invalid: { ...invalid, [camelCase]: getStyle(`--stripe-elements-invalid-${dash(camelCase)}`) },
-        });
-        return allowedStyles.reduce(styleReducer, {});
-    }
-    async initElement() {
-        if (!this.stripe)
-            return;
-        const { hidePostalCode, hideIcon, iconStyle, value } = this;
-        const style = this.getStripeElementsStyles();
-        const options = {
-            hideIcon,
-            hidePostalCode,
-            iconStyle,
-            style,
-            value,
-        };
-        const element = this.elements.create('card', options);
-        element.addEventListener('change', this.onChange);
-        await this.setReadOnlyProperties({
-            element,
-            // DEPRECATED
-            card: element,
-        });
-    }
-    /**
-     * Updates the element's state.
-     */
-    async onChange(event) {
-        const { brand, complete, empty, error = null } = event;
-        const invalid = error || (!empty && !complete);
-        await this.setReadOnlyProperties({
-            brand,
-            complete,
-            empty,
-            error,
-            invalid,
-            // DEPRECATED
-            isComplete: complete,
-            isEmpty: empty,
-        });
-        this.fire('change', event);
-        // DEPRECATED
-        this.fire('stripe-change', event);
-    }
+  }
+  validate() {
+    const { complete, empty, error } = this;
+    const isValid = !error && complete && !empty;
+    if (empty && !error)
+      readonly2.set(this, { error: this.createError("Your card number is empty.") });
+    return isValid;
+  }
+  updateStyle() {
+    this.element?.update({
+      style: this.getStripeElementsStyles()
+    });
+  }
+  getPaymentMethodData() {
+    const type = "card";
+    const { billingDetails, paymentMethodData } = this;
+    return {
+      billing_details: billingDetails,
+      ...paymentMethodData,
+      type,
+      card: this.element
+    };
+  }
+  getStripeElementsStyles() {
+    const getStyle = (prop) => this.getCSSCustomPropertyValue(prop) || void 0;
+    const STATES = ["base", "complete", "empty", "invalid"];
+    const subReducer = (state) => (acc, sub) => {
+      if (state.includes("-"))
+        return acc;
+      const subProp = sub.split(":").pop();
+      return {
+        ...acc,
+        [sub]: ALLOWED_STYLES.reduce(styleReducer(`${state}-${subProp}`), {})
+      };
+    };
+    const styleReducer = (state) => (init, p) => {
+      const prop = `--stripe-elements-${state}-${dash2(p)}`;
+      return {
+        ...init,
+        [p]: getStyle(prop),
+        ...SUB_STYLES.reduce(subReducer(state), {})
+      };
+    };
+    return STATES.reduce((acc, state) => ({
+      ...acc,
+      [state]: ALLOWED_STYLES.reduce(styleReducer(state), {})
+    }), {});
+  }
+  async initElement() {
+    if (!this.stripe)
+      return;
+    const { hidePostalCode, hideIcon, iconStyle, value } = this;
+    const style = this.getStripeElementsStyles();
+    await this.updateComplete;
+    const element = this.createElement({
+      hideIcon,
+      hidePostalCode,
+      iconStyle,
+      style,
+      value
+    });
+    element.on("change", this.onChange);
+    readonly2.set(this, { element });
+    await this.updateComplete;
+  }
+  createElement(options) {
+    const element = this.elements.create("card", options);
+    return element;
+  }
+  async onChange(event) {
+    const { brand, complete, empty, error = null } = event;
+    const invalid = !(error || !empty && !complete);
+    readonly2.set(this, { brand, complete, empty, error, invalid });
+    await this.updateComplete;
+    this.fire("change", event);
+  }
 };
-StripeElements.is = 'stripe-elements';
-StripeElements.elementType = 'card';
+StripeElements.is = "stripe-elements";
+StripeElements.elementType = "card";
 StripeElements.styles = [
-    styles$1,
-    styles,
+  shared_default,
+  stripe_elements_default
 ];
-__decorate([
-    slot,
-    __metadata("design:type", String)
-], StripeElements.prototype, "slotName", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'hide-icon' }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "hideIcon", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'hide-postal-code' }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "hidePostalCode", void 0);
-__decorate([
-    property({ type: String, attribute: 'icon-style' }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "iconStyle", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "value", void 0);
-__decorate([
-    property({ type: String, notify: true, readOnly: true }),
-    __metadata("design:type", String)
-], StripeElements.prototype, "brand", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, notify: true, readOnly: true }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "complete", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, notify: true, readOnly: true }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "empty", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, notify: true, readOnly: true }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Object, notify: true, readOnly: true }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "card", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'is-empty', reflect: true, notify: true, readOnly: true }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "isEmpty", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        attribute: 'is-complete',
-        reflect: true,
-        notify: true,
-        readOnly: true,
-    }),
-    __metadata("design:type", Object)
-], StripeElements.prototype, "isComplete", void 0);
-__decorate([
-    stripeMethod,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], StripeElements.prototype, "createPaymentMethod", null);
-__decorate([
-    stripeMethod,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], StripeElements.prototype, "createSource", null);
-__decorate([
-    stripeMethod,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], StripeElements.prototype, "createToken", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], StripeElements.prototype, "onChange", null);
-StripeElements = __decorate([
-    customElement('stripe-elements')
+__decorateClass([
+  property2({ type: Boolean, attribute: "hide-icon" })
+], StripeElements.prototype, "hideIcon", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "hide-postal-code" })
+], StripeElements.prototype, "hidePostalCode", 2);
+__decorateClass([
+  property2({ type: String, attribute: "icon-style" })
+], StripeElements.prototype, "iconStyle", 2);
+__decorateClass([
+  property2({ type: Object })
+], StripeElements.prototype, "value", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: String })
+], StripeElements.prototype, "brand", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, reflect: true })
+], StripeElements.prototype, "complete", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, reflect: true })
+], StripeElements.prototype, "empty", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, reflect: true })
+], StripeElements.prototype, "invalid", 2);
+__decorateClass([
+  stripeMethod
+], StripeElements.prototype, "createPaymentMethod", 1);
+__decorateClass([
+  stripeMethod
+], StripeElements.prototype, "createSource", 1);
+__decorateClass([
+  stripeMethod
+], StripeElements.prototype, "createToken", 1);
+__decorateClass([
+  bound2
+], StripeElements.prototype, "onChange", 1);
+StripeElements = __decorateClass([
+  customElement("stripe-elements")
 ], StripeElements);
-/**
- * Allows narrowing class field type
- * @see https://dev.to/bennypowers/narrowing-the-type-of-class-accessors-bi8
- */
-function slot(proto, key) {
-    Object.defineProperty(proto, key, {
-        get() { return "stripe-elements-slot" /* 'stripe-elements' */; },
-    });
-}
-
-export { StripeElements };
+export {
+  StripeElements
+};
 //# sourceMappingURL=stripe-elements.js.map

stripe-payment-request.js

@@ -1,20 +0,572 @@
-import { property, customElement } from 'lit/decorators.js';
-import { s as styles$1, b as bound, S as StripeBase } from './shared.js';
-import { css } from 'lit';
-import 'lit/directive.js';
-import 'lit/directives/if-defined.js';
-import '@typed/curry';
-import '@lavadrop/kebab-case';
-import '@lavadrop/camel-case';
-import '@pacote/memoize';
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
 
-function throwResponseError(response) {
-    if (response.error)
-        throw response.error;
+// src/stripe-payment-request.ts
+import { customElement, property as property2 } from "lit/decorators.js";
+import { bound as bound2 } from "./lib/bound.js";
+
+// src/StripeBase.ts
+import { LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { bound } from "./lib/bound.js";
+import { dash } from "./lib/strings.js";
+import { isRepresentation } from "./lib/predicates.js";
+import { throwBadResponse } from "./lib/fetch.js";
+
+// src/breadcrumb-controller.ts
+function getRandom() {
+  return (Date.now() + Math.random() * 1e3).toString(36).substr(0, 8);
+}
+var BreadcrumbController = class {
+  constructor(host, options) {
+    this.host = host;
+    this.options = options;
+    this.initialized = false;
+    this.shadowHosts = [];
+    this.host.addController(this);
+    this.resetMountId();
+    this.slotName = this.options?.slotName ?? `breadcrumb-${getRandom()}`;
+  }
+  get mount() {
+    return document.getElementById(this.mountId);
+  }
+  hostUpdated() {
+    if (!this.initialized && this.options.autoInitialize !== false)
+      this.init();
+  }
+  hostDisconnected() {
+    this.destroyMountPoints();
+  }
+  resetMountId() {
+    const prefix = this.options.mountPrefix ?? this.host.localName;
+    this.mountId = `${prefix}-mount-point-${getRandom()}`;
+  }
+  createMountPoint() {
+    const node = document.createElement("div");
+    node.id = this.mountId;
+    node.classList.add(`${this.host.tagName.toLowerCase()}-mount`);
+    return node;
+  }
+  createSlot(slotName) {
+    const node = document.createElement("slot");
+    node.slot = slotName;
+    node.name = slotName;
+    return node;
+  }
+  appendTemplate(target, node = this.createMountPoint()) {
+    target.appendChild(node);
+    return node;
+  }
+  initMountPoints() {
+    this.initShadowMountPoints();
+  }
+  destroyMountPoints() {
+    for (const host of this.shadowHosts) {
+      for (const el of host.querySelectorAll(`[slot="${this.slotName}"][name="${this.slotName}"]`))
+        el.remove();
+    }
+    if (this.mount)
+      this.mount.remove();
+    this.resetMountId();
+  }
+  initShadowMountPoints() {
+    let host = this.host;
+    this.shadowHosts = [this.host];
+    while (host = host.getRootNode().host)
+      this.shadowHosts.push(host);
+    const { shadowHosts, slotName } = this;
+    const hosts = [...shadowHosts];
+    const root = hosts.pop();
+    if (!root.querySelector(`[slot="${slotName}"]`)) {
+      const div = document.createElement("div");
+      div.slot = slotName;
+      root.appendChild(div);
+    }
+    const container = root.querySelector(`[slot="${slotName}"]`);
+    this.appendTemplate(container);
+    hosts.forEach((host2) => this.appendTemplate(host2, this.createSlot(slotName)));
+  }
+  init() {
+    this.destroyMountPoints();
+    this.initMountPoints();
+    this.initialized = true;
+  }
+};
+
+// src/StripeBase.ts
+import { readonly } from "./lib/read-only.js";
+import { notify } from "./lib/notify.js";
+
+// node_modules/@stripe/stripe-js/dist/pure.esm.js
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+    _typeof = function(obj2) {
+      return typeof obj2;
+    };
+  } else {
+    _typeof = function(obj2) {
+      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
+    };
+  }
+  return _typeof(obj);
+}
+var V3_URL = "https://js.stripe.com/v3";
+var V3_URL_REGEX = /^https:\/\/js\.stripe\.com\/v3\/?(\?.*)?$/;
+var EXISTING_SCRIPT_MESSAGE = "loadStripe.setLoadParameters was called but an existing Stripe.js script already exists in the document; existing script parameters will be used";
+var findScript = function findScript2() {
+  var scripts = document.querySelectorAll('script[src^="'.concat(V3_URL, '"]'));
+  for (var i = 0; i < scripts.length; i++) {
+    var script = scripts[i];
+    if (!V3_URL_REGEX.test(script.src)) {
+      continue;
+    }
+    return script;
+  }
+  return null;
+};
+var injectScript = function injectScript2(params) {
+  var queryString = params && !params.advancedFraudSignals ? "?advancedFraudSignals=false" : "";
+  var script = document.createElement("script");
+  script.src = "".concat(V3_URL).concat(queryString);
+  var headOrBody = document.head || document.body;
+  if (!headOrBody) {
+    throw new Error("Expected document.body not to be null. Stripe.js requires a <body> element.");
+  }
+  headOrBody.appendChild(script);
+  return script;
+};
+var registerWrapper = function registerWrapper2(stripe, startTime) {
+  if (!stripe || !stripe._registerWrapper) {
+    return;
+  }
+  stripe._registerWrapper({
+    name: "stripe-js",
+    version: "1.23.0",
+    startTime
+  });
+};
+var stripePromise = null;
+var loadScript = function loadScript2(params) {
+  if (stripePromise !== null) {
+    return stripePromise;
+  }
+  stripePromise = new Promise(function(resolve, reject) {
+    if (typeof window === "undefined") {
+      resolve(null);
+      return;
+    }
+    if (window.Stripe && params) {
+      console.warn(EXISTING_SCRIPT_MESSAGE);
+    }
+    if (window.Stripe) {
+      resolve(window.Stripe);
+      return;
+    }
+    try {
+      var script = findScript();
+      if (script && params) {
+        console.warn(EXISTING_SCRIPT_MESSAGE);
+      } else if (!script) {
+        script = injectScript(params);
+      }
+      script.addEventListener("load", function() {
+        if (window.Stripe) {
+          resolve(window.Stripe);
+        } else {
+          reject(new Error("Stripe.js not available"));
+        }
+      });
+      script.addEventListener("error", function() {
+        reject(new Error("Failed to load Stripe.js"));
+      });
+    } catch (error) {
+      reject(error);
+      return;
+    }
+  });
+  return stripePromise;
+};
+var initStripe = function initStripe2(maybeStripe, args, startTime) {
+  if (maybeStripe === null) {
+    return null;
+  }
+  var stripe = maybeStripe.apply(void 0, args);
+  registerWrapper(stripe, startTime);
+  return stripe;
+};
+var validateLoadParams = function validateLoadParams2(params) {
+  var errorMessage = "invalid load parameters; expected object of shape\n\n    {advancedFraudSignals: boolean}\n\nbut received\n\n    ".concat(JSON.stringify(params), "\n");
+  if (params === null || _typeof(params) !== "object") {
+    throw new Error(errorMessage);
+  }
+  if (Object.keys(params).length === 1 && typeof params.advancedFraudSignals === "boolean") {
+    return params;
+  }
+  throw new Error(errorMessage);
+};
+var loadParams;
+var loadStripeCalled = false;
+var loadStripe = function loadStripe2() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  loadStripeCalled = true;
+  var startTime = Date.now();
+  return loadScript(loadParams).then(function(maybeStripe) {
+    return initStripe(maybeStripe, args, startTime);
+  });
+};
+loadStripe.setLoadParameters = function(params) {
+  if (loadStripeCalled) {
+    throw new Error("You cannot change load parameters after calling loadStripe");
+  }
+  loadParams = validateLoadParams(params);
+};
+
+// src/StripeBase.ts
+var StripeElementsError = class extends Error {
+  constructor(tag, message) {
+    super(`<${tag}>: ${message}`);
+    this.originalMessage = message;
+  }
+};
+function isStripeElementsError(error) {
+  return !!error && error instanceof StripeElementsError;
+}
+var errorConverter = {
+  toAttribute: (error) => !error ? null : isStripeElementsError(error) ? error.originalMessage : error.message || ""
+};
+var StripeBase = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.generate = "source";
+    this.showError = false;
+    this.paymentMethod = null;
+    this.source = null;
+    this.token = null;
+    this.element = null;
+    this.elements = null;
+    this.error = null;
+    this.focused = false;
+    this.ready = false;
+    this.stripe = null;
+    this.theme = "none";
+    this.precomputedStyle = getComputedStyle(this);
+    this.breadcrumb = new BreadcrumbController(this, {
+      slotName: `${this.constructor.is}-slot`
+    });
+  }
+  get stripeMountId() {
+    return this.breadcrumb.mountId;
+  }
+  get stripeMount() {
+    return this.breadcrumb.mount;
+  }
+  render() {
+    const { error, showError } = this;
+    const { slotName } = this.breadcrumb;
+    const errorMessage = isStripeElementsError(error) ? error.originalMessage : error?.message;
+    return html`
+      <div id="stripe" part="stripe">
+        <slot id="stripe-slot" name="${slotName}"></slot>
+      </div>
+
+      <output id="error"
+          for="stripe"
+          part="error"
+          ?hidden="${!showError}">
+        ${ifDefined(errorMessage)}
+      </output>
+    `;
+  }
+  updated(changed) {
+    super.updated?.(changed);
+    if (changed.has("error"))
+      this.errorChanged();
+    if (changed.has("publishableKey"))
+      this.init();
+    [...changed.keys()].forEach(this.representationChanged);
+  }
+  async disconnectedCallback() {
+    super.disconnectedCallback();
+    await this.unmount?.();
+  }
+  reset() {
+    this.element?.clear?.();
+    this.resetRepresentations();
+    readonly.set(this, { error: null });
+  }
+  blur() {
+    this.element?.blur();
+  }
+  focus() {
+    this.element?.focus();
+  }
+  createError(message) {
+    return new StripeElementsError(this.constructor.is, message);
+  }
+  errorChanged() {
+    this.resetRepresentations();
+    this.fireError(this.error);
+  }
+  fire(type, detail, opts) {
+    this.dispatchEvent(new CustomEvent(type, { detail, ...opts }));
+  }
+  fireError(error) {
+    this.dispatchEvent(new ErrorEvent("error", { error }));
+  }
+  getCSSCustomPropertyValue(propertyName) {
+    return this.precomputedStyle.getPropertyValue(propertyName);
+  }
+  async handleResponse(response) {
+    const { error = null, paymentMethod = null, source = null, token = null } = { ...response };
+    readonly.set(this, { error, paymentMethod, source, token });
+    await this.updateComplete;
+    if (error)
+      throw error;
     else
-        return response;
+      return response;
+  }
+  initElement() {
+    "abstract";
+  }
+  async init() {
+    await this.unmount();
+    await this.initStripe();
+    await this.initElement();
+    this.initElementListeners();
+    this.breadcrumb.init();
+    this.mount();
+  }
+  initElementListeners() {
+    if (!this.element)
+      return;
+    this.element.on("ready", this.onReady);
+    this.element.on("focus", this.onFocus);
+    this.element.on("blur", this.onBlur);
+  }
+  async initStripe() {
+    const { publishableKey } = this;
+    if (!publishableKey)
+      readonly.set(this, { elements: null, element: null, stripe: null });
+    else {
+      try {
+        const stripe = window.Stripe ? window.Stripe(publishableKey) : await loadStripe(publishableKey);
+        const elements = stripe?.elements();
+        readonly.set(this, { elements, error: null, stripe });
+      } catch (e) {
+        console.warn(e);
+        const error = this.createError("Stripe.js must be loaded first.");
+        readonly.set(this, { elements: null, error, stripe: null });
+      } finally {
+        await this.updateComplete;
+      }
+    }
+  }
+  mount() {
+    if (!this.breadcrumb.mount)
+      throw this.createError("Stripe Mount missing");
+    this.element?.mount(this.breadcrumb.mount);
+  }
+  async unmount() {
+    this.element?.unmount?.();
+    readonly.set(this, { element: null });
+    await this.updateComplete;
+  }
+  async onBlur() {
+    readonly.set(this, { focused: false });
+    await this.updateComplete;
+  }
+  async onFocus() {
+    readonly.set(this, { focused: true });
+    await this.updateComplete;
+  }
+  async onReady(event) {
+    readonly.set(this, { ready: true });
+    await this.updateComplete;
+    this.fire("ready", event);
+  }
+  async postRepresentation() {
+    const onError = (error) => readonly.set(this, { error });
+    const onSuccess = (success) => this.fire("success", success);
+    const token = this.token || void 0;
+    const source = this.source || void 0;
+    const paymentMethod = this.paymentMethod || void 0;
+    const body = JSON.stringify({ token, source, paymentMethod });
+    const headers = { "Content-Type": "application/json" };
+    const method = "POST";
+    return fetch(this.action, { body, headers, method }).then(throwBadResponse).then(onSuccess).catch(onError);
+  }
+  representationChanged(name) {
+    if (!isRepresentation(name))
+      return;
+    const value = this[name];
+    if (!value)
+      return;
+    this.fire(`${dash(name)}`, value);
+    if (this.action)
+      this.postRepresentation();
+  }
+  resetRepresentations() {
+    readonly.set(this, {
+      paymentMethod: null,
+      token: null,
+      source: null
+    });
+  }
+};
+__decorateClass([
+  property({ type: String })
+], StripeBase.prototype, "action", 2);
+__decorateClass([
+  property({ type: String, attribute: "client-secret" })
+], StripeBase.prototype, "clientSecret", 2);
+__decorateClass([
+  property({ type: String })
+], StripeBase.prototype, "generate", 2);
+__decorateClass([
+  notify,
+  property({ type: String, attribute: "publishable-key", reflect: true })
+], StripeBase.prototype, "publishableKey", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-error", reflect: true })
+], StripeBase.prototype, "showError", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object, attribute: "payment-method" })
+], StripeBase.prototype, "paymentMethod", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object })
+], StripeBase.prototype, "source", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object })
+], StripeBase.prototype, "token", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "element", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "elements", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Object, reflect: true, converter: errorConverter })
+], StripeBase.prototype, "error", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Boolean, reflect: true })
+], StripeBase.prototype, "focused", 2);
+__decorateClass([
+  readonly,
+  notify,
+  property({ type: Boolean, reflect: true })
+], StripeBase.prototype, "ready", 2);
+__decorateClass([
+  readonly,
+  property({ type: Object })
+], StripeBase.prototype, "stripe", 2);
+__decorateClass([
+  property()
+], StripeBase.prototype, "theme", 2);
+__decorateClass([
+  property({ attribute: "border-radius" })
+], StripeBase.prototype, "borderRadius", 2);
+__decorateClass([
+  property({ attribute: "color-background" })
+], StripeBase.prototype, "colorBackground", 2);
+__decorateClass([
+  property({ attribute: "color-danger" })
+], StripeBase.prototype, "colorDanger", 2);
+__decorateClass([
+  property({ attribute: "color-primary" })
+], StripeBase.prototype, "colorPrimary", 2);
+__decorateClass([
+  property({ attribute: "color-text" })
+], StripeBase.prototype, "colorText", 2);
+__decorateClass([
+  property({ attribute: "font-family" })
+], StripeBase.prototype, "fontFamily", 2);
+__decorateClass([
+  property({ attribute: "spacing-unit" })
+], StripeBase.prototype, "spacingUnit", 2);
+__decorateClass([
+  bound
+], StripeBase.prototype, "handleResponse", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onBlur", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onFocus", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "onReady", 1);
+__decorateClass([
+  bound
+], StripeBase.prototype, "representationChanged", 1);
+
+// src/stripe-payment-request.ts
+import { throwResponseError } from "./lib/stripe.js";
+
+// src/shared.css
+import { css } from "lit";
+var styles = css`[hidden] {
+  display: none !important;
 }
 
-const styles = css`#stripe {
+:host:not([hidden]) {
+  display: block;
   box-sizing: border-box;
+}
+
+#error {
+  font-family: sans-serif;
+  font-size: 14px;
+  padding-left: 42px;
+  padding-bottom: 10px;
+}
+`;
+var shared_default = styles;
+
+// src/stripe-payment-request.css
+import { css as css2 } from "lit";
+var styles2 = css2`#stripe {
+  box-sizing: border-box;
   min-width: var(--stripe-payment-request-element-min-width, 300px);
@@ -25,452 +577,287 @@ padding: var(--stripe-payment-request-element-padding, 8px 12px);
 `;
+var stripe_payment_request_default = styles2;
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _StripePaymentRequest_displayItems, _StripePaymentRequest_shippingOptions;
+// src/stripe-payment-request.ts
+import { readonly as readonly2 } from "./lib/read-only.js";
+import { notify as notify2 } from "./lib/notify.js";
+var Events = /* @__PURE__ */ ((Events2) => {
+  Events2["success"] = "success";
+  Events2["fail"] = "fail";
+  Events2["cancel"] = "cancel";
+  return Events2;
+})(Events || {});
 function isStripeDisplayItem(el) {
-    return el.tagName.toLowerCase() === 'stripe-display-item';
+  return el.tagName.toLowerCase() === "stripe-display-item";
 }
 function datasetToStripeDisplayItem({ dataset: { amount, label, pending } }) {
-    return {
-        label,
-        amount: parseInt(amount),
-        ...pending !== undefined && { pending: pending === 'true' ? true : false },
-    };
+  return {
+    label,
+    amount: parseInt(amount),
+    ...pending !== void 0 && { pending: pending === "true" ? true : false }
+  };
 }
 function isStripeShippingOption(el) {
-    return el.tagName.toLowerCase() === 'stripe-shipping-option';
+  return el.tagName.toLowerCase() === "stripe-shipping-option";
 }
-function datasetToStripeShippingOption({ dataset: { amount, ...rest } }) {
-    return {
-        amount: parseInt(amount),
-        ...rest,
-    };
+function datasetToStripeShippingOption({ dataset: { amount, detail, ...rest } }) {
+  return {
+    amount: parseInt(amount),
+    detail,
+    ...rest
+  };
 }
 function mapDataset(el) {
-    return (isStripeDisplayItem(el) ? datasetToStripeDisplayItem(el)
-        : datasetToStripeShippingOption(el));
+  return isStripeDisplayItem(el) ? datasetToStripeDisplayItem(el) : datasetToStripeShippingOption(el);
 }
-/**
- * Custom element wrapper for Stripe.js v3 Payment Request Buttons.
- *
- * 👨‍🎨 [Live Demo](https://bennypowers.dev/stripe-elements/?path=/docs/stripe-payment-request--enter-a-stripe-publishable-key) 👀
- *
- * ### 🧙‍♂️ Usage
- * If you prebuilt with Snowpack, load the module from your `web_modules` directory
- *
- * ```html
- * <script type="module" src="/web_modules/@power-elements/stripe-elements/stripe-payment-request.js"></script>
- * ```
- *
- * Alternatively, load the module from the unpkg CDN
- * ```html
- * <script type="module" src="https://unpkg.com/@power-elements/stripe-elements/stripe-payment-request.js?module"></script>
- * ```
- *
- * Then you can add the element to your page.
- *
- * ```html
- *
- * <stripe-payment-request id="payment-request"
- *     publishable-key="pk_test_XXXXXXXXXXXXXXXXXXXXXXXX"
- *     generate="token"
- *     action="/charges"
- *     country="CA"
- *     currency="cad"
- *     amount="1000"
- *     label="Ten Bones"
- *     request-payer-name
- *     request-payer-email
- *     request-payer-phone
- * ></stripe-payment-request>
- * ```
- *
- * See the demos for more comprehensive examples.
- *   - Using `<stripe-payment-request>` with [plain HTML and JavaScript](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vanilla--stripe-payment-request).
- *   - Using `<stripe-payment-request>` in a [LitElement](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-litelement--stripe-payment-request).
- *   - Using `<stripe-payment-request>` in a [Vue Component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-vue--stripe-payment-request).
- *   - Using `<stripe-payment-request>` in an [Angular component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-angular--stripe-payment-request).
- *   - Using `<stripe-payment-request>` in a [React component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-react--stripe-payment-request).
- *   - Using `<stripe-payment-request>` in a [Preact component](https://bennypowers.dev/stripe-elements/?path=/docs/framework-examples-preact--stripe-payment-request).
- *
- * @cssprop [--stripe-payment-request-element-min-width=`300px`] - min-width property of the container element
- * @cssprop [--stripe-payment-request-element-padding=`8px 12px`] - padding property of the container element
- * @cssprop [--stripe-payment-request-element-background=`white`] - background property of the container element
- *
- * @element stripe-payment-request
- * @extends StripeBase
- *
- * @fires 'unsupported' - When the element detects that the user agent cannot make a payment
- * @fires 'fail' - When a payment request fails
- * @fires 'cancel' - When a payment request is cancelled
- * @fires 'shippingaddresschange' - When the user chooses a different shipping address
- * @fires 'shippingoptionchange' - When the user chooses a different shipping option
- */
-let StripePaymentRequest = class StripePaymentRequest extends StripeBase {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether or not the device can make the payment request.
-         * @readonly
-         */
-        this.canMakePayment = null;
-        _StripePaymentRequest_displayItems.set(this, void 0);
-        /**
-         * Stripe PaymentIntent
-         */
-        this.paymentIntent = null;
-        /**
-         * Stripe PaymentRequest
-         */
-        this.paymentRequest = null;
-        /**
-         * If you might change the payment amount later (for example, after you have calcluated shipping costs), set this to true. Note that browsers treat this as a hint for how to display things, and not necessarily as something that will prevent submission.
-         */
-        this.pending = false;
-        _StripePaymentRequest_shippingOptions.set(this, void 0);
-        this.buttonType = 'default';
-        this.buttonTheme = 'dark';
+var _displayItems, _shippingOptions;
+var StripePaymentRequest = class extends StripeBase {
+  constructor() {
+    super(...arguments);
+    this.canMakePayment = null;
+    __privateAdd(this, _displayItems, void 0);
+    this.paymentIntent = null;
+    this.paymentRequest = null;
+    this.pending = false;
+    __privateAdd(this, _shippingOptions, void 0);
+    this.buttonType = "default";
+    this.buttonTheme = "dark";
+    this.complete = async (paymentResponse, confirmationError) => {
+      const { error: paymentResponseError = null } = { ...paymentResponse };
+      const status = paymentResponseError || confirmationError ? "fail" /* fail */ : "success" /* success */;
+      paymentResponse.complete(status);
+      this.fire(status, paymentResponse);
+      return confirmationError ? { error: confirmationError } : paymentResponse;
+    };
+  }
+  get displayItems() {
+    const value = __privateGet(this, _displayItems);
+    return Array.isArray(value) ? value : this.parseDatasets("stripe-display-item");
+  }
+  set displayItems(value) {
+    const oldValue = this.displayItems;
+    __privateSet(this, _displayItems, value);
+    this.requestUpdate("displayItems", oldValue);
+  }
+  get shippingOptions() {
+    const value = __privateGet(this, _shippingOptions);
+    return Array.isArray(value) ? value : this.parseDatasets("stripe-shipping-option");
+  }
+  set shippingOptions(value) {
+    const oldValue = this.shippingOptions;
+    __privateSet(this, _shippingOptions, value);
+    this.requestUpdate("shippingOptions", oldValue);
+  }
+  reset() {
+    super.reset();
+    readonly2.set(this, { paymentIntent: null });
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("generate"))
+      this.initPaymentRequestListeners();
+    if (changed.has("amount"))
+      this.updatePaymentRequest();
+  }
+  getStripePaymentRequestOptions() {
+    const {
+      country,
+      currency,
+      displayItems,
+      shippingOptions,
+      requestShipping,
+      requestPayerEmail,
+      requestPayerName,
+      requestPayerPhone,
+      label = "",
+      amount = 0
+    } = this;
+    const total = { label, amount };
+    return {
+      country,
+      currency,
+      displayItems,
+      requestPayerEmail,
+      requestPayerName,
+      requestPayerPhone,
+      requestShipping,
+      shippingOptions,
+      total
+    };
+  }
+  async initElement() {
+    await this.initPaymentRequest();
+    await this.initPaymentRequestListeners();
+    await this.initPaymentRequestButton();
+  }
+  async initPaymentRequest() {
+    if (!this.stripe)
+      return;
+    const stripePaymentRequestOptions = this.getStripePaymentRequestOptions();
+    const paymentRequest = this.stripe.paymentRequest(stripePaymentRequestOptions);
+    const canMakePayment = await paymentRequest.canMakePayment();
+    readonly2.set(this, { paymentRequest, canMakePayment });
+    await this.updateComplete;
+    if (!this.canMakePayment)
+      this.fire("unsupported");
+  }
+  async initPaymentRequestButton() {
+    const { buttonTheme: theme, buttonType: type, canMakePayment, paymentRequest } = this;
+    if (!canMakePayment || !this.elements)
+      return;
+    const propertyName = "--stripe-payment-request-button-height";
+    const height = this.getCSSCustomPropertyValue(propertyName) || "40px";
+    const style = { paymentRequestButton: { height, theme, type } };
+    const element = this.elements.create("paymentRequestButton", { paymentRequest, style });
+    readonly2.set(this, { element });
+    await this.updateComplete;
+  }
+  async initPaymentRequestListeners() {
+    if (!this.canMakePayment)
+      return;
+    this.paymentRequest.on("click", this.updatePaymentRequest);
+    this.paymentRequest.on("cancel", this.onCancel);
+    this.paymentRequest.on("shippingaddresschange", this.onShippingaddresschange);
+    this.paymentRequest.on("shippingoptionchange", this.onShippingoptionchange);
+    switch (this.generate) {
+      case "payment-method":
+        this.paymentRequest.on("paymentmethod", this.onPaymentResponse);
+        break;
+      case "source":
+        this.paymentRequest.on("source", this.onPaymentResponse);
+        break;
+      case "token":
+        this.paymentRequest.on("token", this.onPaymentResponse);
+        break;
     }
-    /**
-     * An array of DisplayItem objects. These objects are shown as line items in the browser’s payment interface. Note that the sum of the line item amounts does not need to add up to the total amount above.
-     */
-    get displayItems() {
-        const value = __classPrivateFieldGet(this, _StripePaymentRequest_displayItems, "f");
-        return (Array.isArray(value) ? value
-            : this.parseDatasets('stripe-display-item'));
-    }
-    set displayItems(value) {
-        const oldValue = this.displayItems;
-        __classPrivateFieldSet(this, _StripePaymentRequest_displayItems, value, "f");
-        this.requestUpdate('displayItems', oldValue);
-    }
-    /**
-     * An array of ShippingOption objects. The first shipping option listed appears in the browser payment interface as the default option.
-     */
-    get shippingOptions() {
-        const value = __classPrivateFieldGet(this, _StripePaymentRequest_shippingOptions, "f");
-        return Array.isArray(value) ? value : this.parseDatasets('stripe-shipping-option');
-    }
-    set shippingOptions(value) {
-        const oldValue = this.shippingOptions;
-        __classPrivateFieldSet(this, _StripePaymentRequest_shippingOptions, value, "f");
-        this.requestUpdate('shippingOptions', oldValue);
-    }
-    /* PUBLIC API */
-    reset() {
-        super.reset();
-        this.setReadOnlyProperties({ paymentIntent: null });
-    }
-    /* LIFECYCLE */
-    /** @inheritdoc */
-    updated(changed) {
-        super.updated(changed);
-        if (changed.has('generate'))
-            this.initPaymentRequestListeners();
-        if (changed.has('amount'))
-            this.updatePaymentRequest();
-    }
-    /* PRIVATE API */
-    /**
-     * Creates a StripePaymentRequestOptions object.
-     */
-    getStripePaymentRequestOptions() {
-        const { country, currency, displayItems, shippingOptions, requestShipping, requestPayerEmail, requestPayerName, requestPayerPhone, label = '', amount = 0, } = this;
-        const total = { label, amount };
-        return {
-            country,
-            currency,
-            displayItems,
-            requestPayerEmail,
-            requestPayerName,
-            requestPayerPhone,
-            requestShipping,
-            shippingOptions,
-            total,
-        };
-    }
-    /**
-     * Initializes the PaymentRequest Object.
-     */
-    async initElement() {
-        await this.initPaymentRequest();
-        await this.initPaymentRequestListeners();
-        await this.initPaymentRequestButton();
-    }
-    /**
-     * Initialized the `PaymentRequest` object.
-     */
-    async initPaymentRequest() {
-        if (!this.stripe)
-            return;
-        const stripePaymentRequestOptions = this.getStripePaymentRequestOptions();
-        const paymentRequest = this.stripe.paymentRequest(stripePaymentRequestOptions);
-        const canMakePayment = await paymentRequest.canMakePayment();
-        await this.setReadOnlyProperties({ paymentRequest, canMakePayment });
-        if (!this.canMakePayment)
-            this.fire('unsupported');
-    }
-    /**
-     * Creates Stripe Payment Request Element.
-     */
-    async initPaymentRequestButton() {
-        const { buttonTheme: theme, buttonType: type, canMakePayment, paymentRequest } = this;
-        if (!canMakePayment)
-            return;
-        const computedStyle = window.ShadyCSS ? undefined : getComputedStyle(this);
-        const propertyName = '--stripe-payment-request-button-height';
-        const height = this.getCSSCustomPropertyValue(propertyName, computedStyle) || '40px';
-        const style = { paymentRequestButton: { height, theme, type } };
-        const options = { paymentRequest, style };
-        const element = this.elements.create('paymentRequestButton', options);
-        await this.setReadOnlyProperties({ element });
-    }
-    /**
-     * Attaches listeners to the `PaymentRequest` object.
-     */
-    async initPaymentRequestListeners() {
-        if (!this.canMakePayment)
-            return;
-        // @ts-expect-error: the types are incomplete in @types/stripe.js
-        this.paymentRequest.on('click', this.updatePaymentRequest);
-        this.paymentRequest.on('cancel', this.onCancel);
-        this.paymentRequest.on('shippingaddresschange', this.onShippingaddresschange);
-        this.paymentRequest.on('shippingoptionchange', this.onShippingoptionchange);
-        switch (this.generate) {
-            case 'payment-method':
-                this.paymentRequest.on('paymentmethod', this.onPaymentResponse);
-                break;
-            case 'source':
-                this.paymentRequest.on('source', this.onPaymentResponse);
-                break;
-            case 'token':
-                this.paymentRequest.on('token', this.onPaymentResponse);
-                break;
-        }
-    }
-    /**
-     * Updates the PaymentRequests's values
-     */
-    async updatePaymentRequest() {
-        if (!this.paymentRequest)
-            return;
-        const { currency, total, displayItems, shippingOptions } = this.getStripePaymentRequestOptions();
-        this.paymentRequest.update({ currency, total, displayItems, shippingOptions });
-    }
-    /**
-     * Handle a `cancel` event
-     */
-    onCancel() {
-        this.fire("cancel" /* cancel */);
-    }
-    /**
-     * Completes the PaymentRequest.
-     */
-    async complete(paymentResponse, confirmationError) {
-        const { error: paymentResponseError = null } = { ...paymentResponse };
-        const status = (paymentResponseError || confirmationError) ? "fail" /* fail */ : "success" /* success */;
-        paymentResponse.complete(status);
-        this.fire(status, paymentResponse);
-        return confirmationError ? { error: confirmationError } : paymentResponse;
-    }
-    /**
-     * Handle a paymentResponse from Stripe
-     */
-    async onPaymentResponse(paymentResponse) {
-        const { clientSecret, confirmPaymentIntent, complete } = this;
-        const { error = null, paymentMethod = null, source = null, token = null, } = { ...paymentResponse };
-        await this.setReadOnlyProperties({ error, paymentMethod, source, token });
-        const isPaymentIntent = clientSecret && !error;
-        if (isPaymentIntent)
-            confirmPaymentIntent(paymentResponse);
-        else
-            complete(paymentResponse);
-    }
-    /**
-     * When a PaymentIntent client secret is set, confirm the payment
-     */
-    async confirmPaymentIntent(paymentResponse) {
-        const confirmCardData = { payment_method: this.paymentMethod.id };
-        const { error = null, paymentIntent = null } = await this.confirmCardPayment(confirmCardData, { handleActions: false })
-            .then(({ error: confirmationError }) => this.complete(paymentResponse, confirmationError)) // throws if first confirm errors
-            .then(throwResponseError)
-            .then(() => this.confirmCardPayment())
-            .then(throwResponseError)
-            .catch(error => ({ error })); // catch error from first confirm
-        await this.setReadOnlyProperties({ error, paymentIntent });
-    }
-    /**
-     * Stripe confirmCardPayment method
-     */
-    async confirmCardPayment(data, options) {
-        return this.stripe.confirmCardPayment(this.clientSecret, data, options);
-    }
-    onShippingaddresschange(originalEvent) {
-        this.fire('shippingaddresschange', originalEvent);
-    }
-    onShippingoptionchange(originalEvent) {
-        this.fire('shippingoptionchange', originalEvent);
-    }
-    parseDatasets(selector) {
-        const elements = [...this.querySelectorAll(selector)];
-        return (!elements.length ? []
-            : elements.map(mapDataset));
-    }
+  }
+  async updatePaymentRequest() {
+    if (!this.paymentRequest)
+      return;
+    const { currency, total, displayItems, shippingOptions } = this.getStripePaymentRequestOptions();
+    this.paymentRequest.update({ currency, total, displayItems, shippingOptions });
+  }
+  onCancel() {
+    this.fire("cancel" /* cancel */);
+  }
+  async onPaymentResponse(event) {
+    const {
+      error = null,
+      paymentMethod = null,
+      source = null,
+      token = null
+    } = { ...event };
+    readonly2.set(this, { error, paymentMethod, source, token });
+    const isPaymentIntent = this.clientSecret && !error;
+    if (isPaymentIntent)
+      this.confirmPaymentIntent(event);
+    else
+      this.complete(event);
+  }
+  async confirmPaymentIntent(paymentResponse) {
+    const confirmCardData = { payment_method: this.paymentMethod.id };
+    const { error = null, paymentIntent = null } = await this.confirmCardPayment(confirmCardData, { handleActions: false }).then(({ error: confirmationError }) => this.complete(paymentResponse, confirmationError)).then(throwResponseError).then(() => this.confirmCardPayment()).then(throwResponseError).catch((error2) => ({ error: error2 }));
+    readonly2.set(this, { error, paymentIntent });
+    await this.updateComplete;
+  }
+  async confirmCardPayment(data, options) {
+    return this.stripe.confirmCardPayment(this.clientSecret, data, options);
+  }
+  onShippingaddresschange(originalEvent) {
+    this.fire("shippingaddresschange", originalEvent);
+  }
+  onShippingoptionchange(originalEvent) {
+    this.fire("shippingoptionchange", originalEvent);
+  }
+  parseDatasets(selector) {
+    const elements = [...this.querySelectorAll(selector)];
+    return !elements.length ? [] : elements.map(mapDataset);
+  }
 };
-_StripePaymentRequest_displayItems = new WeakMap(), _StripePaymentRequest_shippingOptions = new WeakMap();
-StripePaymentRequest.is = 'stripe-payment-request';
+_displayItems = new WeakMap();
+_shippingOptions = new WeakMap();
+StripePaymentRequest.is = "stripe-payment-request";
 StripePaymentRequest.styles = [
-    styles$1,
-    styles,
+  shared_default,
+  stripe_payment_request_default
 ];
-__decorate([
-    slot,
-    __metadata("design:type", String)
-], StripePaymentRequest.prototype, "slotName", void 0);
-__decorate([
-    property({ type: Number, reflect: true }),
-    __metadata("design:type", Number)
-], StripePaymentRequest.prototype, "amount", void 0);
-__decorate([
-    property({
-        type: Boolean,
-        attribute: 'can-make-payment',
-        reflect: true,
-        readOnly: true,
-        notify: true,
-    }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "canMakePayment", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], StripePaymentRequest.prototype, "country", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "currency", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Object])
-], StripePaymentRequest.prototype, "displayItems", null);
-__decorate([
-    property({ type: String, reflect: true }),
-    __metadata("design:type", String)
-], StripePaymentRequest.prototype, "label", void 0);
-__decorate([
-    property({ type: Object, notify: true, readOnly: true, attribute: 'payment-intent' }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "paymentIntent", void 0);
-__decorate([
-    property({ type: Object, attribute: 'payment-request', readOnly: true }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "paymentRequest", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "pending", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'request-payer-email' }),
-    __metadata("design:type", Boolean)
-], StripePaymentRequest.prototype, "requestPayerEmail", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'request-payer-name' }),
-    __metadata("design:type", Boolean)
-], StripePaymentRequest.prototype, "requestPayerName", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'request-payer-phone' }),
-    __metadata("design:type", Boolean)
-], StripePaymentRequest.prototype, "requestPayerPhone", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'request-shipping' }),
-    __metadata("design:type", Boolean)
-], StripePaymentRequest.prototype, "requestShipping", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Object])
-], StripePaymentRequest.prototype, "shippingOptions", null);
-__decorate([
-    property({ type: String, attribute: 'button-type' }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "buttonType", void 0);
-__decorate([
-    property({ type: String, attribute: 'button-theme' }),
-    __metadata("design:type", Object)
-], StripePaymentRequest.prototype, "buttonTheme", void 0);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], StripePaymentRequest.prototype, "onCancel", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Object]),
-    __metadata("design:returntype", Promise)
-], StripePaymentRequest.prototype, "complete", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], StripePaymentRequest.prototype, "onPaymentResponse", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], StripePaymentRequest.prototype, "confirmPaymentIntent", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object, Object]),
-    __metadata("design:returntype", Promise)
-], StripePaymentRequest.prototype, "confirmCardPayment", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], StripePaymentRequest.prototype, "onShippingaddresschange", null);
-__decorate([
-    bound,
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], StripePaymentRequest.prototype, "onShippingoptionchange", null);
-StripePaymentRequest = __decorate([
-    customElement('stripe-payment-request')
+__decorateClass([
+  property2({ type: Number, reflect: true })
+], StripePaymentRequest.prototype, "amount", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Boolean, attribute: "can-make-payment", reflect: true })
+], StripePaymentRequest.prototype, "canMakePayment", 2);
+__decorateClass([
+  property2({ type: String })
+], StripePaymentRequest.prototype, "country", 2);
+__decorateClass([
+  property2({ type: String })
+], StripePaymentRequest.prototype, "currency", 2);
+__decorateClass([
+  property2({ type: Array })
+], StripePaymentRequest.prototype, "displayItems", 1);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], StripePaymentRequest.prototype, "label", 2);
+__decorateClass([
+  notify2,
+  readonly2,
+  property2({ type: Object, attribute: "payment-intent" })
+], StripePaymentRequest.prototype, "paymentIntent", 2);
+__decorateClass([
+  readonly2,
+  property2({ type: Object, attribute: "payment-request" })
+], StripePaymentRequest.prototype, "paymentRequest", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], StripePaymentRequest.prototype, "pending", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "request-payer-email" })
+], StripePaymentRequest.prototype, "requestPayerEmail", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "request-payer-name" })
+], StripePaymentRequest.prototype, "requestPayerName", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "request-payer-phone" })
+], StripePaymentRequest.prototype, "requestPayerPhone", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "request-shipping" })
+], StripePaymentRequest.prototype, "requestShipping", 2);
+__decorateClass([
+  property2({ type: Array })
+], StripePaymentRequest.prototype, "shippingOptions", 1);
+__decorateClass([
+  property2({ type: String, attribute: "button-type" })
+], StripePaymentRequest.prototype, "buttonType", 2);
+__decorateClass([
+  property2({ type: String, attribute: "button-theme" })
+], StripePaymentRequest.prototype, "buttonTheme", 2);
+__decorateClass([
+  bound2
+], StripePaymentRequest.prototype, "onCancel", 1);
+__decorateClass([
+  bound2
+], StripePaymentRequest.prototype, "onPaymentResponse", 1);
+__decorateClass([
+  bound2
+], StripePaymentRequest.prototype, "confirmPaymentIntent", 1);
+__decorateClass([
+  bound2
+], StripePaymentRequest.prototype, "confirmCardPayment", 1);
+__decorateClass([
+  bound2
+], StripePaymentRequest.prototype, "onShippingaddresschange", 1);
+__decorateClass([
+  bound2
+], StripePaymentRequest.prototype, "onShippingoptionchange", 1);
+StripePaymentRequest = __decorateClass([
+  customElement("stripe-payment-request")
 ], StripePaymentRequest);
-/**
- * Allows narrowing class field type
- * @see https://dev.to/bennypowers/narrowing-the-type-of-class-accessors-bi8
- */
-function slot(proto, key) {
-    Object.defineProperty(proto, key, {
-        get() { return "stripe-payment-request-slot" /* 'stripe-payment-request' */; },
-    });
-}
-
-export { StripePaymentRequest, isStripeDisplayItem, isStripeShippingOption };
+export {
+  Events,
+  StripePaymentRequest,
+  isStripeDisplayItem,
+  isStripeShippingOption
+};
 //# sourceMappingURL=stripe-payment-request.js.map

web-test-runner.config.js

@@ -12,4 +12,4 @@ // @ts-check
   nodeResolve: {
-    exportConditions: ['default', 'esbuild', 'import'],
-    extensions: ['.mjs', '.js', '.ts', '.css', '.graphql'],
+    exportConditions: ['esbuild', 'default', 'import'],
+    extensions: ['.ts', '.mjs', '.js', '.css', '.graphql'],
   },
@@ -16,0 +16,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

370741

increased by12.89%

Dependency count

7

decreased by-36.36%

Dev dependency count

45

decreased by-18.18%

Number of package files

56

increased by80.65%

Lines of code

4531

increased by9.31%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

35

decreased by-88.01%

Number of medium supply chain risk alerts

4

increased by300%

Dependency changes

• + Added@stripe/stripe-js@^1.23.0

• + Added@stripe/stripe-js@1.54.2(transitive)

• - Removed@babel/runtime@^7.15.4

• - Removed@lavadrop/pick@^0.8.0

• - Removed@morbidick/lit-element-notify@1.1.1

• - Removed@typed/curry@^1.0.1

• - Removed@types/stripe-v3@^3.1.26

• - Removed@babel/runtime@7.26.7(transitive)

• - Removed@lavadrop/pick@0.8.0(transitive)

• - Removed@morbidick/lit-element-notify@1.1.1(transitive)

• - Removed@typed/curry@1.0.1(transitive)

• - Removed@types/stripe-v3@3.1.33(transitive)

• - Removedlit-element@2.5.1(transitive)

• - Removedlit-html@1.4.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updatedlit@^2.1.3