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 {