fix(clerk-js): Checkout CTAs to not display payment of zero amount (#5720)

Author: panteliselef

.changeset/upset-webs-stand.md

@@ -0,0 +1,5 @@
+---
+'@clerk/types': patch
+---
+
+Update `checkout.totals.totalDueNow` to always be defined.

.changeset/witty-bikes-relate.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Update the text in Checkout buttons from "Pay $0" to "Subscribe".

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -169,7 +169,7 @@ const CheckoutFormElements = ({
                 <PaymentSourceMethods
                   checkout={checkout}
                   paymentSources={paymentSources}
-                  totalDueNow={checkout.totals.totalDueNow || checkout.totals.grandTotal}
+                  totalDueNow={checkout.totals.totalDueNow}
                   onPaymentSourceSubmit={onPaymentSourceSubmit}
                   isSubmitting={isSubmitting}
                 />
@@ -192,12 +192,17 @@ const CheckoutFormElements = ({
             <AddPaymentSource
               checkout={checkout}
               onSuccess={onAddPaymentSourceSuccess}
-              submitLabel={localizationKeys(
-                'userProfile.__experimental_billingPage.paymentSourcesSection.formButtonPrimary__pay',
-                {
-                  amount: `${(checkout.totals.totalDueNow || checkout.totals.grandTotal).currencySymbol}${(checkout.totals.totalDueNow || checkout.totals.grandTotal).amountFormatted}`,
-                },
-              )}
+              // @ts-ignore TODO(@COMMERCE): needs localization
+              submitLabel={
+                checkout.totals.totalDueNow.amount > 0
+                  ? localizationKeys(
+                      'userProfile.__experimental_billingPage.paymentSourcesSection.formButtonPrimary__pay',
+                      {
+                        amount: `${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`,
+                      },
+                    )
+                  : 'Subscribe'
+              }
             />
           </__experimental_PaymentSourcesContext.Provider>
         </Disclosure.Content>
@@ -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'
+        )}
       </Button>
     </Form>
   );

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),
   };
 };

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<{

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 {