recur-tw 0.21.2 → 0.21.3

package/dist/index.d.cts

@@ -718,7 +718,7 @@ interface RecurContextValue {
    * ```tsx
    * const { redirectToCheckout } = useRecur();
    * await redirectToCheckout({
-   *   productId: 'prod_xxx',
+   *   productId: 'cmfxq8n2a0001l8yz3k5p9t7d',
    *   successUrl: `${window.location.origin}/success`,
    *   cancelUrl: `${window.location.origin}/cancel`,
    * });
@@ -735,9 +735,9 @@ interface RecurContextValue {
    * ```tsx
    * const { createCheckoutSession } = useRecur();
    * const session = await createCheckoutSession({
-   *   productId: 'prod_xxx',
-   *   successUrl: '/success',
-   *   cancelUrl: '/cancel',
+   *   productId: 'cmfxq8n2a0001l8yz3k5p9t7d',
+   *   successUrl: `${window.location.origin}/success`,
+   *   cancelUrl: `${window.location.origin}/cancel`,
    * });
    * window.open(session.url, '_blank');
    * ```
@@ -870,7 +870,7 @@ interface Entitlement {
   product: string;
   /**
    * Product ID
-   * @example 'prod_abc123'
+   * @example 'cmfxq8n2a0001l8yz3k5p9t7d'
    */
   productId: string;
   /**
@@ -938,7 +938,7 @@ type CheckTarget = string | {
 interface CheckOptions {
   /**
    * Product slug or ID to check access for
-   * @example 'pro-plan' or 'prod_abc123'
+   * @example 'pro-plan' (slug) or 'cmfxq8n2a0001l8yz3k5p9t7d' (CUID id)
    */
   product: string;
 }
@@ -1092,7 +1092,7 @@ interface UseCustomerResult {
    * Call this after checkout to update permissions
    *
    * @example
-   * await checkout({ productId: 'prod_xxx' });
+   * await checkout({ productId: 'cmfxq8n2a0001l8yz3k5p9t7d' });
    * await refetch(); // Update entitlements
    */
   refetch: () => Promise<void>;
@@ -1124,6 +1124,7 @@ declare class RecurPaymentForm extends HTMLElement {
   private _couponCode;
   private _couponLoading;
   private _couponError;
+  private _submitState;
   private _appliedCoupon;
   constructor();
   connectedCallback(): void;
@@ -1136,6 +1137,13 @@ declare class RecurPaymentForm extends HTMLElement {
   private render;
   private renderShadowDOM;
   private renderLightDOM;
+  /**
+   * Fill the stylesheet lit deliberately leaves empty.
+   *
+   * Safe precisely because the template interpolates nothing into that
+   * element: there are no marker nodes inside it to eject.
+   */
+  private applyStyles;
   private getCustomStyles;
   private updateCustomStyles;
   private isTestMode;
@@ -1149,14 +1157,6 @@ declare class RecurPaymentForm extends HTMLElement {
   private handleCouponInputChange;
   private handleCouponKeydown;
   private updateApplyButtonState;
-  private updateCouponSectionDOM;
-  private getCouponTriggerHTML;
-  private getCouponInputHTML;
-  private getCouponAppliedHTML;
-  private bindCouponTriggerEvents;
-  private bindCouponInputEvents;
-  private bindCouponAppliedEvents;
-  private updateOrderSummaryDOM;
   private applyCoupon;
   private removeCoupon;
   /**
@@ -1186,11 +1186,17 @@ declare class RecurPaymentForm extends HTMLElement {
    */
   private isCardVerificationMode;
   private getSubmitLabel;
-  /** Sync the verification notice + submit label with the current amount. */
-  private updateVerificationUI;
   private renderCardFields;
   private hideCardSkeletons;
   private renderActions;
+  /**
+   * The submit button's content belongs to lit like everything else in the light
+   * DOM: writing it by hand detaches the label lit renders into, and a later
+   * full render (test-card banner, einvoice change) then either throws or keeps
+   * updating a node nobody can see. The button's `disabled` and `loading` class
+   * stay imperative — the template sets them statically, so lit never rewrites them.
+   */
+  private renderSubmitContent;
   initializePayment(sdkToken: string, environment: 'SANDBOX' | 'PRODUCTION'): Promise<UniPaymentInstance | null>;
   private setupFormSubmission;
   private setButtonLoading;
@@ -1734,7 +1740,7 @@ interface PromoCodeInputProps {
  *   promo={promo}
  *   unstyled
  *   className="flex flex-col gap-1"
- *   inputClassName="border rounded px-3 py-2 uppercase"
+ *   inputClassName="border rounded px-3 py-2"
  *   buttonClassName="bg-blue-500 text-white px-4 py-2 rounded"
  *   messageClassName="text-sm"
  * />

package/dist/index.d.ts

@@ -718,7 +718,7 @@ interface RecurContextValue {
    * ```tsx
    * const { redirectToCheckout } = useRecur();
    * await redirectToCheckout({
-   *   productId: 'prod_xxx',
+   *   productId: 'cmfxq8n2a0001l8yz3k5p9t7d',
    *   successUrl: `${window.location.origin}/success`,
    *   cancelUrl: `${window.location.origin}/cancel`,
    * });
@@ -735,9 +735,9 @@ interface RecurContextValue {
    * ```tsx
    * const { createCheckoutSession } = useRecur();
    * const session = await createCheckoutSession({
-   *   productId: 'prod_xxx',
-   *   successUrl: '/success',
-   *   cancelUrl: '/cancel',
+   *   productId: 'cmfxq8n2a0001l8yz3k5p9t7d',
+   *   successUrl: `${window.location.origin}/success`,
+   *   cancelUrl: `${window.location.origin}/cancel`,
    * });
    * window.open(session.url, '_blank');
    * ```
@@ -870,7 +870,7 @@ interface Entitlement {
   product: string;
   /**
    * Product ID
-   * @example 'prod_abc123'
+   * @example 'cmfxq8n2a0001l8yz3k5p9t7d'
    */
   productId: string;
   /**
@@ -938,7 +938,7 @@ type CheckTarget = string | {
 interface CheckOptions {
   /**
    * Product slug or ID to check access for
-   * @example 'pro-plan' or 'prod_abc123'
+   * @example 'pro-plan' (slug) or 'cmfxq8n2a0001l8yz3k5p9t7d' (CUID id)
    */
   product: string;
 }
@@ -1092,7 +1092,7 @@ interface UseCustomerResult {
    * Call this after checkout to update permissions
    *
    * @example
-   * await checkout({ productId: 'prod_xxx' });
+   * await checkout({ productId: 'cmfxq8n2a0001l8yz3k5p9t7d' });
    * await refetch(); // Update entitlements
    */
   refetch: () => Promise<void>;
@@ -1124,6 +1124,7 @@ declare class RecurPaymentForm extends HTMLElement {
   private _couponCode;
   private _couponLoading;
   private _couponError;
+  private _submitState;
   private _appliedCoupon;
   constructor();
   connectedCallback(): void;
@@ -1136,6 +1137,13 @@ declare class RecurPaymentForm extends HTMLElement {
   private render;
   private renderShadowDOM;
   private renderLightDOM;
+  /**
+   * Fill the stylesheet lit deliberately leaves empty.
+   *
+   * Safe precisely because the template interpolates nothing into that
+   * element: there are no marker nodes inside it to eject.
+   */
+  private applyStyles;
   private getCustomStyles;
   private updateCustomStyles;
   private isTestMode;
@@ -1149,14 +1157,6 @@ declare class RecurPaymentForm extends HTMLElement {
   private handleCouponInputChange;
   private handleCouponKeydown;
   private updateApplyButtonState;
-  private updateCouponSectionDOM;
-  private getCouponTriggerHTML;
-  private getCouponInputHTML;
-  private getCouponAppliedHTML;
-  private bindCouponTriggerEvents;
-  private bindCouponInputEvents;
-  private bindCouponAppliedEvents;
-  private updateOrderSummaryDOM;
   private applyCoupon;
   private removeCoupon;
   /**
@@ -1186,11 +1186,17 @@ declare class RecurPaymentForm extends HTMLElement {
    */
   private isCardVerificationMode;
   private getSubmitLabel;
-  /** Sync the verification notice + submit label with the current amount. */
-  private updateVerificationUI;
   private renderCardFields;
   private hideCardSkeletons;
   private renderActions;
+  /**
+   * The submit button's content belongs to lit like everything else in the light
+   * DOM: writing it by hand detaches the label lit renders into, and a later
+   * full render (test-card banner, einvoice change) then either throws or keeps
+   * updating a node nobody can see. The button's `disabled` and `loading` class
+   * stay imperative — the template sets them statically, so lit never rewrites them.
+   */
+  private renderSubmitContent;
   initializePayment(sdkToken: string, environment: 'SANDBOX' | 'PRODUCTION'): Promise<UniPaymentInstance | null>;
   private setupFormSubmission;
   private setButtonLoading;
@@ -1734,7 +1740,7 @@ interface PromoCodeInputProps {
  *   promo={promo}
  *   unstyled
  *   className="flex flex-col gap-1"
- *   inputClassName="border rounded px-3 py-2 uppercase"
+ *   inputClassName="border rounded px-3 py-2"
  *   buttonClassName="bg-blue-500 text-white px-4 py-2 rounded"
  *   messageClassName="text-sm"
  * />