chore(clerk-js,types): Get payment_method_order from FAPI (#6034)

Author: aeliox

.changeset/dry-streets-jog.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Get `payment_method_order` for Stripe payment elements from backend

packages/clerk-js/src/core/resources/CommercePaymentSource.ts

@@ -74,6 +74,7 @@ export class CommercePaymentSource extends BaseResource implements CommercePayme
 export class CommerceInitializedPaymentSource extends BaseResource implements CommerceInitializedPaymentSourceResource {
   externalClientSecret!: string;
   externalGatewayId!: string;
+  paymentMethodOrder!: string[];
 
   constructor(data: CommerceInitializedPaymentSourceJSON) {
     super();
@@ -87,7 +88,7 @@ export class CommerceInitializedPaymentSource extends BaseResource implements Co
 
     this.externalClientSecret = data.external_client_secret;
     this.externalGatewayId = data.external_gateway_id;
-
+    this.paymentMethodOrder = data.payment_method_order;
     return this;
   }
 }

packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx

@@ -41,6 +41,7 @@ const usePaymentSourceUtils = () => {
 
   const externalGatewayId = initializedPaymentSource?.externalGatewayId;
   const externalClientSecret = initializedPaymentSource?.externalClientSecret;
+  const paymentMethodOrder = initializedPaymentSource?.paymentMethodOrder;
   const stripePublishableKey = commerceSettings.billing.stripePublishableKey;
 
   const { data: stripe } = useSWR(
@@ -65,13 +66,14 @@ const usePaymentSourceUtils = () => {
     stripe,
     initializePaymentSource,
     externalClientSecret,
+    paymentMethodOrder,
   };
 };
 
 const [AddPaymentSourceContext, useAddPaymentSourceContext] = createContextAndHook<any>('AddPaymentSourceRoot');
 
 const AddPaymentSourceRoot = ({ children, ...rest }: PropsWithChildren<AddPaymentSourceProps>) => {
-  const { initializePaymentSource, externalClientSecret, stripe } = usePaymentSourceUtils();
+  const { initializePaymentSource, externalClientSecret, stripe, paymentMethodOrder } = usePaymentSourceUtils();
   const [headerTitle, setHeaderTitle] = useState<LocalizationKey | undefined>(undefined);
   const [headerSubtitle, setHeaderSubtitle] = useState<LocalizationKey | undefined>(undefined);
   const [submitLabel, setSubmitLabel] = useState<LocalizationKey | undefined>(undefined);
@@ -93,6 +95,7 @@ const AddPaymentSourceRoot = ({ children, ...rest }: PropsWithChildren<AddPaymen
           initializePaymentSource,
           externalClientSecret,
           stripe,
+          paymentMethodOrder,
           ...rest,
         },
       }}
@@ -212,8 +215,16 @@ const FormButton = ({ text }: { text: LocalizationKey }) => {
 };
 
 const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
-  const { headerTitle, headerSubtitle, submitLabel, checkout, initializePaymentSource, onSuccess, cancelAction } =
-    useAddPaymentSourceContext();
+  const {
+    headerTitle,
+    headerSubtitle,
+    submitLabel,
+    checkout,
+    initializePaymentSource,
+    onSuccess,
+    cancelAction,
+    paymentMethodOrder,
+  } = useAddPaymentSourceContext();
   const [isPaymentElementReady, setIsPaymentElementReady] = useState(false);
   const stripe = useStripe();
   const card = useCardState();
@@ -273,7 +284,7 @@ const AddPaymentSourceForm = ({ children }: PropsWithChildren) => {
               defaultCollapsed: false,
             },
             // TODO(@COMMERCE): Should this be fetched from the fapi?
-            paymentMethodOrder: ['card', 'apple_pay', 'google_pay'],
+            paymentMethodOrder: paymentMethodOrder || ['card'],
             applePay: checkout
               ? {
                   recurringPaymentRequest: {

packages/types/src/commerce.ts

@@ -106,6 +106,7 @@ export interface CommercePaymentSourceResource extends ClerkResource {
 export interface CommerceInitializedPaymentSourceResource extends ClerkResource {
   externalClientSecret: string;
   externalGatewayId: string;
+  paymentMethodOrder: string[];
 }
 
 export type GetStatementsParams = WithOptionalOrgType<ClerkPaginationParams>;

packages/types/src/json.ts

@@ -649,6 +649,7 @@ export interface CommerceInitializedPaymentSourceJSON extends ClerkResourceJSON
   object: 'commerce_payment_source_initialize';
   external_client_secret: string;
   external_gateway_id: string;
+  payment_method_order: string[];
 }
 
 export interface CommerceStatementJSON extends ClerkResourceJSON {