@mj-biz-apps/orders-ng 5.32.0 → 5.33.0

package/dist/checkout-element/main.js

@@ -39770,6 +39770,33 @@ var TurnstileWidget = class {
   }
 };
 
+// dist/lib/checkout-widget/checkout-renewal.js
+function ReadRenewalPayment(response) {
+  if (!response || typeof response !== "object")
+    return null;
+  const renewal = response["RenewalPayment"];
+  if (!renewal || typeof renewal !== "object")
+    return null;
+  const r = renewal;
+  const amount = Number(r["Amount"]);
+  if (typeof r["OrderNumber"] !== "string" || !r["OrderNumber"] || !Number.isFinite(amount) || amount <= 0)
+    return null;
+  return {
+    OrderNumber: r["OrderNumber"],
+    Amount: Math.round(amount * 100) / 100,
+    Description: typeof r["Description"] === "string" ? r["Description"] : "",
+    SubscriptionNumber: typeof r["SubscriptionNumber"] === "string" && r["SubscriptionNumber"] ? r["SubscriptionNumber"] : null,
+    DueDate: typeof r["DueDate"] === "string" && r["DueDate"] ? r["DueDate"] : null
+  };
+}
+function FormatRenewalAmount(amount, currency) {
+  const value = amount.toFixed(2);
+  return currency ? `${value} ${currency.toUpperCase()}` : value;
+}
+function RenewalPaidMessage(view) {
+  return `Thank you. Renewal ${view.OrderNumber} is paid, and the card you used will be charged for future renewals.`;
+}
+
 // dist/lib/checkout-widget/checkout-public-host.component.js
 var _c0 = (a0) => [a0];
 function CheckoutPublicHostComponent_Conditional_1_Template(rf, ctx) {
@@ -39786,7 +39813,7 @@ function CheckoutPublicHostComponent_Conditional_1_Template(rf, ctx) {
 }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "p", 8);
+    \u0275\u0275elementStart(0, "p", 9);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
   }
@@ -39798,7 +39825,7 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template(rf, ct
 }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_8_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "p", 12);
+    \u0275\u0275elementStart(0, "p", 13);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
   }
@@ -39811,14 +39838,14 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_8_Template(rf, ct
 }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "p", 10);
+    \u0275\u0275elementStart(0, "p", 11);
     \u0275\u0275text(1, "Setting up your account\u2026");
     \u0275\u0275elementEnd();
   }
 }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_3_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "p", 15);
+    \u0275\u0275elementStart(0, "p", 16);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
   }
@@ -39830,7 +39857,7 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_3_
 }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_10_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "p", 20);
+    \u0275\u0275elementStart(0, "p", 21);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
   }
@@ -39843,42 +39870,42 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_10
 function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template(rf, ctx) {
   if (rf & 1) {
     const _r2 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "form", 13);
+    \u0275\u0275elementStart(0, "form", 14);
     \u0275\u0275listener("submit", function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template_form_submit_0_listener($event) {
       \u0275\u0275restoreView(_r2);
       const ctx_r0 = \u0275\u0275nextContext(2);
       $event.preventDefault();
       return \u0275\u0275resetView(ctx_r0.submitPassword());
     });
-    \u0275\u0275elementStart(1, "h2", 14);
+    \u0275\u0275elementStart(1, "h2", 15);
     \u0275\u0275text(2, "Set a password for your account");
     \u0275\u0275elementEnd();
-    \u0275\u0275conditionalCreate(3, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_3_Template, 2, 1, "p", 15);
-    \u0275\u0275elementStart(4, "label", 16);
+    \u0275\u0275conditionalCreate(3, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_3_Template, 2, 1, "p", 16);
+    \u0275\u0275elementStart(4, "label", 17);
     \u0275\u0275text(5, "Password");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(6, "input", 17);
+    \u0275\u0275elementStart(6, "input", 18);
     \u0275\u0275listener("input", function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template_input_input_6_listener($event) {
       \u0275\u0275restoreView(_r2);
       const ctx_r0 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r0.password = $event.target.value);
     });
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(7, "label", 18);
+    \u0275\u0275elementStart(7, "label", 19);
     \u0275\u0275text(8, "Confirm password");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(9, "input", 19);
+    \u0275\u0275elementStart(9, "input", 20);
     \u0275\u0275listener("input", function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template_input_input_9_listener($event) {
       \u0275\u0275restoreView(_r2);
       const ctx_r0 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r0.passwordConfirmation = $event.target.value);
     });
     \u0275\u0275elementEnd();
-    \u0275\u0275conditionalCreate(10, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_10_Template, 2, 1, "p", 20);
-    \u0275\u0275elementStart(11, "button", 21);
+    \u0275\u0275conditionalCreate(10, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Conditional_10_Template, 2, 1, "p", 21);
+    \u0275\u0275elementStart(11, "button", 22);
     \u0275\u0275text(12);
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(13, "button", 22);
+    \u0275\u0275elementStart(13, "button", 23);
     \u0275\u0275listener("click", function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template_button_click_13_listener() {
       \u0275\u0275restoreView(_r2);
       const ctx_r0 = \u0275\u0275nextContext(2);
@@ -39908,7 +39935,7 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template(rf, c
 function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Conditional_3_Template(rf, ctx) {
   if (rf & 1) {
     const _r4 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "button", 26);
+    \u0275\u0275elementStart(0, "button", 27);
     \u0275\u0275listener("click", function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Conditional_3_Template_button_click_0_listener() {
       \u0275\u0275restoreView(_r4);
       const ctx_r0 = \u0275\u0275nextContext(4);
@@ -39921,7 +39948,7 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_
 function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Template(rf, ctx) {
   if (rf & 1) {
     const _r3 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "div", 23)(1, "button", 24);
+    \u0275\u0275elementStart(0, "div", 24)(1, "button", 25);
     \u0275\u0275listener("click", function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Template_button_click_1_listener() {
       \u0275\u0275restoreView(_r3);
       const ctx_r0 = \u0275\u0275nextContext(3);
@@ -39929,7 +39956,7 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_
     });
     \u0275\u0275text(2, "Try again");
     \u0275\u0275elementEnd();
-    \u0275\u0275conditionalCreate(3, CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Conditional_3_Template, 2, 0, "button", 25);
+    \u0275\u0275conditionalCreate(3, CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Conditional_3_Template, 2, 0, "button", 26);
     \u0275\u0275elementEnd();
   }
   if (rf & 2) {
@@ -39940,10 +39967,10 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_
 }
 function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "p", 10);
+    \u0275\u0275elementStart(0, "p", 11);
     \u0275\u0275text(1);
     \u0275\u0275elementEnd();
-    \u0275\u0275conditionalCreate(2, CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Template, 4, 1, "div", 23);
+    \u0275\u0275conditionalCreate(2, CheckoutPublicHostComponent_Conditional_2_Conditional_11_Conditional_2_Template, 4, 1, "div", 24);
   }
   if (rf & 2) {
     const ctx_r0 = \u0275\u0275nextContext(2);
@@ -39955,18 +39982,18 @@ function CheckoutPublicHostComponent_Conditional_2_Conditional_11_Template(rf, c
 }
 function CheckoutPublicHostComponent_Conditional_2_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275elementStart(0, "div", 2)(1, "div", 5);
+    \u0275\u0275elementStart(0, "div", 2)(1, "div", 6);
     \u0275\u0275text(2, "\u2713");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(3, "h1", 6);
+    \u0275\u0275elementStart(3, "h1", 7);
     \u0275\u0275text(4, "You're all set");
     \u0275\u0275elementEnd();
-    \u0275\u0275elementStart(5, "p", 7);
+    \u0275\u0275elementStart(5, "p", 8);
     \u0275\u0275text(6);
     \u0275\u0275elementEnd();
-    \u0275\u0275conditionalCreate(7, CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template, 2, 1, "p", 8);
-    \u0275\u0275conditionalCreate(8, CheckoutPublicHostComponent_Conditional_2_Conditional_8_Template, 2, 3, "p", 9);
-    \u0275\u0275conditionalCreate(9, CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template, 2, 0, "p", 10)(10, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template, 15, 7, "form", 11)(11, CheckoutPublicHostComponent_Conditional_2_Conditional_11_Template, 3, 2);
+    \u0275\u0275conditionalCreate(7, CheckoutPublicHostComponent_Conditional_2_Conditional_7_Template, 2, 1, "p", 9);
+    \u0275\u0275conditionalCreate(8, CheckoutPublicHostComponent_Conditional_2_Conditional_8_Template, 2, 3, "p", 10);
+    \u0275\u0275conditionalCreate(9, CheckoutPublicHostComponent_Conditional_2_Conditional_9_Template, 2, 0, "p", 11)(10, CheckoutPublicHostComponent_Conditional_2_Conditional_10_Template, 15, 7, "form", 12)(11, CheckoutPublicHostComponent_Conditional_2_Conditional_11_Template, 3, 2);
     \u0275\u0275elementEnd();
   }
   if (rf & 2) {
@@ -39988,24 +40015,152 @@ function CheckoutPublicHostComponent_Conditional_3_Template(rf, ctx) {
     \u0275\u0275elementEnd();
   }
 }
-function CheckoutPublicHostComponent_Conditional_4_For_1_Template(rf, ctx) {
+function CheckoutPublicHostComponent_Conditional_4_Conditional_6_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 32)(1, "dt");
+    \u0275\u0275text(2, "Renewal of");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(3, "dd");
+    \u0275\u0275text(4);
+    \u0275\u0275elementEnd()();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(2);
+    \u0275\u0275advance(4);
+    \u0275\u0275textInterpolate(ctx_r0.renewal.Description);
+  }
+}
+function CheckoutPublicHostComponent_Conditional_4_Conditional_7_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 32)(1, "dt");
+    \u0275\u0275text(2, "Subscription");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(3, "dd");
+    \u0275\u0275text(4);
+    \u0275\u0275elementEnd()();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(2);
+    \u0275\u0275advance(4);
+    \u0275\u0275textInterpolate(ctx_r0.renewal.SubscriptionNumber);
+  }
+}
+function CheckoutPublicHostComponent_Conditional_4_Conditional_13_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 32)(1, "dt");
+    \u0275\u0275text(2, "Due");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(3, "dd");
+    \u0275\u0275text(4);
+    \u0275\u0275elementEnd()();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(2);
+    \u0275\u0275advance(4);
+    \u0275\u0275textInterpolate(ctx_r0.renewal.DueDate);
+  }
+}
+function CheckoutPublicHostComponent_Conditional_4_Conditional_19_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "label", 36);
+    \u0275\u0275text(1, "Card");
+    \u0275\u0275elementEnd();
+    \u0275\u0275element(2, "div", 37);
+  }
+}
+function CheckoutPublicHostComponent_Conditional_4_Conditional_22_Template(rf, ctx) {
+  if (rf & 1) {
+    \u0275\u0275elementStart(0, "div", 1);
+    \u0275\u0275text(1);
+    \u0275\u0275elementEnd();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext(2);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate(ctx_r0.errorMessage);
+  }
+}
+function CheckoutPublicHostComponent_Conditional_4_Template(rf, ctx) {
   if (rf & 1) {
     const _r5 = \u0275\u0275getCurrentView();
-    \u0275\u0275elementStart(0, "mj-checkout-widget", 28);
-    \u0275\u0275listener("promotionCodeApplied", function CheckoutPublicHostComponent_Conditional_4_For_1_Template_mj_checkout_widget_promotionCodeApplied_0_listener($event) {
+    \u0275\u0275elementStart(0, "form", 28);
+    \u0275\u0275listener("submit", function CheckoutPublicHostComponent_Conditional_4_Template_form_submit_0_listener($event) {
       \u0275\u0275restoreView(_r5);
+      const ctx_r0 = \u0275\u0275nextContext();
+      $event.preventDefault();
+      return \u0275\u0275resetView(ctx_r0.payRenewal());
+    });
+    \u0275\u0275elementStart(1, "h1", 29);
+    \u0275\u0275text(2, "Renew your subscription");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(3, "p", 30);
+    \u0275\u0275text(4, "Your saved card could not be charged. Pay with a new card to keep your subscription active.");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(5, "dl", 31);
+    \u0275\u0275conditionalCreate(6, CheckoutPublicHostComponent_Conditional_4_Conditional_6_Template, 5, 1, "div", 32);
+    \u0275\u0275conditionalCreate(7, CheckoutPublicHostComponent_Conditional_4_Conditional_7_Template, 5, 1, "div", 32);
+    \u0275\u0275elementStart(8, "div", 32)(9, "dt");
+    \u0275\u0275text(10, "Renewal order");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(11, "dd");
+    \u0275\u0275text(12);
+    \u0275\u0275elementEnd()();
+    \u0275\u0275conditionalCreate(13, CheckoutPublicHostComponent_Conditional_4_Conditional_13_Template, 5, 1, "div", 32);
+    \u0275\u0275elementStart(14, "div", 33)(15, "dt");
+    \u0275\u0275text(16, "Amount due");
+    \u0275\u0275elementEnd();
+    \u0275\u0275elementStart(17, "dd");
+    \u0275\u0275text(18);
+    \u0275\u0275elementEnd()()();
+    \u0275\u0275conditionalCreate(19, CheckoutPublicHostComponent_Conditional_4_Conditional_19_Template, 3, 0);
+    \u0275\u0275elementStart(20, "p", 34);
+    \u0275\u0275text(21, "The card you pay with will be charged for future renewals.");
+    \u0275\u0275elementEnd();
+    \u0275\u0275conditionalCreate(22, CheckoutPublicHostComponent_Conditional_4_Conditional_22_Template, 2, 1, "div", 1);
+    \u0275\u0275elementStart(23, "button", 35);
+    \u0275\u0275text(24);
+    \u0275\u0275elementEnd()();
+  }
+  if (rf & 2) {
+    const ctx_r0 = \u0275\u0275nextContext();
+    \u0275\u0275advance(6);
+    \u0275\u0275conditional(ctx_r0.renewal.Description ? 6 : -1);
+    \u0275\u0275advance();
+    \u0275\u0275conditional(ctx_r0.renewal.SubscriptionNumber ? 7 : -1);
+    \u0275\u0275advance(5);
+    \u0275\u0275textInterpolate(ctx_r0.renewal.OrderNumber);
+    \u0275\u0275advance();
+    \u0275\u0275conditional(ctx_r0.renewal.DueDate ? 13 : -1);
+    \u0275\u0275advance(5);
+    \u0275\u0275textInterpolate(ctx_r0.renewalAmount);
+    \u0275\u0275advance();
+    \u0275\u0275conditional(ctx_r0.config.stripePublishableKey ? 19 : -1);
+    \u0275\u0275advance(3);
+    \u0275\u0275conditional(ctx_r0.errorMessage ? 22 : -1);
+    \u0275\u0275advance();
+    \u0275\u0275property("disabled", ctx_r0.processing || !ctx_r0.isPaymentReady);
+    \u0275\u0275advance();
+    \u0275\u0275textInterpolate1(" ", ctx_r0.processing ? "Processing\u2026" : "Pay " + ctx_r0.renewalAmount, " ");
+  }
+}
+function CheckoutPublicHostComponent_Conditional_5_For_1_Template(rf, ctx) {
+  if (rf & 1) {
+    const _r6 = \u0275\u0275getCurrentView();
+    \u0275\u0275elementStart(0, "mj-checkout-widget", 39);
+    \u0275\u0275listener("promotionCodeApplied", function CheckoutPublicHostComponent_Conditional_5_For_1_Template_mj_checkout_widget_promotionCodeApplied_0_listener($event) {
+      \u0275\u0275restoreView(_r6);
       const ctx_r0 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r0.onPromotionCodeApplied($event));
-    })("submitted", function CheckoutPublicHostComponent_Conditional_4_For_1_Template_mj_checkout_widget_submitted_0_listener($event) {
-      \u0275\u0275restoreView(_r5);
+    })("submitted", function CheckoutPublicHostComponent_Conditional_5_For_1_Template_mj_checkout_widget_submitted_0_listener($event) {
+      \u0275\u0275restoreView(_r6);
       const ctx_r0 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r0.onSubmitted($event));
-    })("cancelled", function CheckoutPublicHostComponent_Conditional_4_For_1_Template_mj_checkout_widget_cancelled_0_listener() {
-      \u0275\u0275restoreView(_r5);
+    })("cancelled", function CheckoutPublicHostComponent_Conditional_5_For_1_Template_mj_checkout_widget_cancelled_0_listener() {
+      \u0275\u0275restoreView(_r6);
       const ctx_r0 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r0.onCancelled());
-    })("quoteInvalidated", function CheckoutPublicHostComponent_Conditional_4_For_1_Template_mj_checkout_widget_quoteInvalidated_0_listener() {
-      \u0275\u0275restoreView(_r5);
+    })("quoteInvalidated", function CheckoutPublicHostComponent_Conditional_5_For_1_Template_mj_checkout_widget_quoteInvalidated_0_listener() {
+      \u0275\u0275restoreView(_r6);
       const ctx_r0 = \u0275\u0275nextContext(2);
       return \u0275\u0275resetView(ctx_r0.onQuoteInvalidated());
     });
@@ -40016,9 +40171,9 @@ function CheckoutPublicHostComponent_Conditional_4_For_1_Template(rf, ctx) {
     \u0275\u0275property("config", ctx_r0.config)("distributionSlug", ctx_r0.slug)("sessionKey", ctx_r0.sessionKey)("isProcessing", ctx_r0.processing)("isPaymentReady", ctx_r0.isPaymentReady)("stripePaymentMethodId", ctx_r0.stripePaymentMethodId)("prefillEmail", ctx_r0.prefillEmail)("errorMessage", ctx_r0.errorMessage)("appliedPromotion", ctx_r0.appliedPromotion)("serverPricedTotal", ctx_r0.serverPricedTotal)("promotionError", ctx_r0.promotionError)("quotedTotal", ctx_r0.quotedTotal)("quotedTax", ctx_r0.quotedTax);
   }
 }
-function CheckoutPublicHostComponent_Conditional_4_Template(rf, ctx) {
+function CheckoutPublicHostComponent_Conditional_5_Template(rf, ctx) {
   if (rf & 1) {
-    \u0275\u0275repeaterCreate(0, CheckoutPublicHostComponent_Conditional_4_For_1_Template, 1, 13, "mj-checkout-widget", 27, \u0275\u0275repeaterTrackByIdentity);
+    \u0275\u0275repeaterCreate(0, CheckoutPublicHostComponent_Conditional_5_For_1_Template, 1, 13, "mj-checkout-widget", 38, \u0275\u0275repeaterTrackByIdentity);
   }
   if (rf & 2) {
     const ctx_r0 = \u0275\u0275nextContext();
@@ -40032,6 +40187,17 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
   apiRoot = "/checkout";
   /** A host-signed membership token, verified server-side on /draft and never stored (#324). */
   memberToken = "";
+  /**
+   * A signed update-card link token (#289). Set, the checkout pays the open renewal order the token
+   * names — no product, no re-pricing — and keeps the card it is paid with for future renewals.
+   */
+  renewalToken = "";
+  /** The renewal order being paid, in the pay-renewal mode; null for an ordinary checkout. */
+  renewal = null;
+  /** The renewal's amount as the page shows it. */
+  get renewalAmount() {
+    return this.renewal ? FormatRenewalAmount(this.renewal.Amount, this.config?.currency) : "";
+  }
   /**
    * The buyer already subscribes to what they tried to buy (#323). As the `<mj-orders-checkout>`
    * element this is a DOM `CustomEvent` of the same name, with the detail as `event.detail`.
@@ -40114,14 +40280,15 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
       this.loadError = "Checkout requires a secure random source. Open this page over HTTPS.";
       return;
     }
-    if (await this.resumeAccountStep()) {
+    if (!this.renewalToken && await this.resumeAccountStep()) {
       return;
     }
     this.setState("LOADING");
     try {
       const init = await this.postGated("/initialize", {
         slug: this.slug,
-        clientSessionKey: this.sessionKey
+        clientSessionKey: this.sessionKey,
+        ...this.renewalToken ? { renewalToken: this.renewalToken } : {}
       });
       if (!init?.Success) {
         this.loadError = this.str(init?.ErrorMessage, "This checkout is not available.");
@@ -40135,7 +40302,13 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
       if (typeof init.CustomJS === "string" && init.CustomJS && !cfg.customUI?.js) {
         cfg.customUI = { ...cfg.customUI || {}, js: init.CustomJS };
       }
-      if (!cfg.productId) {
+      if (this.renewalToken) {
+        this.renewal = ReadRenewalPayment(init);
+        if (!this.renewal) {
+          this.loadError = "This renewal cannot be paid here.";
+          return;
+        }
+      } else if (!cfg.productId) {
         this.loadError = "This checkout is not configured with a product.";
         return;
       }
@@ -40397,6 +40570,73 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
       this.cdr.detectChanges();
     }
   }
+  /**
+   * Pay the open renewal order (#289): an intent for its balance, confirmed with the card entered
+   * here, then `/complete`, which books the payment against the renewal order and makes this card
+   * the subscription's renewal card.
+   */
+  async payRenewal() {
+    if (this.processing || !this.renewal) {
+      return;
+    }
+    this.processing = true;
+    this.errorMessage = null;
+    this.setState("PROCESSING");
+    try {
+      const intent = await this.post("/payment-intent", {
+        sessionId: this.sessionId,
+        clientSessionKey: this.sessionKey
+      });
+      if (!intent?.Success) {
+        throw new Error(this.str(intent?.ErrorMessage, "Could not start payment."));
+      }
+      if (!intentAlreadyCollected(intent.Status)) {
+        if (!intent.ClientSecret) {
+          throw new Error("Could not start payment.");
+        }
+        if (!this.stripe || !this.card) {
+          throw new Error("Card entry is not ready.");
+        }
+        const result = await this.stripe.confirmCardPayment(String(intent.ClientSecret), {
+          payment_method: { card: this.card }
+        });
+        if (result.error) {
+          if (!stripeConfirmAlreadyCollected(result.error)) {
+            throw new Error(formatStripeError(result.error));
+          }
+        } else {
+          const stripeStatus = (result.paymentIntent?.status || "").toLowerCase();
+          if (stripeStatus && stripeStatus !== "succeeded" && stripeStatus !== "processing") {
+            throw new Error(`Payment was not confirmed (Stripe status: ${result.paymentIntent?.status}).`);
+          }
+        }
+      }
+      const done = await this.post("/complete", {
+        sessionId: this.sessionId,
+        clientSessionKey: this.sessionKey
+      });
+      if (!done?.Success) {
+        throw new Error(this.str(done?.ErrorMessage, "Could not complete the payment."));
+      }
+      this.orderNumber = this.renewal.OrderNumber;
+      this.successMessage = RenewalPaidMessage(this.renewal);
+      this.setState("SUCCESS");
+      this.dispatch(CHECKOUT_COMPLETE_EVENT, BuildCheckoutCompleteDetail({
+        sessionId: this.sessionId,
+        productName: this.renewal.Description,
+        productId: void 0,
+        totalGross: this.renewal.Amount,
+        currency: this.config?.currency,
+        coupon: null
+      }));
+    } catch (err) {
+      this.errorMessage = err instanceof Error ? err.message : "Payment failed.";
+      this.reportError(this.errorMessage);
+    } finally {
+      this.processing = false;
+      this.cdr.detectChanges();
+    }
+  }
   emitIfAlreadySubscribed(response) {
     const detail = alreadySubscribedDetail(response);
     if (detail) {
@@ -40678,6 +40918,10 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
     if (memberToken) {
       this.memberToken = memberToken;
     }
+    const renewalToken = el.getAttribute("renewal-token") || el.getAttribute("data-renewal-token");
+    if (renewalToken) {
+      this.renewalToken = renewalToken;
+    }
     this.readConversationAttributes();
     el.addEventListener?.(CHECKOUT_RESET_REQUEST_EVENT, this.onResetRequested);
   }
@@ -40694,14 +40938,18 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
     this.attributionSource = el.getAttribute("source") || el.getAttribute("data-source") || null;
     this.attributionReference = el.getAttribute("source-ref") || el.getAttribute("data-source-ref") || null;
   }
+  /** Session storage is scoped per slug, and apart for the pay-renewal mode so the two never share a session. */
+  get storageScope() {
+    return this.renewalToken ? `renew:${this.slug}` : this.slug;
+  }
   forgetClientKey() {
     try {
-      sessionStorage.removeItem(`mj-checkout-key:${this.slug}`);
+      sessionStorage.removeItem(`mj-checkout-key:${this.storageScope}`);
     } catch {
     }
   }
   clientKey() {
-    const storageKey = `mj-checkout-key:${this.slug}`;
+    const storageKey = `mj-checkout-key:${this.storageScope}`;
     try {
       const existing = sessionStorage.getItem(storageKey);
       if (existing) {
@@ -40729,7 +40977,7 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
     return key;
   }
   get completingKey() {
-    return `mj-checkout-completing:${this.slug}`;
+    return `mj-checkout-completing:${this.storageScope}`;
   }
   rememberCompleting(sessionId) {
     try {
@@ -40786,18 +41034,18 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
   static \u0275fac = function CheckoutPublicHostComponent_Factory(__ngFactoryType__) {
     return new (__ngFactoryType__ || _CheckoutPublicHostComponent)();
   };
-  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _CheckoutPublicHostComponent, selectors: [["mj-orders-checkout"]], inputs: { slug: "slug", apiRoot: "apiRoot", memberToken: "memberToken" }, outputs: { alreadySubscribed: "checkout-already-subscribed" }, decls: 6, vars: 1, consts: [[1, "mj-checkout-public"], ["role", "alert", 1, "mj-widget-error-banner"], ["role", "status", 1, "mj-checkout-success"], ["role", "status", 1, "mj-checkout-public__status"], [1, "mj-checkout-public__turnstile"], ["aria-hidden", "true", 1, "mj-checkout-success__icon"], [1, "mj-checkout-success__title"], [1, "mj-checkout-success__msg"], [1, "mj-checkout-success__order"], ["role", "status", 1, "mj-checkout-success__access", 3, "is-failed"], ["role", "status", 1, "mj-checkout-account__msg"], [1, "mj-checkout-account"], ["role", "status", 1, "mj-checkout-success__access"], [1, "mj-checkout-account", 3, "submit"], [1, "mj-checkout-account__title"], [1, "mj-checkout-account__note"], ["for", "mj-checkout-password", 1, "mj-checkout-account__label"], ["id", "mj-checkout-password", "type", "password", "autocomplete", "new-password", 1, "mj-checkout-account__input", 3, "input", "value"], ["for", "mj-checkout-password-confirm", 1, "mj-checkout-account__label"], ["id", "mj-checkout-password-confirm", "type", "password", "autocomplete", "new-password", 1, "mj-checkout-account__input", 3, "input", "value"], ["role", "alert", 1, "mj-checkout-account__error"], ["type", "submit", 1, "mj-checkout-account__submit", 3, "disabled"], ["type", "button", 1, "mj-checkout-account__skip", 3, "click", "disabled"], [1, "mj-checkout-account", "mj-checkout-account--actions"], ["type", "button", 1, "mj-checkout-account__submit", 3, "click"], ["type", "button", 1, "mj-checkout-account__skip"], ["type", "button", 1, "mj-checkout-account__skip", 3, "click"], [3, "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "prefillEmail", "errorMessage", "appliedPromotion", "serverPricedTotal", "promotionError", "quotedTotal", "quotedTax"], [3, "promotionCodeApplied", "submitted", "cancelled", "quoteInvalidated", "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "prefillEmail", "errorMessage", "appliedPromotion", "serverPricedTotal", "promotionError", "quotedTotal", "quotedTax"]], template: function CheckoutPublicHostComponent_Template(rf, ctx) {
+  static \u0275cmp = /* @__PURE__ */ \u0275\u0275defineComponent({ type: _CheckoutPublicHostComponent, selectors: [["mj-orders-checkout"]], inputs: { slug: "slug", apiRoot: "apiRoot", memberToken: "memberToken", renewalToken: "renewalToken" }, outputs: { alreadySubscribed: "checkout-already-subscribed" }, decls: 7, vars: 1, consts: [[1, "mj-checkout-public"], ["role", "alert", 1, "mj-widget-error-banner"], ["role", "status", 1, "mj-checkout-success"], ["role", "status", 1, "mj-checkout-public__status"], [1, "mj-checkout-renewal"], [1, "mj-checkout-public__turnstile"], ["aria-hidden", "true", 1, "mj-checkout-success__icon"], [1, "mj-checkout-success__title"], [1, "mj-checkout-success__msg"], [1, "mj-checkout-success__order"], ["role", "status", 1, "mj-checkout-success__access", 3, "is-failed"], ["role", "status", 1, "mj-checkout-account__msg"], [1, "mj-checkout-account"], ["role", "status", 1, "mj-checkout-success__access"], [1, "mj-checkout-account", 3, "submit"], [1, "mj-checkout-account__title"], [1, "mj-checkout-account__note"], ["for", "mj-checkout-password", 1, "mj-checkout-account__label"], ["id", "mj-checkout-password", "type", "password", "autocomplete", "new-password", 1, "mj-checkout-account__input", 3, "input", "value"], ["for", "mj-checkout-password-confirm", 1, "mj-checkout-account__label"], ["id", "mj-checkout-password-confirm", "type", "password", "autocomplete", "new-password", 1, "mj-checkout-account__input", 3, "input", "value"], ["role", "alert", 1, "mj-checkout-account__error"], ["type", "submit", 1, "mj-checkout-account__submit", 3, "disabled"], ["type", "button", 1, "mj-checkout-account__skip", 3, "click", "disabled"], [1, "mj-checkout-account", "mj-checkout-account--actions"], ["type", "button", 1, "mj-checkout-account__submit", 3, "click"], ["type", "button", 1, "mj-checkout-account__skip"], ["type", "button", 1, "mj-checkout-account__skip", 3, "click"], [1, "mj-checkout-renewal", 3, "submit"], [1, "mj-checkout-renewal__title"], [1, "mj-checkout-renewal__lead"], [1, "mj-checkout-renewal__summary"], [1, "mj-checkout-renewal__row"], [1, "mj-checkout-renewal__row", "mj-checkout-renewal__row--total"], [1, "mj-checkout-renewal__note"], ["type", "submit", 1, "mj-checkout-renewal__pay", 3, "disabled"], ["for", "stripe-card-element", 1, "mj-checkout-renewal__label"], ["id", "stripe-card-element", 1, "mj-checkout-renewal__card"], [3, "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "prefillEmail", "errorMessage", "appliedPromotion", "serverPricedTotal", "promotionError", "quotedTotal", "quotedTax"], [3, "promotionCodeApplied", "submitted", "cancelled", "quoteInvalidated", "config", "distributionSlug", "sessionKey", "isProcessing", "isPaymentReady", "stripePaymentMethodId", "prefillEmail", "errorMessage", "appliedPromotion", "serverPricedTotal", "promotionError", "quotedTotal", "quotedTax"]], template: function CheckoutPublicHostComponent_Template(rf, ctx) {
     if (rf & 1) {
       \u0275\u0275elementStart(0, "div", 0);
-      \u0275\u0275conditionalCreate(1, CheckoutPublicHostComponent_Conditional_1_Template, 2, 1, "div", 1)(2, CheckoutPublicHostComponent_Conditional_2_Template, 12, 4, "div", 2)(3, CheckoutPublicHostComponent_Conditional_3_Template, 2, 0, "p", 3)(4, CheckoutPublicHostComponent_Conditional_4_Template, 2, 2);
-      \u0275\u0275element(5, "div", 4);
+      \u0275\u0275conditionalCreate(1, CheckoutPublicHostComponent_Conditional_1_Template, 2, 1, "div", 1)(2, CheckoutPublicHostComponent_Conditional_2_Template, 12, 4, "div", 2)(3, CheckoutPublicHostComponent_Conditional_3_Template, 2, 0, "p", 3)(4, CheckoutPublicHostComponent_Conditional_4_Template, 25, 9, "form", 4)(5, CheckoutPublicHostComponent_Conditional_5_Template, 2, 2);
+      \u0275\u0275element(6, "div", 5);
       \u0275\u0275elementEnd();
     }
     if (rf & 2) {
       \u0275\u0275advance();
-      \u0275\u0275conditional(ctx.loadError ? 1 : ctx.successMessage ? 2 : !ctx.config ? 3 : 4);
+      \u0275\u0275conditional(ctx.loadError ? 1 : ctx.successMessage ? 2 : !ctx.config ? 3 : ctx.renewal ? 4 : 5);
     }
-  }, dependencies: [CommonModule, MJCheckoutWidgetComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.mj-checkout-public[_ngcontent-%COMP%] {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success[_ngcontent-%COMP%] {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon[_ngcontent-%COMP%] {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg[_ngcontent-%COMP%], \n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n\n\n.mj-checkout-success__access[_ngcontent-%COMP%] {\n    margin: 0.75rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n}\n\n.mj-checkout-success__access.is-failed[_ngcontent-%COMP%] {\n    color: #991b1b;\n}\n\n\n\n.mj-checkout-account[_ngcontent-%COMP%] {\n    margin: 1.5rem auto 0;\n    max-width: 320px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.mj-checkout-account__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #0f172a;\n    text-align: center;\n}\n\n.mj-checkout-account__label[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-account__input[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 0.95rem;\n    font-family: inherit;\n}\n\n.mj-checkout-account__input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-checkout-account__error[_ngcontent-%COMP%] {\n    margin: 4px 0 0;\n    color: #991b1b;\n    font-size: 0.85rem;\n}\n\n.mj-checkout-account__submit[_ngcontent-%COMP%] {\n    margin-top: 10px;\n    padding: 10px;\n    border: 0;\n    border-radius: 6px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.mj-checkout-account__skip[_ngcontent-%COMP%] {\n    padding: 6px;\n    border: 0;\n    background: none;\n    color: #64748b;\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.mj-checkout-account__submit[_ngcontent-%COMP%]:disabled, \n.mj-checkout-account__skip[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.mj-checkout-account__msg[_ngcontent-%COMP%] {\n    margin: 1rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-account__note[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    color: #475569;\n    font-size: 0.85rem;\n    line-height: 1.45;\n    text-align: center;\n}\n\n.mj-checkout-account--actions[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n}\n\n\n\n.mj-checkout-public__turnstile[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    margin-top: 0.75rem;\n}"] });
+  }, dependencies: [CommonModule, MJCheckoutWidgetComponent], styles: ["[_nghost-%COMP%] {\n    display: block;\n}\n\n.mj-checkout-public[_ngcontent-%COMP%] {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status[_ngcontent-%COMP%] {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success[_ngcontent-%COMP%] {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon[_ngcontent-%COMP%] {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg[_ngcontent-%COMP%], \n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n\n\n.mj-checkout-success__access[_ngcontent-%COMP%] {\n    margin: 0.75rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n}\n\n.mj-checkout-success__access.is-failed[_ngcontent-%COMP%] {\n    color: #991b1b;\n}\n\n\n\n.mj-checkout-account[_ngcontent-%COMP%] {\n    margin: 1.5rem auto 0;\n    max-width: 320px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.mj-checkout-account__title[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #0f172a;\n    text-align: center;\n}\n\n.mj-checkout-account__label[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-account__input[_ngcontent-%COMP%] {\n    padding: 8px 10px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 0.95rem;\n    font-family: inherit;\n}\n\n.mj-checkout-account__input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-checkout-account__error[_ngcontent-%COMP%] {\n    margin: 4px 0 0;\n    color: #991b1b;\n    font-size: 0.85rem;\n}\n\n.mj-checkout-account__submit[_ngcontent-%COMP%] {\n    margin-top: 10px;\n    padding: 10px;\n    border: 0;\n    border-radius: 6px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.mj-checkout-account__skip[_ngcontent-%COMP%] {\n    padding: 6px;\n    border: 0;\n    background: none;\n    color: #64748b;\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.mj-checkout-account__submit[_ngcontent-%COMP%]:disabled, \n.mj-checkout-account__skip[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.mj-checkout-account__msg[_ngcontent-%COMP%] {\n    margin: 1rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-account__note[_ngcontent-%COMP%] {\n    margin: 0 0 0.5rem;\n    color: #475569;\n    font-size: 0.85rem;\n    line-height: 1.45;\n    text-align: center;\n}\n\n.mj-checkout-account--actions[_ngcontent-%COMP%] {\n    margin-top: 0.75rem;\n}\n\n\n\n.mj-checkout-public__turnstile[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    margin-top: 0.75rem;\n}\n\n\n\n\n.mj-checkout-renewal[_ngcontent-%COMP%] {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 1.75rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n    display: flex;\n    flex-direction: column;\n    gap: 0.85rem;\n}\n\n.mj-checkout-renewal__title[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 1.4rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-renewal__lead[_ngcontent-%COMP%], \n.mj-checkout-renewal__note[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #475569;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-renewal__note[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-renewal__summary[_ngcontent-%COMP%] {\n    margin: 0.25rem 0;\n    border: 1px solid #e2e8f0;\n    border-radius: 8px;\n    padding: 0.25rem 0.9rem;\n}\n\n.mj-checkout-renewal__row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 0.55rem 0;\n    border-bottom: 1px solid #f1f5f9;\n    font-size: 0.92rem;\n}\n\n.mj-checkout-renewal__row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.mj-checkout-renewal__row[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%] {\n    color: #64748b;\n}\n\n.mj-checkout-renewal__row[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #0f172a;\n    text-align: right;\n}\n\n.mj-checkout-renewal__row--total[_ngcontent-%COMP%]   dt[_ngcontent-%COMP%], \n.mj-checkout-renewal__row--total[_ngcontent-%COMP%]   dd[_ngcontent-%COMP%] {\n    font-weight: 700;\n    color: #0f172a;\n}\n\n.mj-checkout-renewal__label[_ngcontent-%COMP%] {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-renewal__card[_ngcontent-%COMP%] {\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    padding: 0.75rem;\n    background: #ffffff;\n}\n\n.mj-checkout-renewal__pay[_ngcontent-%COMP%] {\n    margin-top: 0.25rem;\n    padding: 0.8rem 1rem;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-checkout-primary, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 700;\n    cursor: pointer;\n}\n\n.mj-checkout-renewal__pay[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}"] });
 };
 (() => {
   (typeof ngDevMode === "undefined" || ngDevMode) && setClassMetadata(CheckoutPublicHostComponent, [{
@@ -40864,6 +41112,50 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
         </div>
     } @else if (!config) {
         <p class="mj-checkout-public__status" role="status">Loading checkout\u2026</p>
+    } @else if (renewal) {
+        <form class="mj-checkout-renewal" (submit)="$event.preventDefault(); payRenewal()">
+            <h1 class="mj-checkout-renewal__title">Renew your subscription</h1>
+            <p class="mj-checkout-renewal__lead">Your saved card could not be charged. Pay with a new card to keep your subscription active.</p>
+            <dl class="mj-checkout-renewal__summary">
+                @if (renewal.Description) {
+                    <div class="mj-checkout-renewal__row">
+                        <dt>Renewal of</dt>
+                        <dd>{{ renewal.Description }}</dd>
+                    </div>
+                }
+                @if (renewal.SubscriptionNumber) {
+                    <div class="mj-checkout-renewal__row">
+                        <dt>Subscription</dt>
+                        <dd>{{ renewal.SubscriptionNumber }}</dd>
+                    </div>
+                }
+                <div class="mj-checkout-renewal__row">
+                    <dt>Renewal order</dt>
+                    <dd>{{ renewal.OrderNumber }}</dd>
+                </div>
+                @if (renewal.DueDate) {
+                    <div class="mj-checkout-renewal__row">
+                        <dt>Due</dt>
+                        <dd>{{ renewal.DueDate }}</dd>
+                    </div>
+                }
+                <div class="mj-checkout-renewal__row mj-checkout-renewal__row--total">
+                    <dt>Amount due</dt>
+                    <dd>{{ renewalAmount }}</dd>
+                </div>
+            </dl>
+            @if (config.stripePublishableKey) {
+                <label class="mj-checkout-renewal__label" for="stripe-card-element">Card</label>
+                <div id="stripe-card-element" class="mj-checkout-renewal__card"></div>
+            }
+            <p class="mj-checkout-renewal__note">The card you pay with will be charged for future renewals.</p>
+            @if (errorMessage) {
+                <div class="mj-widget-error-banner" role="alert">{{ errorMessage }}</div>
+            }
+            <button class="mj-checkout-renewal__pay" type="submit" [disabled]="processing || !isPaymentReady">
+                {{ processing ? 'Processing\u2026' : 'Pay ' + renewalAmount }}
+            </button>
+        </form>
     } @else {
         @for (generation of [formGeneration]; track generation) {
         <mj-checkout-widget
@@ -40889,20 +41181,22 @@ var CheckoutPublicHostComponent = class _CheckoutPublicHostComponent {
     }
     <div class="mj-checkout-public__turnstile"></div>
 </div>
-`, styles: [":host {\n    display: block;\n}\n\n.mj-checkout-public {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg,\n.mj-checkout-success__order {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n/* Whether the buyer's access is ready yet (#325). */\n.mj-checkout-success__access {\n    margin: 0.75rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n}\n\n.mj-checkout-success__access.is-failed {\n    color: #991b1b;\n}\n\n/* Post-payment account step: set a password for the account the host created (#292). */\n.mj-checkout-account {\n    margin: 1.5rem auto 0;\n    max-width: 320px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.mj-checkout-account__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #0f172a;\n    text-align: center;\n}\n\n.mj-checkout-account__label {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-account__input {\n    padding: 8px 10px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 0.95rem;\n    font-family: inherit;\n}\n\n.mj-checkout-account__input:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-checkout-account__error {\n    margin: 4px 0 0;\n    color: #991b1b;\n    font-size: 0.85rem;\n}\n\n.mj-checkout-account__submit {\n    margin-top: 10px;\n    padding: 10px;\n    border: 0;\n    border-radius: 6px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.mj-checkout-account__skip {\n    padding: 6px;\n    border: 0;\n    background: none;\n    color: #64748b;\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.mj-checkout-account__submit:disabled,\n.mj-checkout-account__skip:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.mj-checkout-account__msg {\n    margin: 1rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-account__note {\n    margin: 0 0 0.5rem;\n    color: #475569;\n    font-size: 0.85rem;\n    line-height: 1.45;\n    text-align: center;\n}\n\n.mj-checkout-account--actions {\n    margin-top: 0.75rem;\n}\n\n/* Cloudflare Turnstile renders here only when it needs the buyer to interact (#592). */\n.mj-checkout-public__turnstile {\n    display: flex;\n    justify-content: center;\n    margin-top: 0.75rem;\n}\n"] }]
+`, styles: [":host {\n    display: block;\n}\n\n.mj-checkout-public {\n    max-width: 580px;\n    margin: 0 auto;\n}\n\n.mj-checkout-public__status {\n    text-align: center;\n    color: #64748b;\n    font-size: 0.95rem;\n    padding: 2rem 0;\n}\n\n.mj-widget-error-banner {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    background: #fef2f2;\n    border: 1px solid #f87171;\n    color: #991b1b;\n    padding: 10px 14px;\n    border-radius: 6px;\n    font-size: 0.875rem;\n}\n\n.mj-checkout-success {\n    text-align: center;\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 2rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n}\n\n.mj-checkout-success__icon {\n    width: 3rem;\n    height: 3rem;\n    margin: 0 auto 1rem;\n    border-radius: 50%;\n    background: #dcfce7;\n    color: #16a34a;\n    font-size: 1.5rem;\n    font-weight: 700;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.mj-checkout-success__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.5rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-success__msg,\n.mj-checkout-success__order {\n    margin: 0;\n    color: #64748b;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-success__order {\n    margin-top: 0.75rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n/* Whether the buyer's access is ready yet (#325). */\n.mj-checkout-success__access {\n    margin: 0.75rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n}\n\n.mj-checkout-success__access.is-failed {\n    color: #991b1b;\n}\n\n/* Post-payment account step: set a password for the account the host created (#292). */\n.mj-checkout-account {\n    margin: 1.5rem auto 0;\n    max-width: 320px;\n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.mj-checkout-account__title {\n    margin: 0 0 0.5rem;\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: #0f172a;\n    text-align: center;\n}\n\n.mj-checkout-account__label {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-account__input {\n    padding: 8px 10px;\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    font-size: 0.95rem;\n    font-family: inherit;\n}\n\n.mj-checkout-account__input:focus {\n    outline: none;\n    border-color: var(--mj-primary-color, #2563eb);\n    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);\n}\n\n.mj-checkout-account__error {\n    margin: 4px 0 0;\n    color: #991b1b;\n    font-size: 0.85rem;\n}\n\n.mj-checkout-account__submit {\n    margin-top: 10px;\n    padding: 10px;\n    border: 0;\n    border-radius: 6px;\n    background: var(--mj-primary-color, #2563eb);\n    color: #ffffff;\n    font-weight: 600;\n    cursor: pointer;\n}\n\n.mj-checkout-account__skip {\n    padding: 6px;\n    border: 0;\n    background: none;\n    color: #64748b;\n    font-size: 0.85rem;\n    cursor: pointer;\n}\n\n.mj-checkout-account__submit:disabled,\n.mj-checkout-account__skip:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.mj-checkout-account__msg {\n    margin: 1rem 0 0;\n    color: #334155;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-account__note {\n    margin: 0 0 0.5rem;\n    color: #475569;\n    font-size: 0.85rem;\n    line-height: 1.45;\n    text-align: center;\n}\n\n.mj-checkout-account--actions {\n    margin-top: 0.75rem;\n}\n\n/* Cloudflare Turnstile renders here only when it needs the buyer to interact (#592). */\n.mj-checkout-public__turnstile {\n    display: flex;\n    justify-content: center;\n    margin-top: 0.75rem;\n}\n\n/* \u2500\u2500\u2500 Pay-renewal mode (#289) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.mj-checkout-renewal {\n    background: #ffffff;\n    border: 1px solid #e2e8f0;\n    border-radius: 10px;\n    padding: 1.75rem 1.5rem;\n    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);\n    display: flex;\n    flex-direction: column;\n    gap: 0.85rem;\n}\n\n.mj-checkout-renewal__title {\n    margin: 0;\n    font-size: 1.4rem;\n    font-weight: 800;\n    color: #0f172a;\n}\n\n.mj-checkout-renewal__lead,\n.mj-checkout-renewal__note {\n    margin: 0;\n    color: #475569;\n    font-size: 0.95rem;\n    line-height: 1.5;\n}\n\n.mj-checkout-renewal__note {\n    font-size: 0.85rem;\n}\n\n.mj-checkout-renewal__summary {\n    margin: 0.25rem 0;\n    border: 1px solid #e2e8f0;\n    border-radius: 8px;\n    padding: 0.25rem 0.9rem;\n}\n\n.mj-checkout-renewal__row {\n    display: flex;\n    justify-content: space-between;\n    gap: 1rem;\n    padding: 0.55rem 0;\n    border-bottom: 1px solid #f1f5f9;\n    font-size: 0.92rem;\n}\n\n.mj-checkout-renewal__row:last-child {\n    border-bottom: none;\n}\n\n.mj-checkout-renewal__row dt {\n    color: #64748b;\n}\n\n.mj-checkout-renewal__row dd {\n    margin: 0;\n    color: #0f172a;\n    text-align: right;\n}\n\n.mj-checkout-renewal__row--total dt,\n.mj-checkout-renewal__row--total dd {\n    font-weight: 700;\n    color: #0f172a;\n}\n\n.mj-checkout-renewal__label {\n    font-size: 0.85rem;\n    font-weight: 600;\n    color: #334155;\n}\n\n.mj-checkout-renewal__card {\n    border: 1px solid #cbd5e1;\n    border-radius: 6px;\n    padding: 0.75rem;\n    background: #ffffff;\n}\n\n.mj-checkout-renewal__pay {\n    margin-top: 0.25rem;\n    padding: 0.8rem 1rem;\n    border: none;\n    border-radius: 6px;\n    background: var(--mj-checkout-primary, #2563eb);\n    color: #ffffff;\n    font-size: 1rem;\n    font-weight: 700;\n    cursor: pointer;\n}\n\n.mj-checkout-renewal__pay:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n"] }]
   }], null, { slug: [{
     type: Input
   }], apiRoot: [{
     type: Input
   }], memberToken: [{
     type: Input
+  }], renewalToken: [{
+    type: Input
   }], alreadySubscribed: [{
     type: Output,
     args: ["checkout-already-subscribed"]
   }] });
 })();
 (() => {
-  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(CheckoutPublicHostComponent, { className: "CheckoutPublicHostComponent", filePath: "lib/checkout-widget/checkout-public-host.component.ts", lineNumber: 110 });
+  (typeof ngDevMode === "undefined" || ngDevMode) && \u0275setClassDebugInfo(CheckoutPublicHostComponent, { className: "CheckoutPublicHostComponent", filePath: "lib/checkout-widget/checkout-public-host.component.ts", lineNumber: 112 });
 })();
 
 // scripts/checkout-element-entry.ts