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 {