"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/react/index.ts
var react_exports = {};
__export(react_exports, {
ClerkInstanceContext: () => ClerkInstanceContext,
ClientContext: () => ClientContext,
OptionsContext: () => OptionsContext,
OrganizationProvider: () => OrganizationProvider,
SessionContext: () => SessionContext,
UserContext: () => UserContext,
__experimental_CheckoutProvider: () => __experimental_CheckoutProvider,
__experimental_PaymentElement: () => PaymentElement2,
__experimental_PaymentElementProvider: () => PaymentElementProvider,
__experimental_useCheckout: () => useCheckout,
__experimental_usePaymentAttempts: () => usePaymentAttempts,
__experimental_usePaymentElement: () => usePaymentElement,
__experimental_usePaymentMethods: () => usePaymentMethods,
__experimental_usePlans: () => usePlans,
__experimental_useStatements: () => useStatements,
__experimental_useSubscription: () => useSubscription,
assertContextExists: () => assertContextExists,
createContextAndHook: () => createContextAndHook,
isDeeplyEqual: () => isDeeplyEqual,
useAssertWrappedByClerkProvider: () => useAssertWrappedByClerkProvider,
useClerk: () => useClerk,
useClerkInstanceContext: () => useClerkInstanceContext,
useClientContext: () => useClientContext,
useDeepEqualMemo: () => useDeepEqualMemo,
useOptionsContext: () => useOptionsContext,
useOrganization: () => useOrganization,
useOrganizationContext: () => useOrganizationContext,
useOrganizationList: () => useOrganizationList,
useReverification: () => useReverification,
useSafeLayoutEffect: () => useSafeLayoutEffect,
useSession: () => useSession,
useSessionContext: () => useSessionContext,
useSessionList: () => useSessionList,
useUser: () => useUser,
useUserContext: () => useUserContext
});
module.exports = __toCommonJS(react_exports);
// src/react/hooks/createContextAndHook.ts
var import_react = __toESM(require("react"));
function assertContextExists(contextVal, msgOrCtx) {
if (!contextVal) {
throw typeof msgOrCtx === "string" ? new Error(msgOrCtx) : new Error(`${msgOrCtx.displayName} not found`);
}
}
var createContextAndHook = (displayName, options) => {
const { assertCtxFn = assertContextExists } = options || {};
const Ctx = import_react.default.createContext(void 0);
Ctx.displayName = displayName;
const useCtx = () => {
const ctx = import_react.default.useContext(Ctx);
assertCtxFn(ctx, `${displayName} not found`);
return ctx.value;
};
const useCtxWithoutGuarantee = () => {
const ctx = import_react.default.useContext(Ctx);
return ctx ? ctx.value : {};
};
return [Ctx, useCtx, useCtxWithoutGuarantee];
};
// src/organization.ts
function getCurrentOrganizationMembership(organizationMemberships, organizationId) {
return organizationMemberships.find(
(organizationMembership) => organizationMembership.organization.id === organizationId
);
}
// src/telemetry/events/method-called.ts
var EVENT_METHOD_CALLED = "METHOD_CALLED";
var EVENT_SAMPLING_RATE = 0.1;
function eventMethodCalled(method, payload) {
return {
event: EVENT_METHOD_CALLED,
eventSamplingRate: EVENT_SAMPLING_RATE,
payload: {
method,
...payload
}
};
}
// src/react/contexts.tsx
var import_react2 = __toESM(require("react"));
// src/react/clerk-swr.ts
var clerk_swr_exports = {};
__export(clerk_swr_exports, {
useSWR: () => import_swr.default,
useSWRInfinite: () => import_infinite.default
});
__reExport(clerk_swr_exports, require("swr"));
var import_swr = __toESM(require("swr"));
var import_infinite = __toESM(require("swr/infinite"));
// src/react/contexts.tsx
var [ClerkInstanceContext, useClerkInstanceContext] = createContextAndHook("ClerkInstanceContext");
var [UserContext, useUserContext] = createContextAndHook("UserContext");
var [ClientContext, useClientContext] = createContextAndHook("ClientContext");
var [SessionContext, useSessionContext] = createContextAndHook(
"SessionContext"
);
var OptionsContext = import_react2.default.createContext({});
var [CheckoutContext, useCheckoutContext] = createContextAndHook("CheckoutContext");
var __experimental_CheckoutProvider = ({ children, ...rest }) => {
return /* @__PURE__ */ import_react2.default.createElement(CheckoutContext.Provider, { value: { value: rest } }, children);
};
function useOptionsContext() {
const context = import_react2.default.useContext(OptionsContext);
if (context === void 0) {
throw new Error("useOptions must be used within an OptionsContext");
}
return context;
}
var [OrganizationContextInternal, useOrganizationContext] = createContextAndHook("OrganizationContext");
var OrganizationProvider = ({
children,
organization,
swrConfig
}) => {
return /* @__PURE__ */ import_react2.default.createElement(clerk_swr_exports.SWRConfig, { value: swrConfig }, /* @__PURE__ */ import_react2.default.createElement(
OrganizationContextInternal.Provider,
{
value: {
value: { organization }
}
},
children
));
};
function useAssertWrappedByClerkProvider(displayNameOrFn) {
const ctx = import_react2.default.useContext(ClerkInstanceContext);
if (!ctx) {
if (typeof displayNameOrFn === "function") {
displayNameOrFn();
return;
}
throw new Error(
`${displayNameOrFn} can only be used within the component.
Possible fixes:
1. Ensure that the is correctly wrapping your application where this component is used.
2. Check for multiple versions of the \`@clerk/shared\` package in your project. Use a tool like \`npm ls @clerk/shared\` to identify multiple versions, and update your dependencies to only rely on one.
Learn more: https://clerk.com/docs/components/clerk-provider`.trim()
);
}
}
// src/react/hooks/usePagesOrInfinite.ts
var import_react3 = require("react");
function getDifferentKeys(obj1, obj2) {
const keysSet = new Set(Object.keys(obj2));
const differentKeysObject = {};
for (const key1 of Object.keys(obj1)) {
if (!keysSet.has(key1)) {
differentKeysObject[key1] = obj1[key1];
}
}
return differentKeysObject;
}
var useWithSafeValues = (params, defaultValues) => {
const shouldUseDefaults = typeof params === "boolean" && params;
const initialPageRef = (0, import_react3.useRef)(
shouldUseDefaults ? defaultValues.initialPage : params?.initialPage ?? defaultValues.initialPage
);
const pageSizeRef = (0, import_react3.useRef)(shouldUseDefaults ? defaultValues.pageSize : params?.pageSize ?? defaultValues.pageSize);
const newObj = {};
for (const key of Object.keys(defaultValues)) {
newObj[key] = shouldUseDefaults ? defaultValues[key] : params?.[key] ?? defaultValues[key];
}
return {
...newObj,
initialPage: initialPageRef.current,
pageSize: pageSizeRef.current
};
};
var cachingSWROptions = {
dedupingInterval: 1e3 * 60,
focusThrottleInterval: 1e3 * 60 * 2
};
var usePagesOrInfinite = (params, fetcher, config, cacheKeys) => {
const [paginatedPage, setPaginatedPage] = (0, import_react3.useState)(params.initialPage ?? 1);
const initialPageRef = (0, import_react3.useRef)(params.initialPage ?? 1);
const pageSizeRef = (0, import_react3.useRef)(params.pageSize ?? 10);
const enabled = config.enabled ?? true;
const cacheMode = config.__experimental_mode === "cache";
const triggerInfinite = config.infinite ?? false;
const keepPreviousData = config.keepPreviousData ?? false;
const isSignedIn = config.isSignedIn;
const pagesCacheKey = {
...cacheKeys,
...params,
initialPage: paginatedPage,
pageSize: pageSizeRef.current
};
const shouldFetch = !triggerInfinite && enabled && (!cacheMode ? !!fetcher : true);
const swrKey = isSignedIn ? pagesCacheKey : shouldFetch ? pagesCacheKey : null;
const swrFetcher = !cacheMode && !!fetcher ? (cacheKeyParams) => {
if (isSignedIn === false) {
return null;
}
const requestParams = getDifferentKeys(cacheKeyParams, cacheKeys);
return fetcher({ ...params, ...requestParams });
} : null;
const {
data: swrData,
isValidating: swrIsValidating,
isLoading: swrIsLoading,
error: swrError,
mutate: swrMutate
} = (0, import_swr.default)(swrKey, swrFetcher, { keepPreviousData, ...cachingSWROptions });
const {
data: swrInfiniteData,
isLoading: swrInfiniteIsLoading,
isValidating: swrInfiniteIsValidating,
error: swrInfiniteError,
size,
setSize,
mutate: swrInfiniteMutate
} = (0, import_infinite.default)(
(pageIndex) => {
if (!triggerInfinite || !enabled) {
return null;
}
return {
...params,
...cacheKeys,
initialPage: initialPageRef.current + pageIndex,
pageSize: pageSizeRef.current
};
},
(cacheKeyParams) => {
const requestParams = getDifferentKeys(cacheKeyParams, cacheKeys);
return fetcher?.(requestParams);
},
cachingSWROptions
);
const page = (0, import_react3.useMemo)(() => {
if (triggerInfinite) {
return size;
}
return paginatedPage;
}, [triggerInfinite, size, paginatedPage]);
const fetchPage = (0, import_react3.useCallback)(
(numberOrgFn) => {
if (triggerInfinite) {
void setSize(numberOrgFn);
return;
}
return setPaginatedPage(numberOrgFn);
},
[setSize]
);
const data = (0, import_react3.useMemo)(() => {
if (triggerInfinite) {
return swrInfiniteData?.map((a) => a?.data).flat() ?? [];
}
return swrData?.data ?? [];
}, [triggerInfinite, swrData, swrInfiniteData]);
const count = (0, import_react3.useMemo)(() => {
if (triggerInfinite) {
return swrInfiniteData?.[swrInfiniteData?.length - 1]?.total_count || 0;
}
return swrData?.total_count ?? 0;
}, [triggerInfinite, swrData, swrInfiniteData]);
const isLoading = triggerInfinite ? swrInfiniteIsLoading : swrIsLoading;
const isFetching = triggerInfinite ? swrInfiniteIsValidating : swrIsValidating;
const error = (triggerInfinite ? swrInfiniteError : swrError) ?? null;
const isError = !!error;
const fetchNext = (0, import_react3.useCallback)(() => {
fetchPage((n) => Math.max(0, n + 1));
}, [fetchPage]);
const fetchPrevious = (0, import_react3.useCallback)(() => {
fetchPage((n) => Math.max(0, n - 1));
}, [fetchPage]);
const offsetCount = (initialPageRef.current - 1) * pageSizeRef.current;
const pageCount = Math.ceil((count - offsetCount) / pageSizeRef.current);
const hasNextPage = count - offsetCount * pageSizeRef.current > page * pageSizeRef.current;
const hasPreviousPage = (page - 1) * pageSizeRef.current > offsetCount * pageSizeRef.current;
const setData = triggerInfinite ? (value) => swrInfiniteMutate(value, {
revalidate: false
}) : (value) => swrMutate(value, {
revalidate: false
});
const revalidate = triggerInfinite ? () => swrInfiniteMutate() : () => swrMutate();
return {
data,
count,
error,
isLoading,
isFetching,
isError,
page,
pageCount,
fetchPage,
fetchNext,
fetchPrevious,
hasNextPage,
hasPreviousPage,
// Let the hook return type define this type
revalidate,
// Let the hook return type define this type
setData
};
};
// src/react/hooks/useOrganization.tsx
var undefinedPaginatedResource = {
data: void 0,
count: void 0,
error: void 0,
isLoading: false,
isFetching: false,
isError: false,
page: void 0,
pageCount: void 0,
fetchPage: void 0,
fetchNext: void 0,
fetchPrevious: void 0,
hasNextPage: false,
hasPreviousPage: false,
revalidate: void 0,
setData: void 0
};
function useOrganization(params) {
const {
domains: domainListParams,
membershipRequests: membershipRequestsListParams,
memberships: membersListParams,
invitations: invitationsListParams
} = params || {};
useAssertWrappedByClerkProvider("useOrganization");
const { organization } = useOrganizationContext();
const session = useSessionContext();
const domainSafeValues = useWithSafeValues(domainListParams, {
initialPage: 1,
pageSize: 10,
keepPreviousData: false,
infinite: false,
enrollmentMode: void 0
});
const membershipRequestSafeValues = useWithSafeValues(membershipRequestsListParams, {
initialPage: 1,
pageSize: 10,
status: "pending",
keepPreviousData: false,
infinite: false
});
const membersSafeValues = useWithSafeValues(membersListParams, {
initialPage: 1,
pageSize: 10,
role: void 0,
keepPreviousData: false,
infinite: false,
query: void 0
});
const invitationsSafeValues = useWithSafeValues(invitationsListParams, {
initialPage: 1,
pageSize: 10,
status: ["pending"],
keepPreviousData: false,
infinite: false
});
const clerk = useClerkInstanceContext();
clerk.telemetry?.record(eventMethodCalled("useOrganization"));
const domainParams = typeof domainListParams === "undefined" ? void 0 : {
initialPage: domainSafeValues.initialPage,
pageSize: domainSafeValues.pageSize,
enrollmentMode: domainSafeValues.enrollmentMode
};
const membershipRequestParams = typeof membershipRequestsListParams === "undefined" ? void 0 : {
initialPage: membershipRequestSafeValues.initialPage,
pageSize: membershipRequestSafeValues.pageSize,
status: membershipRequestSafeValues.status
};
const membersParams = typeof membersListParams === "undefined" ? void 0 : {
initialPage: membersSafeValues.initialPage,
pageSize: membersSafeValues.pageSize,
role: membersSafeValues.role,
query: membersSafeValues.query
};
const invitationsParams = typeof invitationsListParams === "undefined" ? void 0 : {
initialPage: invitationsSafeValues.initialPage,
pageSize: invitationsSafeValues.pageSize,
status: invitationsSafeValues.status
};
const domains = usePagesOrInfinite(
{
...domainParams
},
organization?.getDomains,
{
keepPreviousData: domainSafeValues.keepPreviousData,
infinite: domainSafeValues.infinite,
enabled: !!domainParams
},
{
type: "domains",
organizationId: organization?.id
}
);
const membershipRequests = usePagesOrInfinite(
{
...membershipRequestParams
},
organization?.getMembershipRequests,
{
keepPreviousData: membershipRequestSafeValues.keepPreviousData,
infinite: membershipRequestSafeValues.infinite,
enabled: !!membershipRequestParams
},
{
type: "membershipRequests",
organizationId: organization?.id
}
);
const memberships = usePagesOrInfinite(
membersParams || {},
organization?.getMemberships,
{
keepPreviousData: membersSafeValues.keepPreviousData,
infinite: membersSafeValues.infinite,
enabled: !!membersParams
},
{
type: "members",
organizationId: organization?.id
}
);
const invitations = usePagesOrInfinite(
{
...invitationsParams
},
organization?.getInvitations,
{
keepPreviousData: invitationsSafeValues.keepPreviousData,
infinite: invitationsSafeValues.infinite,
enabled: !!invitationsParams
},
{
type: "invitations",
organizationId: organization?.id
}
);
if (organization === void 0) {
return {
isLoaded: false,
organization: void 0,
membership: void 0,
domains: undefinedPaginatedResource,
membershipRequests: undefinedPaginatedResource,
memberships: undefinedPaginatedResource,
invitations: undefinedPaginatedResource
};
}
if (organization === null) {
return {
isLoaded: true,
organization: null,
membership: null,
domains: null,
membershipRequests: null,
memberships: null,
invitations: null
};
}
if (!clerk.loaded && organization) {
return {
isLoaded: true,
organization,
membership: void 0,
domains: undefinedPaginatedResource,
membershipRequests: undefinedPaginatedResource,
memberships: undefinedPaginatedResource,
invitations: undefinedPaginatedResource
};
}
return {
isLoaded: clerk.loaded,
organization,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
membership: getCurrentOrganizationMembership(session.user.organizationMemberships, organization.id),
// your membership in the current org
domains,
membershipRequests,
memberships,
invitations
};
}
// src/react/hooks/useOrganizationList.tsx
var undefinedPaginatedResource2 = {
data: void 0,
count: void 0,
error: void 0,
isLoading: false,
isFetching: false,
isError: false,
page: void 0,
pageCount: void 0,
fetchPage: void 0,
fetchNext: void 0,
fetchPrevious: void 0,
hasNextPage: false,
hasPreviousPage: false,
revalidate: void 0,
setData: void 0
};
function useOrganizationList(params) {
const { userMemberships, userInvitations, userSuggestions } = params || {};
useAssertWrappedByClerkProvider("useOrganizationList");
const userMembershipsSafeValues = useWithSafeValues(userMemberships, {
initialPage: 1,
pageSize: 10,
keepPreviousData: false,
infinite: false
});
const userInvitationsSafeValues = useWithSafeValues(userInvitations, {
initialPage: 1,
pageSize: 10,
status: "pending",
keepPreviousData: false,
infinite: false
});
const userSuggestionsSafeValues = useWithSafeValues(userSuggestions, {
initialPage: 1,
pageSize: 10,
status: "pending",
keepPreviousData: false,
infinite: false
});
const clerk = useClerkInstanceContext();
const user = useUserContext();
clerk.telemetry?.record(eventMethodCalled("useOrganizationList"));
const userMembershipsParams = typeof userMemberships === "undefined" ? void 0 : {
initialPage: userMembershipsSafeValues.initialPage,
pageSize: userMembershipsSafeValues.pageSize
};
const userInvitationsParams = typeof userInvitations === "undefined" ? void 0 : {
initialPage: userInvitationsSafeValues.initialPage,
pageSize: userInvitationsSafeValues.pageSize,
status: userInvitationsSafeValues.status
};
const userSuggestionsParams = typeof userSuggestions === "undefined" ? void 0 : {
initialPage: userSuggestionsSafeValues.initialPage,
pageSize: userSuggestionsSafeValues.pageSize,
status: userSuggestionsSafeValues.status
};
const isClerkLoaded = !!(clerk.loaded && user);
const memberships = usePagesOrInfinite(
userMembershipsParams || {},
user?.getOrganizationMemberships,
{
keepPreviousData: userMembershipsSafeValues.keepPreviousData,
infinite: userMembershipsSafeValues.infinite,
enabled: !!userMembershipsParams
},
{
type: "userMemberships",
userId: user?.id
}
);
const invitations = usePagesOrInfinite(
{
...userInvitationsParams
},
user?.getOrganizationInvitations,
{
keepPreviousData: userInvitationsSafeValues.keepPreviousData,
infinite: userInvitationsSafeValues.infinite,
enabled: !!userInvitationsParams
},
{
type: "userInvitations",
userId: user?.id
}
);
const suggestions = usePagesOrInfinite(
{
...userSuggestionsParams
},
user?.getOrganizationSuggestions,
{
keepPreviousData: userSuggestionsSafeValues.keepPreviousData,
infinite: userSuggestionsSafeValues.infinite,
enabled: !!userSuggestionsParams
},
{
type: "userSuggestions",
userId: user?.id
}
);
if (!isClerkLoaded) {
return {
isLoaded: false,
createOrganization: void 0,
setActive: void 0,
userMemberships: undefinedPaginatedResource2,
userInvitations: undefinedPaginatedResource2,
userSuggestions: undefinedPaginatedResource2
};
}
return {
isLoaded: isClerkLoaded,
setActive: clerk.setActive,
createOrganization: clerk.createOrganization,
userMemberships: memberships,
userInvitations: invitations,
userSuggestions: suggestions
};
}
// src/react/hooks/useSafeLayoutEffect.tsx
var import_react4 = __toESM(require("react"));
var useSafeLayoutEffect = typeof window !== "undefined" ? import_react4.default.useLayoutEffect : import_react4.default.useEffect;
// src/react/hooks/useSession.ts
var hookName = `useSession`;
var useSession = () => {
useAssertWrappedByClerkProvider(hookName);
const session = useSessionContext();
const clerk = useClerkInstanceContext();
clerk.telemetry?.record(eventMethodCalled(hookName));
if (session === void 0) {
return { isLoaded: false, isSignedIn: void 0, session: void 0 };
}
if (session === null) {
return { isLoaded: true, isSignedIn: false, session: null };
}
return { isLoaded: true, isSignedIn: clerk.isSignedIn, session };
};
// src/react/hooks/useSessionList.ts
var hookName2 = "useSessionList";
var useSessionList = () => {
useAssertWrappedByClerkProvider(hookName2);
const isomorphicClerk = useClerkInstanceContext();
const client = useClientContext();
const clerk = useClerkInstanceContext();
clerk.telemetry?.record(eventMethodCalled(hookName2));
if (!client) {
return { isLoaded: false, sessions: void 0, setActive: void 0 };
}
return {
isLoaded: true,
sessions: client.sessions,
setActive: isomorphicClerk.setActive
};
};
// src/react/hooks/useUser.ts
var hookName3 = "useUser";
function useUser() {
useAssertWrappedByClerkProvider(hookName3);
const user = useUserContext();
const clerk = useClerkInstanceContext();
clerk.telemetry?.record(eventMethodCalled(hookName3));
if (user === void 0) {
return { isLoaded: false, isSignedIn: void 0, user: void 0 };
}
if (user === null) {
return { isLoaded: true, isSignedIn: false, user: null };
}
return { isLoaded: true, isSignedIn: true, user };
}
// src/react/hooks/useClerk.ts
var useClerk = () => {
useAssertWrappedByClerkProvider("useClerk");
return useClerkInstanceContext();
};
// src/react/hooks/useDeepEqualMemo.ts
var import_dequal = require("dequal");
var import_react5 = __toESM(require("react"));
var useDeepEqualMemoize = (value) => {
const ref = import_react5.default.useRef(value);
if (!(0, import_dequal.dequal)(value, ref.current)) {
ref.current = value;
}
return import_react5.default.useMemo(() => ref.current, [ref.current]);
};
var useDeepEqualMemo = (factory, dependencyArray) => {
return import_react5.default.useMemo(factory, useDeepEqualMemoize(dependencyArray));
};
var isDeeplyEqual = import_dequal.dequal;
// src/react/hooks/useReverification.ts
var import_react6 = require("react");
// src/authorization.ts
var TYPES_TO_OBJECTS = {
strict_mfa: {
afterMinutes: 10,
level: "multi_factor"
},
strict: {
afterMinutes: 10,
level: "second_factor"
},
moderate: {
afterMinutes: 60,
level: "second_factor"
},
lax: {
afterMinutes: 1440,
level: "second_factor"
}
};
var ALLOWED_LEVELS = /* @__PURE__ */ new Set(["first_factor", "second_factor", "multi_factor"]);
var ALLOWED_TYPES = /* @__PURE__ */ new Set(["strict_mfa", "strict", "moderate", "lax"]);
var isValidMaxAge = (maxAge) => typeof maxAge === "number" && maxAge > 0;
var isValidLevel = (level) => ALLOWED_LEVELS.has(level);
var isValidVerificationType = (type) => ALLOWED_TYPES.has(type);
var validateReverificationConfig = (config) => {
if (!config) {
return false;
}
const convertConfigToObject = (config2) => {
if (typeof config2 === "string") {
return TYPES_TO_OBJECTS[config2];
}
return config2;
};
const isValidStringValue = typeof config === "string" && isValidVerificationType(config);
const isValidObjectValue = typeof config === "object" && isValidLevel(config.level) && isValidMaxAge(config.afterMinutes);
if (isValidStringValue || isValidObjectValue) {
return convertConfigToObject.bind(null, config);
}
return false;
};
// src/authorization-errors.ts
var REVERIFICATION_REASON = "reverification-error";
var reverificationError = (missingConfig) => ({
clerk_error: {
type: "forbidden",
reason: REVERIFICATION_REASON,
metadata: {
reverification: missingConfig
}
}
});
var isReverificationHint = (result) => {
return result && typeof result === "object" && "clerk_error" in result && result.clerk_error?.type === "forbidden" && result.clerk_error?.reason === REVERIFICATION_REASON;
};
// src/error.ts
function isClerkAPIResponseError(err) {
return err && "clerkError" in err;
}
var ClerkRuntimeError = class _ClerkRuntimeError extends Error {
constructor(message, { code }) {
const prefix = "\u{1F512} Clerk:";
const regex = new RegExp(prefix.replace(" ", "\\s*"), "i");
const sanitized = message.replace(regex, "");
const _message = `${prefix} ${sanitized.trim()}
(code="${code}")
`;
super(_message);
/**
* Returns a string representation of the error.
*
* @returns A formatted string with the error name and message.
*/
this.toString = () => {
return `[${this.name}]
Message:${this.message}`;
};
Object.setPrototypeOf(this, _ClerkRuntimeError.prototype);
this.code = code;
this.message = _message;
this.clerkRuntimeError = true;
this.name = "ClerkRuntimeError";
}
};
var DefaultMessages = Object.freeze({
InvalidProxyUrlErrorMessage: `The proxyUrl passed to Clerk is invalid. The expected value for proxyUrl is an absolute URL or a relative path with a leading '/'. (key={{url}})`,
InvalidPublishableKeyErrorMessage: `The publishableKey passed to Clerk is invalid. You can get your Publishable key at https://dashboard.clerk.com/last-active?path=api-keys. (key={{key}})`,
MissingPublishableKeyErrorMessage: `Missing publishableKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.`,
MissingSecretKeyErrorMessage: `Missing secretKey. You can get your key at https://dashboard.clerk.com/last-active?path=api-keys.`,
MissingClerkProvider: `{{source}} can only be used within the component. Learn more: https://clerk.com/docs/components/clerk-provider`
});
// src/underscore.ts
function snakeToCamel(str) {
return str ? str.replace(/([-_][a-z])/g, (match) => match.toUpperCase().replace(/-|_/, "")) : "";
}
function camelToSnake(str) {
return str ? str.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`) : "";
}
var createDeepObjectTransformer = (transform) => {
const deepTransform = (obj) => {
if (!obj) {
return obj;
}
if (Array.isArray(obj)) {
return obj.map((el) => {
if (typeof el === "object" || Array.isArray(el)) {
return deepTransform(el);
}
return el;
});
}
const copy = { ...obj };
const keys = Object.keys(copy);
for (const oldName of keys) {
const newName = transform(oldName.toString());
if (newName !== oldName) {
copy[newName] = copy[oldName];
delete copy[oldName];
}
if (typeof copy[newName] === "object") {
copy[newName] = deepTransform(copy[newName]);
}
}
return copy;
};
return deepTransform;
};
var deepCamelToSnake = createDeepObjectTransformer(camelToSnake);
var deepSnakeToCamel = createDeepObjectTransformer(snakeToCamel);
// src/utils/noop.ts
var noop = (..._args) => {
};
// src/utils/createDeferredPromise.ts
var createDeferredPromise = () => {
let resolve = noop;
let reject = noop;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return { promise, resolve, reject };
};
// src/react/hooks/useReverification.ts
var CLERK_API_REVERIFICATION_ERROR_CODE = "session_reverification_required";
async function resolveResult(result) {
try {
const r = await result;
if (r instanceof Response) {
return r.json();
}
return r;
} catch (e) {
if (isClerkAPIResponseError(e) && e.errors.find(({ code }) => code === CLERK_API_REVERIFICATION_ERROR_CODE)) {
return reverificationError();
}
throw e;
}
}
function createReverificationHandler(params) {
function assertReverification(fetcher) {
return async (...args) => {
let result = await resolveResult(fetcher(...args));
if (isReverificationHint(result)) {
const resolvers = createDeferredPromise();
const isValidMetadata = validateReverificationConfig(result.clerk_error.metadata?.reverification);
const level = isValidMetadata ? isValidMetadata().level : void 0;
const cancel = () => {
resolvers.reject(
new ClerkRuntimeError("User cancelled attempted verification", {
code: "reverification_cancelled"
})
);
};
const complete = () => {
resolvers.resolve(true);
};
if (params.onNeedsReverification === void 0) {
params.openUIComponent?.({
level,
afterVerification: complete,
afterVerificationCancelled: cancel
});
} else {
params.onNeedsReverification({
cancel,
complete,
level
});
}
await resolvers.promise;
result = await resolveResult(fetcher(...args));
}
return result;
};
}
return assertReverification;
}
var useReverification = (fetcher, options) => {
const { __internal_openReverification, telemetry } = useClerk();
const fetcherRef = (0, import_react6.useRef)(fetcher);
const optionsRef = (0, import_react6.useRef)(options);
telemetry?.record(
eventMethodCalled("useReverification", {
onNeedsReverification: Boolean(options?.onNeedsReverification)
})
);
useSafeLayoutEffect(() => {
fetcherRef.current = fetcher;
optionsRef.current = options;
});
return (0, import_react6.useCallback)(
(...args) => {
const handler = createReverificationHandler({
openUIComponent: __internal_openReverification,
telemetry,
...optionsRef.current
})(fetcherRef.current);
return handler(...args);
},
[__internal_openReverification, telemetry]
);
};
// src/react/hooks/createCommerceHook.tsx
function createCommercePaginatedHook({
hookName: hookName5,
resourceType,
useFetcher,
options
}) {
return function useCommerceHook(params) {
const { for: _for, ...paginationParams } = params || {};
useAssertWrappedByClerkProvider(hookName5);
const fetchFn = useFetcher(_for || "user");
const safeValues = useWithSafeValues(paginationParams, {
initialPage: 1,
pageSize: 10,
keepPreviousData: false,
infinite: false,
__experimental_mode: void 0
});
const clerk = useClerkInstanceContext();
const environment = clerk.__unstable__environment;
const user = useUserContext();
const { organization } = useOrganizationContext();
clerk.telemetry?.record(eventMethodCalled(hookName5));
const hookParams = typeof paginationParams === "undefined" ? void 0 : {
initialPage: safeValues.initialPage,
pageSize: safeValues.pageSize,
..._for === "organization" ? { orgId: organization?.id } : {}
};
const isOrganization = _for === "organization";
const billingEnabled = isOrganization ? environment?.commerceSettings.billing.organization.enabled : environment?.commerceSettings.billing.user.enabled;
const isEnabled = !!hookParams && clerk.loaded && !!billingEnabled;
const result = usePagesOrInfinite(
hookParams || {},
fetchFn,
{
keepPreviousData: safeValues.keepPreviousData,
infinite: safeValues.infinite,
enabled: isEnabled,
...options?.unauthenticated ? {} : { isSignedIn: Boolean(user) },
__experimental_mode: safeValues.__experimental_mode
},
{
type: resourceType,
userId: user?.id,
..._for === "organization" ? { orgId: organization?.id } : {}
}
);
return result;
};
}
// src/react/hooks/useStatements.tsx
var useStatements = createCommercePaginatedHook({
hookName: "useStatements",
resourceType: "commerce-statements",
useFetcher: () => {
const clerk = useClerkInstanceContext();
if (clerk.loaded) {
return clerk.billing.getStatements;
}
return void 0;
}
});
// src/react/hooks/usePaymentAttempts.tsx
var usePaymentAttempts = createCommercePaginatedHook({
hookName: "usePaymentAttempts",
resourceType: "commerce-payment-attempts",
useFetcher: () => {
const clerk = useClerkInstanceContext();
if (clerk.loaded) {
return clerk.billing.getPaymentAttempts;
}
return void 0;
}
});
// src/react/hooks/usePaymentMethods.tsx
var usePaymentMethods = createCommercePaginatedHook({
hookName: "usePaymentMethods",
resourceType: "commerce-payment-methods",
useFetcher: (resource) => {
const { organization } = useOrganizationContext();
const user = useUserContext();
if (resource === "organization") {
return organization?.getPaymentSources;
}
return user?.getPaymentSources;
}
});
// src/react/hooks/usePlans.tsx
var usePlans = createCommercePaginatedHook({
hookName: "usePlans",
resourceType: "commerce-plans",
useFetcher: (_for) => {
const clerk = useClerkInstanceContext();
if (!clerk.loaded) {
return void 0;
}
return ({ orgId, ...rest }) => {
return clerk.billing.getPlans({ ...rest, for: _for });
};
},
options: {
unauthenticated: true
}
});
// src/react/hooks/useSubscription.tsx
var import_react7 = require("react");
var hookName4 = "useSubscription";
var useSubscription = (params) => {
useAssertWrappedByClerkProvider(hookName4);
const clerk = useClerkInstanceContext();
const user = useUserContext();
const { organization } = useOrganizationContext();
const environment = clerk.__unstable__environment;
clerk.telemetry?.record(eventMethodCalled(hookName4));
const isOrganization = params?.for === "organization";
const billingEnabled = isOrganization ? environment?.commerceSettings.billing.organization.enabled : environment?.commerceSettings.billing.user.enabled;
const swr = (0, import_swr.default)(
billingEnabled ? {
type: "commerce-subscription",
userId: user?.id,
args: { orgId: isOrganization ? organization?.id : void 0 }
} : null,
({ args, userId }) => {
if (userId) {
return clerk.billing.getSubscription(args);
}
return null;
},
{
dedupingInterval: 1e3 * 60,
keepPreviousData: params?.keepPreviousData
}
);
const revalidate = (0, import_react7.useCallback)(() => swr.mutate(), [swr.mutate]);
return {
data: swr.data,
error: swr.error,
isLoading: swr.isLoading,
isFetching: swr.isValidating,
revalidate
};
};
// src/react/hooks/useCheckout.ts
var import_react8 = require("react");
var useCheckout = (options) => {
const contextOptions = useCheckoutContext();
const { for: forOrganization, planId, planPeriod } = options || contextOptions;
const clerk = useClerk();
const { organization } = useOrganization();
const { isLoaded, user } = useUser();
if (!isLoaded) {
throw new Error("Clerk: Ensure that `useCheckout` is inside a component wrapped with ``.");
}
if (!user) {
throw new Error("Clerk: Ensure that `useCheckout` is inside a component wrapped with ``.");
}
if (forOrganization === "organization" && !organization) {
throw new Error(
"Clerk: Ensure your flow checks for an active organization. Retrieve `orgId` from `useAuth()` and confirm it is defined. For SSR, see: https://clerk.com/docs/references/backend/types/auth-object#how-to-access-the-auth-object"
);
}
const manager = (0, import_react8.useMemo)(
() => clerk.__experimental_checkout({ planId, planPeriod, for: forOrganization }),
[user.id, organization?.id, planId, planPeriod, forOrganization]
);
const managerProperties = (0, import_react8.useSyncExternalStore)(
(cb) => manager.subscribe(cb),
() => manager.getState(),
() => manager.getState()
);
const properties = (0, import_react8.useMemo)(() => {
if (!managerProperties.checkout) {
return {
id: null,
externalClientSecret: null,
externalGatewayId: null,
status: null,
totals: null,
isImmediatePlanChange: null,
planPeriod: null,
plan: null,
paymentSource: null,
freeTrialEndsAt: null,
payer: null
};
}
const {
// eslint-disable-next-line @typescript-eslint/unbound-method
reload,
confirm,
pathRoot,
// All the above need to be removed from the properties
...rest
} = managerProperties.checkout;
return rest;
}, [managerProperties.checkout]);
const checkout = {
...properties,
getState: manager.getState,
start: manager.start,
confirm: manager.confirm,
clear: manager.clear,
finalize: manager.finalize,
isStarting: managerProperties.isStarting,
isConfirming: managerProperties.isConfirming,
error: managerProperties.error,
status: managerProperties.status,
fetchStatus: managerProperties.fetchStatus
};
return {
checkout
};
};
// src/react/commerce.tsx
var import_react11 = __toESM(require("react"));
var import_swr2 = __toESM(require("swr"));
var import_mutation = __toESM(require("swr/mutation"));
// src/react/stripe-react/index.tsx
var import_react10 = __toESM(require("react"));
// src/react/stripe-react/utils.ts
var import_react9 = require("react");
var usePrevious = (value) => {
const ref = (0, import_react9.useRef)(value);
(0, import_react9.useEffect)(() => {
ref.current = value;
}, [value]);
return ref.current;
};
var useAttachEvent = (element, event, cb) => {
const cbDefined = !!cb;
const cbRef = (0, import_react9.useRef)(cb);
(0, import_react9.useEffect)(() => {
cbRef.current = cb;
}, [cb]);
(0, import_react9.useEffect)(() => {
if (!cbDefined || !element) {
return () => {
};
}
const decoratedCb = (...args) => {
if (cbRef.current) {
cbRef.current(...args);
}
};
element.on(event, decoratedCb);
return () => {
element.off(event, decoratedCb);
};
}, [cbDefined, event, element, cbRef]);
};
// src/react/stripe-react/index.tsx
var ElementsContext = import_react10.default.createContext(null);
ElementsContext.displayName = "ElementsContext";
var parseElementsContext = (ctx, useCase) => {
if (!ctx) {
throw new Error(
`Could not find Elements context; You need to wrap the part of your app that ${useCase} in an provider.`
);
}
return ctx;
};
var Elements = ({
stripe: rawStripeProp,
options,
children
}) => {
const parsed = import_react10.default.useMemo(() => parseStripeProp(rawStripeProp), [rawStripeProp]);
const [ctx, setContext] = import_react10.default.useState(() => ({
stripe: parsed.tag === "sync" ? parsed.stripe : null,
elements: parsed.tag === "sync" ? parsed.stripe.elements(options) : null
}));
import_react10.default.useEffect(() => {
let isMounted = true;
const safeSetContext = (stripe) => {
setContext((ctx2) => {
if (ctx2.stripe) {
return ctx2;
}
return {
stripe,
elements: stripe.elements(options)
};
});
};
if (parsed.tag === "async" && !ctx.stripe) {
parsed.stripePromise.then((stripe) => {
if (stripe && isMounted) {
safeSetContext(stripe);
}
});
} else if (parsed.tag === "sync" && !ctx.stripe) {
safeSetContext(parsed.stripe);
}
return () => {
isMounted = false;
};
}, [parsed, ctx, options]);
const prevStripe = usePrevious(rawStripeProp);
import_react10.default.useEffect(() => {
if (prevStripe !== null && prevStripe !== rawStripeProp) {
console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.");
}
}, [prevStripe, rawStripeProp]);
const prevOptions = usePrevious(options);
import_react10.default.useEffect(() => {
if (!ctx.elements) {
return;
}
const updates = extractAllowedOptionsUpdates(options, prevOptions, ["clientSecret", "fonts"]);
if (updates) {
ctx.elements.update(updates);
}
}, [options, prevOptions, ctx.elements]);
return /* @__PURE__ */ import_react10.default.createElement(ElementsContext.Provider, { value: ctx }, children);
};
var useElementsContextWithUseCase = (useCaseMessage) => {
const ctx = import_react10.default.useContext(ElementsContext);
return parseElementsContext(ctx, useCaseMessage);
};
var useElements = () => {
const { elements } = useElementsContextWithUseCase("calls useElements()");
return elements;
};
var INVALID_STRIPE_ERROR = "Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.";
var validateStripe = (maybeStripe, errorMsg = INVALID_STRIPE_ERROR) => {
if (maybeStripe === null || isStripe(maybeStripe)) {
return maybeStripe;
}
throw new Error(errorMsg);
};
var parseStripeProp = (raw, errorMsg = INVALID_STRIPE_ERROR) => {
if (isPromise(raw)) {
return {
tag: "async",
stripePromise: Promise.resolve(raw).then((result) => validateStripe(result, errorMsg))
};
}
const stripe = validateStripe(raw, errorMsg);
if (stripe === null) {
return { tag: "empty" };
}
return { tag: "sync", stripe };
};
var isUnknownObject = (raw) => {
return raw !== null && typeof raw === "object";
};
var isPromise = (raw) => {
return isUnknownObject(raw) && typeof raw.then === "function";
};
var isStripe = (raw) => {
return isUnknownObject(raw) && typeof raw.elements === "function" && typeof raw.createToken === "function" && typeof raw.createPaymentMethod === "function" && typeof raw.confirmCardPayment === "function";
};
var extractAllowedOptionsUpdates = (options, prevOptions, immutableKeys) => {
if (!isUnknownObject(options)) {
return null;
}
return Object.keys(options).reduce((newOptions, key) => {
const isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]);
if (immutableKeys.includes(key)) {
if (isUpdated) {
console.warn(`Unsupported prop change: options.${key} is not a mutable property.`);
}
return newOptions;
}
if (!isUpdated) {
return newOptions;
}
return { ...newOptions || {}, [key]: options[key] };
}, null);
};
var PLAIN_OBJECT_STR = "[object Object]";
var isEqual = (left, right) => {
if (!isUnknownObject(left) || !isUnknownObject(right)) {
return left === right;
}
const leftArray = Array.isArray(left);
const rightArray = Array.isArray(right);
if (leftArray !== rightArray) {
return false;
}
const leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
const rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
if (leftPlainObject !== rightPlainObject) {
return false;
}
if (!leftPlainObject && !leftArray) {
return left === right;
}
const leftKeys = Object.keys(left);
const rightKeys = Object.keys(right);
if (leftKeys.length !== rightKeys.length) {
return false;
}
const keySet = {};
for (let i = 0; i < leftKeys.length; i += 1) {
keySet[leftKeys[i]] = true;
}
for (let i = 0; i < rightKeys.length; i += 1) {
keySet[rightKeys[i]] = true;
}
const allKeys = Object.keys(keySet);
if (allKeys.length !== leftKeys.length) {
return false;
}
const l = left;
const r = right;
const pred = (key) => {
return isEqual(l[key], r[key]);
};
return allKeys.every(pred);
};
var useStripe = () => {
const { stripe } = useElementsOrCheckoutSdkContextWithUseCase("calls useStripe()");
return stripe;
};
var useElementsOrCheckoutSdkContextWithUseCase = (useCaseString) => {
const elementsContext = import_react10.default.useContext(ElementsContext);
return parseElementsContext(elementsContext, useCaseString);
};
var capitalized = (str) => str.charAt(0).toUpperCase() + str.slice(1);
var createElementComponent = (type, isServer2) => {
const displayName = `${capitalized(type)}Element`;
const ClientElement = ({
id,
className,
fallback,
options = {},
onBlur,
onFocus,
onReady,
onChange,
onEscape,
onClick,
onLoadError,
onLoaderStart,
onNetworksChange,
onConfirm,
onCancel,
onShippingAddressChange,
onShippingRateChange
}) => {
const ctx = useElementsOrCheckoutSdkContextWithUseCase(`mounts <${displayName}>`);
const elements = "elements" in ctx ? ctx.elements : null;
const [element, setElement] = import_react10.default.useState(null);
const elementRef = import_react10.default.useRef(null);
const domNode = import_react10.default.useRef(null);
const [isReady, setReady] = (0, import_react10.useState)(false);
useAttachEvent(element, "blur", onBlur);
useAttachEvent(element, "focus", onFocus);
useAttachEvent(element, "escape", onEscape);
useAttachEvent(element, "click", onClick);
useAttachEvent(element, "loaderror", onLoadError);
useAttachEvent(element, "loaderstart", onLoaderStart);
useAttachEvent(element, "networkschange", onNetworksChange);
useAttachEvent(element, "confirm", onConfirm);
useAttachEvent(element, "cancel", onCancel);
useAttachEvent(element, "shippingaddresschange", onShippingAddressChange);
useAttachEvent(element, "shippingratechange", onShippingRateChange);
useAttachEvent(element, "change", onChange);
let readyCallback;
if (onReady) {
readyCallback = () => {
setReady(true);
onReady(element);
};
}
useAttachEvent(element, "ready", readyCallback);
import_react10.default.useLayoutEffect(() => {
if (elementRef.current === null && domNode.current !== null && elements) {
let newElement = null;
if (elements) {
newElement = elements.create(type, options);
}
elementRef.current = newElement;
setElement(newElement);
if (newElement) {
newElement.mount(domNode.current);
}
}
}, [elements, options]);
const prevOptions = usePrevious(options);
import_react10.default.useEffect(() => {
if (!elementRef.current) {
return;
}
const updates = extractAllowedOptionsUpdates(options, prevOptions, ["paymentRequest"]);
if (updates && "update" in elementRef.current) {
elementRef.current.update(updates);
}
}, [options, prevOptions]);
import_react10.default.useLayoutEffect(() => {
return () => {
if (elementRef.current && typeof elementRef.current.destroy === "function") {
try {
elementRef.current.destroy();
elementRef.current = null;
} catch {
}
}
};
}, []);
return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, !isReady && fallback, /* @__PURE__ */ import_react10.default.createElement(
"div",
{
id,
style: {
height: isReady ? "unset" : "0px",
visibility: isReady ? "visible" : "hidden"
},
className,
ref: domNode
}
));
};
const ServerElement = (props) => {
useElementsOrCheckoutSdkContextWithUseCase(`mounts <${displayName}>`);
const { id, className } = props;
return /* @__PURE__ */ import_react10.default.createElement(
"div",
{
id,
className
}
);
};
const Element = isServer2 ? ServerElement : ClientElement;
Element.displayName = displayName;
Element.__elementType = type;
return Element;
};
var isServer = typeof window === "undefined";
var PaymentElement = createElementComponent("payment", isServer);
// src/react/commerce.tsx
var [StripeLibsContext, useStripeLibsContext] = createContextAndHook("StripeLibsContext");
var StripeLibsProvider = ({ children }) => {
const clerk = useClerk();
const { data: stripeClerkLibs } = (0, import_swr2.default)(
"clerk-stripe-sdk",
async () => {
const loadStripe = await clerk.__internal_loadStripeJs();
return { loadStripe };
},
{
keepPreviousData: true,
revalidateOnFocus: false,
dedupingInterval: Infinity
}
);
return /* @__PURE__ */ import_react11.default.createElement(
StripeLibsContext.Provider,
{
value: {
value: stripeClerkLibs || null
}
},
children
);
};
var useInternalEnvironment = () => {
const clerk = useClerk();
return clerk.__unstable__environment;
};
var usePaymentSourceUtils = (forResource = "user") => {
const { organization } = useOrganization();
const { user } = useUser();
const resource = forResource === "organization" ? organization : user;
const stripeClerkLibs = useStripeLibsContext();
const { data: initializedPaymentSource, trigger: initializePaymentSource } = (0, import_mutation.default)(
{
key: "commerce-payment-source-initialize",
resourceId: resource?.id
},
() => {
return resource?.initializePaymentSource({
gateway: "stripe"
});
}
);
const environment = useInternalEnvironment();
(0, import_react11.useEffect)(() => {
if (!resource?.id) {
return;
}
initializePaymentSource().catch(() => {
});
}, [resource?.id]);
const externalGatewayId = initializedPaymentSource?.externalGatewayId;
const externalClientSecret = initializedPaymentSource?.externalClientSecret;
const paymentMethodOrder = initializedPaymentSource?.paymentMethodOrder;
const stripePublishableKey = environment?.commerceSettings.billing.stripePublishableKey;
const { data: stripe } = (0, import_swr2.default)(
stripeClerkLibs && externalGatewayId && stripePublishableKey ? { key: "stripe-sdk", externalGatewayId, stripePublishableKey } : null,
({ stripePublishableKey: stripePublishableKey2, externalGatewayId: externalGatewayId2 }) => {
return stripeClerkLibs?.loadStripe(stripePublishableKey2, {
stripeAccount: externalGatewayId2
});
},
{
keepPreviousData: true,
revalidateOnFocus: false,
dedupingInterval: 1e3 * 60
// 1 minute
}
);
return {
stripe,
initializePaymentSource,
externalClientSecret,
paymentMethodOrder
};
};
var [PaymentElementContext, usePaymentElementContext] = createContextAndHook("PaymentElementContext");
var [StripeUtilsContext, useStripeUtilsContext] = createContextAndHook("StripeUtilsContext");
var ValidateStripeUtils = ({ children }) => {
const stripe = useStripe();
const elements = useElements();
return /* @__PURE__ */ import_react11.default.createElement(StripeUtilsContext.Provider, { value: { value: { stripe, elements } } }, children);
};
var DummyStripeUtils = ({ children }) => {
return /* @__PURE__ */ import_react11.default.createElement(StripeUtilsContext.Provider, { value: { value: {} } }, children);
};
var PropsProvider = ({ children, ...props }) => {
const utils = usePaymentSourceUtils(props.for);
const [isPaymentElementReady, setIsPaymentElementReady] = (0, import_react11.useState)(false);
return /* @__PURE__ */ import_react11.default.createElement(
PaymentElementContext.Provider,
{
value: {
value: {
...props,
...utils,
setIsPaymentElementReady,
isPaymentElementReady
}
}
},
children
);
};
var PaymentElementProvider = ({ children, ...props }) => {
return /* @__PURE__ */ import_react11.default.createElement(StripeLibsProvider, null, /* @__PURE__ */ import_react11.default.createElement(PropsProvider, { ...props }, /* @__PURE__ */ import_react11.default.createElement(PaymentElementInternalRoot, null, children)));
};
var PaymentElementInternalRoot = (props) => {
const { stripe, externalClientSecret, stripeAppearance } = usePaymentElementContext();
if (stripe && externalClientSecret) {
return /* @__PURE__ */ import_react11.default.createElement(
Elements,
{
key: externalClientSecret,
stripe,
options: {
loader: "never",
clientSecret: externalClientSecret,
appearance: {
variables: stripeAppearance
}
}
},
/* @__PURE__ */ import_react11.default.createElement(ValidateStripeUtils, null, props.children)
);
}
return /* @__PURE__ */ import_react11.default.createElement(DummyStripeUtils, null, props.children);
};
var PaymentElement2 = ({ fallback }) => {
const {
setIsPaymentElementReady,
paymentMethodOrder,
checkout,
stripe,
externalClientSecret,
paymentDescription,
for: _for
} = usePaymentElementContext();
const environment = useInternalEnvironment();
const applePay = (0, import_react11.useMemo)(() => {
if (!checkout || !checkout.totals || !checkout.plan) {
return void 0;
}
return {
recurringPaymentRequest: {
paymentDescription: paymentDescription || "",
managementURL: _for === "organization" ? environment?.displayConfig.organizationProfileUrl || "" : environment?.displayConfig.userProfileUrl || "",
regularBilling: {
amount: checkout.totals.totalDueNow?.amount || checkout.totals.grandTotal.amount,
label: checkout.plan.name,
recurringPaymentIntervalUnit: checkout.planPeriod === "annual" ? "year" : "month"
}
}
};
}, [checkout, paymentDescription, _for, environment]);
const options = (0, import_react11.useMemo)(() => {
return {
layout: {
type: "tabs",
defaultCollapsed: false
},
paymentMethodOrder,
applePay
};
}, [applePay, paymentMethodOrder]);
const onReady = (0, import_react11.useCallback)(() => {
setIsPaymentElementReady(true);
}, [setIsPaymentElementReady]);
if (!stripe || !externalClientSecret) {
return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, fallback);
}
return /* @__PURE__ */ import_react11.default.createElement(
PaymentElement,
{
fallback,
onReady,
options
}
);
};
var throwLibsMissingError = () => {
throw new Error(
"Clerk: Unable to submit, Stripe libraries are not yet loaded. Be sure to check `isFormReady` before calling `submit`."
);
};
var usePaymentElement = () => {
const { isPaymentElementReady, initializePaymentSource } = usePaymentElementContext();
const { stripe, elements } = useStripeUtilsContext();
const { externalClientSecret } = usePaymentElementContext();
const submit = (0, import_react11.useCallback)(async () => {
if (!stripe || !elements) {
return throwLibsMissingError();
}
const { setupIntent, error } = await stripe.confirmSetup({
elements,
confirmParams: {
return_url: window.location.href
},
redirect: "if_required"
});
if (error) {
return {
data: null,
error: {
gateway: "stripe",
error: {
code: error.code,
message: error.message,
type: error.type
}
}
};
}
return {
data: { gateway: "stripe", paymentToken: setupIntent.payment_method },
error: null
};
}, [stripe, elements]);
const reset = (0, import_react11.useCallback)(async () => {
if (!stripe || !elements) {
return throwLibsMissingError();
}
await initializePaymentSource();
}, [stripe, elements, initializePaymentSource]);
const isProviderReady = Boolean(stripe && externalClientSecret);
if (!isProviderReady) {
return {
submit: throwLibsMissingError,
reset: throwLibsMissingError,
isFormReady: false,
provider: void 0,
isProviderReady: false
};
}
return {
submit,
reset,
isFormReady: isPaymentElementReady,
provider: {
name: "stripe"
},
isProviderReady
};
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ClerkInstanceContext,
ClientContext,
OptionsContext,
OrganizationProvider,
SessionContext,
UserContext,
__experimental_CheckoutProvider,
__experimental_PaymentElement,
__experimental_PaymentElementProvider,
__experimental_useCheckout,
__experimental_usePaymentAttempts,
__experimental_usePaymentElement,
__experimental_usePaymentMethods,
__experimental_usePlans,
__experimental_useStatements,
__experimental_useSubscription,
assertContextExists,
createContextAndHook,
isDeeplyEqual,
useAssertWrappedByClerkProvider,
useClerk,
useClerkInstanceContext,
useClientContext,
useDeepEqualMemo,
useOptionsContext,
useOrganization,
useOrganizationContext,
useOrganizationList,
useReverification,
useSafeLayoutEffect,
useSession,
useSessionContext,
useSessionList,
useUser,
useUserContext
});
//# sourceMappingURL=index.js.map