fix invalid fapi param for confirm

Author: panteliselef

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

@@ -161,18 +161,18 @@ const useCheckoutMutations = () => {
     card.setIdle();
   };
 
-  const payWithExistingPaymentSource = (e: React.FormEvent<HTMLFormElement>) => {
+  const payWithExistingPaymentMethod = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const data = new FormData(e.currentTarget);
-    const paymentMethodId = data.get(HIDDEN_INPUT_NAME) as string;
+    const paymentSourceId = data.get(HIDDEN_INPUT_NAME) as string;
 
     return confirmCheckout({
-      paymentMethodId,
+      paymentSourceId,
     });
   };
 
-  const addPaymentSourceAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);
+  const addPaymentMethodAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);
 
   const payWithTestCard = () =>
     confirmCheckout({
@@ -181,8 +181,8 @@ const useCheckoutMutations = () => {
     });
 
   return {
-    payWithExistingPaymentSource,
-    addPaymentSourceAndPay,
+    payWithExistingPaymentMethod,
+    addPaymentMethodAndPay,
     payWithTestCard,
   };
 };
@@ -345,13 +345,13 @@ const useSubmitLabel = () => {
 };
 
 const AddPaymentSourceForCheckout = withCardStateProvider(() => {
-  const { addPaymentSourceAndPay } = useCheckoutMutations();
+  const { addPaymentMethodAndPay } = useCheckoutMutations();
   const submitLabel = useSubmitLabel();
   const { checkout } = useCheckout();
 
   return (
     <AddPaymentSource.Root
-      onSuccess={addPaymentSourceAndPay}
+      onSuccess={addPaymentMethodAndPay}
       checkout={checkout}
     >
       <DevOnly>
@@ -375,9 +375,9 @@ const ExistingPaymentSourceForm = withCardStateProvider(
     const { checkout } = useCheckout();
     const { paymentMethod, isImmediatePlanChange, freeTrialEndsAt } = checkout;
 
-    const { payWithExistingPaymentSource } = useCheckoutMutations();
+    const { payWithExistingPaymentMethod } = useCheckoutMutations();
     const card = useCardState();
-    const [selectedPaymentSource, setSelectedPaymentSource] = useState<BillingPaymentMethodResource | undefined>(
+    const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<BillingPaymentMethodResource | undefined>(
       paymentMethod || paymentSources.find(p => p.isDefault),
     );
 
@@ -399,7 +399,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
 
     return (
       <Form
-        onSubmit={payWithExistingPaymentSource}
+        onSubmit={payWithExistingPaymentMethod}
         sx={t => ({
           display: 'flex',
           flexDirection: 'column',
@@ -408,20 +408,20 @@ const ExistingPaymentSourceForm = withCardStateProvider(
       >
         {showPaymentMethods ? (
           <Select
-            elementId='paymentSource'
+            elementId='paymentMethod'
             options={options}
-            value={selectedPaymentSource?.id || null}
+            value={selectedPaymentMethod?.id || null}
             onChange={option => {
               const paymentSource = paymentSources.find(source => source.id === option.value);
-              setSelectedPaymentSource(paymentSource);
+              setSelectedPaymentMethod(paymentSource);
             }}
             portal
           >
             {/*Store value inside an input in order to be accessible as form data*/}
             <input
               name={HIDDEN_INPUT_NAME}
               type='hidden'
-              value={selectedPaymentSource?.id}
+              value={selectedPaymentMethod?.id}
             />
             <SelectButton
               icon={ChevronUpDown}
@@ -430,7 +430,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
                 backgroundColor: t.colors.$colorBackground,
               })}
             >
-              {selectedPaymentSource && <PaymentSourceRow paymentSource={selectedPaymentSource} />}
+              {selectedPaymentMethod && <PaymentSourceRow paymentSource={selectedPaymentMethod} />}
             </SelectButton>
             <SelectOptionList
               sx={t => ({
@@ -443,7 +443,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
           <input
             name={HIDDEN_INPUT_NAME}
             type='hidden'
-            value={selectedPaymentSource?.id}
+            value={selectedPaymentMethod?.id}
           />
         )}
         <Card.Alert>{card.error}</Card.Alert>

packages/types/src/billing.ts

@@ -695,10 +695,10 @@ export type CreateCheckoutParams = WithOptionalOrgType<{
 }>;
 
 /**
- * The `confirm()` method accepts the following parameters. **Only one of `paymentMethodId`, `paymentToken`, or `useTestCard` should be provided.**
+ * The `confirm()` method accepts the following parameters. **Only one of `paymentSourceId`, `paymentToken`, or `useTestCard` should be provided.**
  *
  * @unionReturnHeadings
- * ["paymentMethodId", "paymentToken", "useTestCard"]
+ * ["paymentSourceId", "paymentToken", "useTestCard"]
  *
  * @experimental This is an experimental API for the Billing feature that is available under a public beta, and the API is subject to change. It is advised to [pin](https://clerk.com/docs/pinning) the SDK version and the clerk-js version to avoid breaking changes.
  */
@@ -707,7 +707,7 @@ export type ConfirmCheckoutParams =
       /**
        * The ID of a saved payment source to use for this checkout.
        */
-      paymentMethodId?: string;
+      paymentSourceId?: string;
     }
   | {
       /**