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";
import { Fragment, useEffect, useId, useState } from "react";
import { useEffect, useId, useState } from "react";
import useMeasure from "react-use-measure";
import Link from "next/link";
import clsx from "clsx";
@@ -207,13 +207,40 @@ function CodePreview() {
<MotionConfig transition={{ duration: 0.5, type: "spring", bounce: 0 }}>
<motion.div
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 className="absolute -top-px left-0 right-0 h-px" />
<div className="absolute -bottom-px left-11 right-20 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 bg-gradient-to-r from-transparent dark:via-white/[0.03] light:via-black/[0.10] to-transparent" />
<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">
{tabs.map((tab) => (
@@ -221,17 +248,17 @@ function CodePreview() {
key={tab.name}
onClick={() => setCurrentTab(tab.name)}
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
? "text-stone-300"
: "text-slate-500",
? "dark:text-gray-100 light:text-gray-900"
: "dark:text-slate-400 dark:hover:text-slate-300 light:text-slate-600 light:hover:text-slate-700",
)}
>
{tab.name}
{tab.name === currentTab && (
<motion.div
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>
@@ -243,13 +270,13 @@ function CodePreview() {
<Button
variant="outline"
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)}
>
{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>
</Button>
@@ -263,15 +290,14 @@ function CodePreview() {
>
<div
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({
length: code.split("\n").length,
}).map((_, index) => (
<Fragment key={index}>
<div key={index}>
{(index + 1).toString().padStart(2, "0")}
<br />
</Fragment>
</div>
))}
</div>
<Highlight
@@ -293,7 +319,10 @@ function CodePreview() {
getTokenProps,
}) => (
<pre
className={clsx(className, "flex overflow-x-auto pb-6")}
className={clsx(
className,
"flex overflow-x-auto pb-6",
)}
style={style}
>
<code className="px-4">
@@ -316,7 +345,7 @@ function CodePreview() {
<Link
href="https://demo.better-auth.com"
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
xmlns="http://www.w3.org/2000/svg"
@@ -335,6 +364,7 @@ function CodePreview() {
</div>
</div>
</div>
</div>
</motion.div>
</MotionConfig>
</AnimatePresence>

View File

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

View File

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

View File

@@ -561,6 +561,10 @@ describe("stripe", async () => {
stripeSubscription: expect.any(Object),
plan: expect.any(Object),
}),
expect.objectContaining({
context: expect.any(Object),
_flag: expect.any(String),
}),
);
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 { subscriptions, user } from "./schema";
@@ -70,7 +75,7 @@ export type StripePlan = {
data: {
subscription: Subscription;
},
request?: Request,
ctx: GenericEndpointContext,
) => Promise<void>;
/**
* A function that will be called when the trial
@@ -80,7 +85,7 @@ export type StripePlan = {
*/
onTrialExpired?: (
subscription: Subscription,
request?: Request,
ctx: GenericEndpointContext,
) => Promise<void>;
};
};
@@ -186,7 +191,7 @@ export interface StripeOptions {
stripeCustomer: Stripe.Customer;
user: User;
},
request?: Request,
ctx: GenericEndpointContext,
) => Promise<void>;
/**
* A custom function to get the customer create
@@ -199,7 +204,7 @@ export interface StripeOptions {
user: User;
session: Session;
},
request?: Request,
ctx: GenericEndpointContext,
) => Promise<{}>;
/**
* Subscriptions
@@ -233,7 +238,7 @@ export interface StripeOptions {
subscription: Subscription;
plan: StripePlan;
},
request?: Request,
ctx: GenericEndpointContext,
) => Promise<void>;
/**
* 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
*
* @param data - data containing user, session and referenceId
* @param request - Request Object
* @param ctx - the context object
* @returns
*/
authorizeReference?: (
@@ -272,7 +277,7 @@ export interface StripeOptions {
| "cancel-subscription"
| "restore-subscription";
},
request?: Request,
ctx: GenericEndpointContext,
) => Promise<boolean>;
/**
* A callback to run after a user has deleted their subscription
@@ -287,7 +292,7 @@ export interface StripeOptions {
* parameters for session create params
*
* @param data - data containing user, session and plan
* @param request - Request Object
* @param ctx - the context object
*/
getCheckoutSessionParams?: (
data: {
@@ -296,7 +301,7 @@ export interface StripeOptions {
plan: StripePlan;
subscription: Subscription;
},
request?: Request,
ctx: GenericEndpointContext,
) =>
| Promise<{
params?: Stripe.Checkout.SessionCreateParams;