Merge branch 'main' into elef/improve-commerce-scenario-coverage

panteliselef · web-flow · commit 74787c499510 · 2025-06-03T11:23:24.000-04:00
diff --git a/.changeset/dry-streets-jog.md b/.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
diff --git a/.changeset/quick-students-invent.md b/.changeset/quick-students-invent.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/slow-hats-drum.md b/.changeset/slow-hats-drum.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-expo': minor
+---
+
+Default token cache `SecureStore` implementation `keychainAccessible` to `AFTER_FIRST_UNLOCK` createResourceCacheStore to align with createTokenCache - The data in the keychain item cannot be accessed after a restart until the device has been unlocked once by the user. This may be useful if you need to access the item when the device is locked.
diff --git a/package.json b/package.json
@@ -79,7 +79,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/cross-spawn": "^6.0.6",
     "@types/jest": "^29.3.1",
-    "@types/node": "^22.15.21",
+    "@types/node": "^22.15.24",
     "@types/react": "catalog:react",
     "@types/react-dom": "catalog:react",
     "@vitest/coverage-v8": "3.0.2",
@@ -132,7 +132,7 @@
     "tsup": "catalog:repo",
     "turbo": "^2.5.3",
     "turbo-ignore": "^2.5.3",
-    "typedoc": "0.28.4",
+    "typedoc": "0.28.5",
     "typedoc-plugin-markdown": "4.6.3",
     "typedoc-plugin-replace-text": "4.2.0",
     "typescript": "catalog:repo",
diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -115,9 +115,9 @@
   },
   "devDependencies": {
     "@edge-runtime/vm": "5.0.0",
-    "msw": "2.8.4",
+    "msw": "2.8.7",
     "npm-run-all": "^4.1.5",
-    "svix": "^1.65.0",
+    "svix": "^1.66.0",
     "vitest-environment-miniflare": "2.14.4"
   },
   "peerDependencies": {
diff --git a/packages/clerk-js/src/core/resources/CommercePaymentSource.ts b/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;
   }
 }
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/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: {
diff --git a/packages/elements/examples/nextjs/package.json b/packages/elements/examples/nextjs/package.json
@@ -22,7 +22,7 @@
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@types/node": "^18.19.103",
+    "@types/node": "^18.19.105",
     "@types/react": "catalog:react",
     "@types/react-dom": "catalog:react",
     "autoprefixer": "^10.4.21",
diff --git a/packages/expo/src/resource-cache/__tests__/secure-store.test.ts b/packages/expo/src/resource-cache/__tests__/secure-store.test.ts
@@ -29,6 +29,7 @@ vi.mock('expo-secure-store', () => {
     setItemAsync: mocks.setItemAsync,
     getItemAsync: mocks.getItemAsync,
     deleteItemAsync: mocks.deleteItemAsync,
+    AFTER_FIRST_UNLOCK: 0,
   };
 });
 
diff --git a/packages/expo/src/resource-cache/resource-cache.ts b/packages/expo/src/resource-cache/resource-cache.ts
@@ -31,9 +31,18 @@ export const createResourceCacheStore = (): IStorage => {
   let queue: KeyValuePair[] = [];
   let isProcessing = false;
 
-  const setItem = SecureStore.setItemAsync;
-  const getItem = SecureStore.getItemAsync;
-  const deleteItem = SecureStore.deleteItemAsync;
+  const secureStoreOpts: SecureStore.SecureStoreOptions = {
+    /**
+     * The data in the keychain item cannot be accessed after a restart until the
+     * device has been unlocked once by the user.
+     *
+     * This may be useful if you need to access the item when the phone is locked.
+     */
+    keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK,
+  };
+  const setItem = (key: string, value: string) => SecureStore.setItemAsync(key, value, secureStoreOpts);
+  const getItem = (key: string) => SecureStore.getItemAsync(key, secureStoreOpts);
+  const deleteItem = (key: string) => SecureStore.deleteItemAsync(key, secureStoreOpts);
 
   const set = (key: string, value: string): Promise<void> => {
     queue.push({ key, value });
diff --git a/packages/remix/package.json b/packages/remix/package.json
@@ -70,7 +70,9 @@
     "lint": "eslint src",
     "lint:attw": "attw --pack . --profile node16",
     "lint:publint": "publint",
-    "publish:local": "pnpm yalc push --replace  --sig"
+    "publish:local": "pnpm yalc push --replace  --sig",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
   },
   "dependencies": {
     "@clerk/backend": "workspace:^",
@@ -81,8 +83,8 @@
     "tslib": "catalog:repo"
   },
   "devDependencies": {
-    "@remix-run/react": "^2.16.6",
-    "@remix-run/server-runtime": "^2.16.6",
+    "@remix-run/react": "^2.16.7",
+    "@remix-run/server-runtime": "^2.16.7",
     "@types/cookie": "^0.6.0"
   },
   "peerDependencies": {
diff --git a/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -0,0 +1,55 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`root public exports > should not change unexpectedly 1`] = `
+[
+  "AuthenticateWithRedirectCallback",
+  "ClerkApp",
+  "ClerkDegraded",
+  "ClerkFailed",
+  "ClerkLoaded",
+  "ClerkLoading",
+  "ClerkProvider",
+  "CreateOrganization",
+  "GoogleOneTap",
+  "OrganizationList",
+  "OrganizationProfile",
+  "OrganizationSwitcher",
+  "PricingTable",
+  "Protect",
+  "RedirectToCreateOrganization",
+  "RedirectToOrganizationProfile",
+  "RedirectToSignIn",
+  "RedirectToSignUp",
+  "RedirectToUserProfile",
+  "SignIn",
+  "SignInButton",
+  "SignInWithMetamaskButton",
+  "SignOutButton",
+  "SignUp",
+  "SignUpButton",
+  "SignedIn",
+  "SignedOut",
+  "UserButton",
+  "UserProfile",
+  "Waitlist",
+  "WithClerkState",
+  "useAuth",
+  "useClerk",
+  "useEmailLink",
+  "useOrganization",
+  "useOrganizationList",
+  "useReverification",
+  "useSession",
+  "useSessionList",
+  "useSignIn",
+  "useSignUp",
+  "useUser",
+]
+`;
+
+exports[`ssr public exports > should not change unexpectedly 1`] = `
+[
+  "getAuth",
+  "rootAuthLoader",
+]
+`;
diff --git a/packages/remix/src/__tests__/exports.test.ts b/packages/remix/src/__tests__/exports.test.ts
@@ -0,0 +1,14 @@
+import * as publicExports from '../index';
+import * as ssrExports from '../ssr/index';
+
+describe('root public exports', () => {
+  it('should not change unexpectedly', () => {
+    expect(Object.keys(publicExports).sort()).toMatchSnapshot();
+  });
+});
+
+describe('ssr public exports', () => {
+  it('should not change unexpectedly', () => {
+    expect(Object.keys(ssrExports).sort()).toMatchSnapshot();
+  });
+});
diff --git a/packages/remix/vitest.config.mts b/packages/remix/vitest.config.mts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.mts',
+  },
+});
diff --git a/packages/remix/vitest.setup.mts b/packages/remix/vitest.setup.mts
@@ -0,0 +1,3 @@
+globalThis.__DEV__ = true;
+globalThis.PACKAGE_NAME = '@clerk/remix';
+globalThis.PACKAGE_VERSION = '0.0.0-test';
diff --git a/packages/types/src/commerce.ts b/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>;
diff --git a/packages/types/src/json.ts b/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 {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@clerk/clerk-expo': minor
 +---
++
 +Default token cache `SecureStore` implementation `keychainAccessible` to `AFTER_FIRST_UNLOCK` createResourceCacheStore to align with createTokenCache - The data in the keychain item cannot be accessed after a restart until the device has been unlocked once by the user. This may be useful if you need to access the item when the device is locked.
Original file line number	Diff line number	Diff line change
`@@ -74,6 +74,7 @@ export class CommercePaymentSource extends BaseResource implements CommercePayme`
`74`	`74`	`export class CommerceInitializedPaymentSource extends BaseResource implements CommerceInitializedPaymentSourceResource {`
`75`	`75`	`externalClientSecret!: string;`
`76`	`76`	`externalGatewayId!: string;`
	`77`	`+ paymentMethodOrder!: string[];`
`77`	`78`
`78`	`79`	`constructor(data: CommerceInitializedPaymentSourceJSON) {`
`79`	`80`	`super();`
`@@ -87,7 +88,7 @@ export class CommerceInitializedPaymentSource extends BaseResource implements Co`
`87`	`88`
`88`	`89`	`this.externalClientSecret = data.external_client_secret;`
`89`	`90`	`this.externalGatewayId = data.external_gateway_id;`
`90`		`-`
	`91`	`+ this.paymentMethodOrder = data.payment_method_order;`
`91`	`92`	`return this;`
`92`	`93`	`}`
`93`	`94`	`}`