feat(stripe): pass context obejct to stripe plugin callbacks (#2990)

* feat(stripe): pass context obejct to stripe plugin callbacks

* cleanup

* cleanup

* cleanup

* chore: lint

* fix: tests

---------

Co-authored-by: ping-maxwell <maxwell.multinite@gmail.com>
This commit is contained in:
Bereket Engida
2025-07-17 14:48:11 -07:00
committed by GitHub
parent 78e384e3f5
commit 8fa4c9ce7e
5 changed files with 201 additions and 151 deletions

View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { Fragment, useEffect, useId, useState } from "react"; import { useEffect, useId, useState } from "react";
import useMeasure from "react-use-measure"; import useMeasure from "react-use-measure";
import Link from "next/link"; import Link from "next/link";
import clsx from "clsx"; import clsx from "clsx";
@@ -207,13 +207,40 @@ function CodePreview() {
<MotionConfig transition={{ duration: 0.5, type: "spring", bounce: 0 }}> <MotionConfig transition={{ duration: 0.5, type: "spring", bounce: 0 }}>
<motion.div <motion.div
animate={{ height: height > 0 ? height : undefined }} animate={{ height: height > 0 ? height : undefined }}
className="from-stone-100 to-stone-200 dark:to-black/90 dark:via-stone-950/10 dark:from-stone-950/90 relative overflow-hidden rounded-sm bg-gradient-to-tr ring-1 ring-white/10 backdrop-blur-lg" className="relative overflow-hidden rounded-xl"
> >
{/* Dynamic background based on theme */}
<div
className="absolute inset-0 rounded-xl"
style={{
background:
theme.resolvedTheme === "light"
? "linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.6) 100%)"
: "linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%)",
}}
/>
{/* Glass layers - responsive to theme */}
<div className="absolute inset-0 rounded-xl backdrop-blur-3xl bg-gradient-to-br dark:from-black/40 dark:via-black/20 dark:to-black/60 light:from-white/30 light:via-white/10 light:to-white/40" />
<div className="absolute inset-0 rounded-xl bg-gradient-to-tl dark:from-slate-800/20 dark:via-transparent dark:to-slate-700/15 light:from-blue-500/10 light:via-transparent light:to-purple-500/10" />
<div className="absolute inset-0 rounded-xl bg-gradient-to-r from-transparent dark:via-black/10 light:via-white/15 to-transparent" />
{/* Border and shadow effects - theme aware */}
<div className="absolute inset-0 rounded-xl border shadow-2xl dark:border-white/5 dark:shadow-black/50 light:border-black/10 light:shadow-black/20" />
<div className="absolute inset-0 rounded-xl border dark:border-white/[0.02] light:border-black/[0.05]" />
{/* Inner glow - theme specific */}
<div className="absolute inset-0 rounded-xl shadow-inner dark:shadow-black/20 light:shadow-white/30" />
{/* Liquid glass reflection effect - adaptive */}
<div className="absolute top-0 left-0 right-0 h-1/3 bg-gradient-to-b rounded-t-xl backdrop-blur-sm dark:from-white/[0.03] light:from-black/[0.06] to-transparent" />
<div className="absolute top-0 left-1/4 right-1/4 h-1/6 bg-gradient-to-b rounded-t-xl blur-sm dark:from-white/[0.05] light:from-black/[0.08] to-transparent" />
<div className="relative z-10 bg-gradient-to-br from-black/98 via-stone-950/95 to-black/98 dark:from-black/98 dark:via-stone-950/95 dark:to-black/98 light:from-white/98 light:via-stone-50/95 light:to-white/98 backdrop-blur-xl rounded-xl border border-white/[0.02] dark:border-white/[0.02] light:border-black/[0.08]">
<div ref={ref}> <div ref={ref}>
<div className="absolute -top-px left-0 right-0 h-px" /> <div className="absolute -top-px left-0 right-0 h-px bg-gradient-to-r from-transparent dark:via-white/[0.05] light:via-black/[0.15] to-transparent" />
<div className="absolute -bottom-px left-11 right-20 h-px" /> <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-transparent dark:via-white/[0.03] light:via-black/[0.10] to-transparent" />
<div className="pl-4 pt-4"> <div className="pl-4 pt-4">
<TrafficLightsIcon className="stroke-slate-500/30 h-2.5 w-auto" /> <TrafficLightsIcon className="stroke-stone-500/30 h-2.5 w-auto" />
<div className="mt-4 flex space-x-2 text-xs"> <div className="mt-4 flex space-x-2 text-xs">
{tabs.map((tab) => ( {tabs.map((tab) => (
@@ -221,17 +248,17 @@ function CodePreview() {
key={tab.name} key={tab.name}
onClick={() => setCurrentTab(tab.name)} onClick={() => setCurrentTab(tab.name)}
className={clsx( className={clsx(
"relative isolate flex h-6 cursor-pointer items-center justify-center rounded-full px-2.5", "relative isolate flex h-6 cursor-pointer items-center justify-center rounded-full px-2.5 transition-all duration-200",
currentTab === tab.name currentTab === tab.name
? "text-stone-300" ? "dark:text-gray-100 light:text-gray-900"
: "text-slate-500", : "dark:text-slate-400 dark:hover:text-slate-300 light:text-slate-600 light:hover:text-slate-700",
)} )}
> >
{tab.name} {tab.name}
{tab.name === currentTab && ( {tab.name === currentTab && (
<motion.div <motion.div
layoutId="tab-code-preview" layoutId="tab-code-preview"
className="bg-stone-800 absolute inset-0 -z-10 rounded-full" className="absolute inset-0 -z-10 rounded-full backdrop-blur-sm border bg-gradient-to-r dark:from-black/60 dark:to-slate-900/80 dark:border-white/[0.05] light:from-white/60 light:to-slate-100/80 light:border-black/[0.15]"
/> />
)} )}
</button> </button>
@@ -243,13 +270,13 @@ function CodePreview() {
<Button <Button
variant="outline" variant="outline"
size="icon" size="icon"
className="absolute w-5 border-none bg-transparent h-5 top-2 right-0" className="absolute w-5 border-none backdrop-blur-sm h-5 top-2 right-0 transition-all duration-200 dark:bg-black/20 dark:hover:bg-black/40 dark:border-white/[0.05] light:bg-white/20 light:hover:bg-white/40 light:border-black/[0.15]"
onClick={() => copyToClipboard(code)} onClick={() => copyToClipboard(code)}
> >
{copyState ? ( {copyState ? (
<Check className="h-3 w-3" /> <Check className="h-3 w-3 dark:text-gray-300 light:text-gray-700" />
) : ( ) : (
<Copy className="h-3 w-3" /> <Copy className="h-3 w-3 dark:text-gray-300 light:text-gray-700" />
)} )}
<span className="sr-only">Copy code</span> <span className="sr-only">Copy code</span>
</Button> </Button>
@@ -263,15 +290,14 @@ function CodePreview() {
> >
<div <div
aria-hidden="true" aria-hidden="true"
className="border-slate-300/5 text-slate-600 select-none border-r pr-4 font-mono" className="select-none border-r pr-4 font-mono dark:border-slate-300/5 dark:text-slate-600 light:border-slate-700/20 light:text-slate-500"
> >
{Array.from({ {Array.from({
length: code.split("\n").length, length: code.split("\n").length,
}).map((_, index) => ( }).map((_, index) => (
<Fragment key={index}> <div key={index}>
{(index + 1).toString().padStart(2, "0")} {(index + 1).toString().padStart(2, "0")}
<br /> </div>
</Fragment>
))} ))}
</div> </div>
<Highlight <Highlight
@@ -293,7 +319,10 @@ function CodePreview() {
getTokenProps, getTokenProps,
}) => ( }) => (
<pre <pre
className={clsx(className, "flex overflow-x-auto pb-6")} className={clsx(
className,
"flex overflow-x-auto pb-6",
)}
style={style} style={style}
> >
<code className="px-4"> <code className="px-4">
@@ -316,7 +345,7 @@ function CodePreview() {
<Link <Link
href="https://demo.better-auth.com" href="https://demo.better-auth.com"
target="_blank" target="_blank"
className="shadow-md border shadow-primary-foreground mb-4 ml-auto mr-4 mt-auto flex cursor-pointer items-center gap-2 px-3 py-1 transition-all ease-in-out hover:opacity-70" className="shadow-lg border backdrop-blur-sm mb-4 ml-auto mr-4 mt-auto flex cursor-pointer items-center gap-2 px-3 py-1 transition-all ease-in-out hover:opacity-90 rounded-md dark:border-white/[0.05] dark:bg-black/20 dark:hover:bg-black/40 light:border-black/[0.15] light:bg-white/20 light:hover:bg-white/40"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -335,6 +364,7 @@ function CodePreview() {
</div> </div>
</div> </div>
</div> </div>
</div>
</motion.div> </motion.div>
</MotionConfig> </MotionConfig>
</AnimatePresence> </AnimatePresence>

View File

@@ -74,12 +74,15 @@ export async function onCheckoutSessionCompleted(
], ],
}); });
} }
await options.subscription?.onSubscriptionComplete?.({ await options.subscription?.onSubscriptionComplete?.(
{
event, event,
subscription: dbSubscription as Subscription, subscription: dbSubscription as Subscription,
stripeSubscription: subscription, stripeSubscription: subscription,
plan, plan,
}); },
ctx,
);
return; return;
} }
} }
@@ -183,14 +186,14 @@ export async function onSubscriptionUpdated(
subscription.status === "trialing" && subscription.status === "trialing" &&
plan.freeTrial?.onTrialEnd plan.freeTrial?.onTrialEnd
) { ) {
await plan.freeTrial.onTrialEnd({ subscription }, ctx.request); await plan.freeTrial.onTrialEnd({ subscription }, ctx);
} }
if ( if (
subscriptionUpdated.status === "incomplete_expired" && subscriptionUpdated.status === "incomplete_expired" &&
subscription.status === "trialing" && subscription.status === "trialing" &&
plan.freeTrial?.onTrialExpired plan.freeTrial?.onTrialExpired
) { ) {
await plan.freeTrial.onTrialExpired(subscription, ctx.request); await plan.freeTrial.onTrialExpired(subscription, ctx);
} }
} }
} catch (error: any) { } catch (error: any) {

View File

@@ -91,12 +91,15 @@ export const stripe = <O extends StripeOptions>(options: O) => {
}); });
} }
const isAuthorized = ctx.body?.referenceId const isAuthorized = ctx.body?.referenceId
? await options.subscription?.authorizeReference?.({ ? await options.subscription?.authorizeReference?.(
{
user: session.user, user: session.user,
session: session.session, session: session.session,
referenceId, referenceId,
action, action,
}) },
ctx,
)
: true; : true;
if (!isAuthorized) { if (!isAuthorized) {
throw new APIError("UNAUTHORIZED", { throw new APIError("UNAUTHORIZED", {
@@ -387,6 +390,8 @@ export const stripe = <O extends StripeOptions>(options: O) => {
subscription, subscription,
}, },
ctx.request, ctx.request,
//@ts-expect-error
ctx,
); );
const freeTrail = plan.freeTrial const freeTrail = plan.freeTrial
@@ -1035,11 +1040,14 @@ export const stripe = <O extends StripeOptions>(options: O) => {
if (!customer) { if (!customer) {
logger.error("#BETTER_AUTH: Failed to create customer"); logger.error("#BETTER_AUTH: Failed to create customer");
} else { } else {
await options.onCustomerCreate?.({ await options.onCustomerCreate?.(
{
customer, customer,
stripeCustomer, stripeCustomer,
user, user,
}); },
ctx,
);
} }
} }
}, },

View File

@@ -561,6 +561,10 @@ describe("stripe", async () => {
stripeSubscription: expect.any(Object), stripeSubscription: expect.any(Object),
plan: expect.any(Object), plan: expect.any(Object),
}), }),
expect.objectContaining({
context: expect.any(Object),
_flag: expect.any(String),
}),
); );
const updateEvent = { const updateEvent = {

View File

@@ -1,4 +1,9 @@
import type { InferOptionSchema, Session, User } from "better-auth"; import type {
GenericEndpointContext,
InferOptionSchema,
Session,
User,
} from "better-auth";
import type Stripe from "stripe"; import type Stripe from "stripe";
import type { subscriptions, user } from "./schema"; import type { subscriptions, user } from "./schema";
@@ -70,7 +75,7 @@ export type StripePlan = {
data: { data: {
subscription: Subscription; subscription: Subscription;
}, },
request?: Request, ctx: GenericEndpointContext,
) => Promise<void>; ) => Promise<void>;
/** /**
* A function that will be called when the trial * A function that will be called when the trial
@@ -80,7 +85,7 @@ export type StripePlan = {
*/ */
onTrialExpired?: ( onTrialExpired?: (
subscription: Subscription, subscription: Subscription,
request?: Request, ctx: GenericEndpointContext,
) => Promise<void>; ) => Promise<void>;
}; };
}; };
@@ -186,7 +191,7 @@ export interface StripeOptions {
stripeCustomer: Stripe.Customer; stripeCustomer: Stripe.Customer;
user: User; user: User;
}, },
request?: Request, ctx: GenericEndpointContext,
) => Promise<void>; ) => Promise<void>;
/** /**
* A custom function to get the customer create * A custom function to get the customer create
@@ -199,7 +204,7 @@ export interface StripeOptions {
user: User; user: User;
session: Session; session: Session;
}, },
request?: Request, ctx: GenericEndpointContext,
) => Promise<{}>; ) => Promise<{}>;
/** /**
* Subscriptions * Subscriptions
@@ -233,7 +238,7 @@ export interface StripeOptions {
subscription: Subscription; subscription: Subscription;
plan: StripePlan; plan: StripePlan;
}, },
request?: Request, ctx: GenericEndpointContext,
) => Promise<void>; ) => Promise<void>;
/** /**
* A callback to run after a user is about to cancel their subscription * A callback to run after a user is about to cancel their subscription
@@ -258,7 +263,7 @@ export interface StripeOptions {
* and belongs to the user * and belongs to the user
* *
* @param data - data containing user, session and referenceId * @param data - data containing user, session and referenceId
* @param request - Request Object * @param ctx - the context object
* @returns * @returns
*/ */
authorizeReference?: ( authorizeReference?: (
@@ -272,7 +277,7 @@ export interface StripeOptions {
| "cancel-subscription" | "cancel-subscription"
| "restore-subscription"; | "restore-subscription";
}, },
request?: Request, ctx: GenericEndpointContext,
) => Promise<boolean>; ) => Promise<boolean>;
/** /**
* A callback to run after a user has deleted their subscription * A callback to run after a user has deleted their subscription
@@ -287,7 +292,7 @@ export interface StripeOptions {
* parameters for session create params * parameters for session create params
* *
* @param data - data containing user, session and plan * @param data - data containing user, session and plan
* @param request - Request Object * @param ctx - the context object
*/ */
getCheckoutSessionParams?: ( getCheckoutSessionParams?: (
data: { data: {
@@ -296,7 +301,7 @@ export interface StripeOptions {
plan: StripePlan; plan: StripePlan;
subscription: Subscription; subscription: Subscription;
}, },
request?: Request, ctx: GenericEndpointContext,
) => ) =>
| Promise<{ | Promise<{
params?: Stripe.Checkout.SessionCreateParams; params?: Stripe.Checkout.SessionCreateParams;