diff --git a/.changeset/upset-webs-stand.md b/.changeset/upset-webs-stand.md
new file mode 100644
index 00000000000..facbfa0f1d2
--- /dev/null
+++ b/.changeset/upset-webs-stand.md
@@ -0,0 +1,5 @@
+---
+'@clerk/types': patch
+---
+
+Update `checkout.totals.totalDueNow` to always be defined.
diff --git a/.changeset/witty-bikes-relate.md b/.changeset/witty-bikes-relate.md
new file mode 100644
index 00000000000..384e3218921
--- /dev/null
+++ b/.changeset/witty-bikes-relate.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update the text in Checkout buttons from "Pay $0" to "Subscribe".
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 8b089173978..a453d3efbcd 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -169,7 +169,7 @@ const CheckoutFormElements = ({
@@ -192,12 +192,17 @@ const CheckoutFormElements = ({
0
+ ? localizationKeys(
+ 'userProfile.__experimental_billingPage.paymentSourcesSection.formButtonPrimary__pay',
+ {
+ amount: `${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`,
+ },
+ )
+ : 'Subscribe'
+ }
/>
@@ -283,9 +288,15 @@ const PaymentSourceMethods = ({
}}
isLoading={isSubmitting}
>
- {/* TODO(@COMMERCE): needs localization */}
- Pay {totalDueNow.currencySymbol}
- {totalDueNow.amountFormatted}
+ {totalDueNow.amount > 0 ? (
+ <>
+ {/* TODO(@COMMERCE): needs localization */}
+ Pay {totalDueNow.currencySymbol}
+ {totalDueNow.amountFormatted}
+ >
+ ) : (
+ 'Subscribe'
+ )}
);
diff --git a/packages/clerk-js/src/utils/commerce.ts b/packages/clerk-js/src/utils/commerce.ts
index ed365850607..a3868a1401c 100644
--- a/packages/clerk-js/src/utils/commerce.ts
+++ b/packages/clerk-js/src/utils/commerce.ts
@@ -19,6 +19,6 @@ export const commerceTotalsFromJSON = (data: __experimental_CommerceTotalsJSON):
grandTotal: commerceMoneyFromJSON(data.grand_total),
subtotal: commerceMoneyFromJSON(data.subtotal),
taxTotal: commerceMoneyFromJSON(data.tax_total),
- totalDueNow: data.total_due_now ? commerceMoneyFromJSON(data.total_due_now) : undefined,
+ totalDueNow: commerceMoneyFromJSON(data.total_due_now),
};
};
diff --git a/packages/types/src/commerce.ts b/packages/types/src/commerce.ts
index d7a6a47865c..263612d2642 100644
--- a/packages/types/src/commerce.ts
+++ b/packages/types/src/commerce.ts
@@ -146,7 +146,7 @@ export interface __experimental_CommerceTotals {
subtotal: __experimental_CommerceMoney;
grandTotal: __experimental_CommerceMoney;
taxTotal: __experimental_CommerceMoney;
- totalDueNow?: __experimental_CommerceMoney;
+ totalDueNow: __experimental_CommerceMoney;
}
export type __experimental_CreateCheckoutParams = WithOptionalOrgType<{
diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
index 973a8550a04..789a4cc497f 100644
--- a/packages/types/src/json.ts
+++ b/packages/types/src/json.ts
@@ -674,7 +674,7 @@ export interface __experimental_CommerceTotalsJSON {
grand_total: __experimental_CommerceMoneyJSON;
subtotal: __experimental_CommerceMoneyJSON;
tax_total: __experimental_CommerceMoneyJSON;
- total_due_now?: __experimental_CommerceMoneyJSON;
+ total_due_now: __experimental_CommerceMoneyJSON;
}
export interface __experimental_CommerceCheckoutJSON extends ClerkResourceJSON {