public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: color tokens are not used in payment form (#10806) 

Co-authored-by: VIneet Pradhan <138296762+vineetpradhan-dev@users.noreply.github.com>
Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
pull/11085/head^2
VIneet Pradhan 2023-09-04 18:32:21 +05:30 committed by GitHub
parent a7d8f0c84e
commit f73d38b632
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/features/ee/payments/components/Payment.tsx
View File

@ -1,7 +1,6 @@
import type { Payment } from "@prisma/client"; import type { Payment } from "@prisma/client";
import type { EventType } from "@prisma/client"; import type { EventType } from "@prisma/client";
import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js"; import { Elements, PaymentElement, useElements, useStripe } from "@stripe/react-stripe-js";
import type stripejs from "@stripe/stripe-js";
import type { StripeElementLocale } from "@stripe/stripe-js"; import type { StripeElementLocale } from "@stripe/stripe-js";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import type { SyntheticEvent } from "react"; import type { SyntheticEvent } from "react";
@ -181,27 +180,14 @@ const PaymentForm = (props: Props) => {
); );
}; };
const ELEMENT_STYLES: stripejs.Appearance = {
theme: "none",
};
const ELEMENT_STYLES_DARK: stripejs.Appearance = {
theme: "night",
variables: {
colorText: "#d6d6d6",
fontWeightNormal: "600",
borderRadius: "6px",
colorBackground: "#101010",
colorPrimary: "#d6d6d6",
},
};
export default function PaymentComponent(props: Props) { export default function PaymentComponent(props: Props) {
const stripePromise = getStripe(props.payment.data.stripe_publishable_key as any); const stripePromise = getStripe(props.payment.data.stripe_publishable_key as any);
const [darkMode, setDarkMode] = useState<boolean>(false); const [theme, setTheme] = useState<"stripe" | "night">("stripe");
useEffect(() => { useEffect(() => {
setDarkMode(window.matchMedia("(prefers-color-scheme: dark)").matches); if (document.documentElement.classList.contains("dark")) {
setTheme("night");
}
}, []); }, []);
return ( return (
@ -209,7 +195,9 @@ export default function PaymentComponent(props: Props) {
stripe={stripePromise} stripe={stripePromise}
options={{ options={{
clientSecret: props.clientSecret, clientSecret: props.clientSecret,
appearance: darkMode ? ELEMENT_STYLES_DARK : ELEMENT_STYLES, appearance: {
theme,
},
}}> }}>
<PaymentForm {...props} /> <PaymentForm {...props} />
</Elements> </Elements>