- {/*TODO: Used by InvisibleRootBox, can we simplify? */}
-
- <__experimental_Checkout
- planPeriod={planPeriod}
- planId={selectedPlan?.id}
- />
-
-
-
+ <__experimental_CheckoutContext.Provider
+ value={{
+ componentName: 'Checkout',
+ mode,
+ isOpen: showCheckout,
+ setIsOpen: setShowCheckout,
+ }}
+ >
+ {/*TODO: Used by InvisibleRootBox, can we simplify? */}
+
+ <__experimental_Checkout
+ planPeriod={planPeriod}
+ planId={selectedPlan?.id}
+ />
+
+
+
+
>
);
};
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 72eecaf93f5..5f7c6e24ce1 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1490,6 +1490,7 @@ type __experimental_PricingTableMatrixProps = {
type __experimental_PricingTableBaseProps = {
appearance?: PricingTableTheme;
+ checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>;
};
export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps &