#s4gu4r0_code

1 messages · Page 1 of 1 (latest)

prisma wigeonBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1222266118010306600

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

delicate linden
# 
//page.tsx
"use client";
import React from "react"
import HomeFeed from "@/components/HomeFeed"
import Navbar from "@/components/ui/Navbar"
import { loadStripe } from "@stripe/stripe-js";

const initStripe = async () => {
  const publishableKey = process.env.NEXT_STRIPE_PUBLIC_KEY
  console.log(publishableKey)
  //@ts-expect-error
  return loadStripe(publishableKey);
};
export default async function Home() {
  const stripePromise = initStripe();


  return (
    <div className="flex flex-col items-center mx-2">
      <Navbar />
      <div className="w-full p-2 homefeed">
        <HomeFeed stripePromise={stripePromise} />
      </div>
    </div>
  )
}
# 
// HomeFeed
"use client"
import React, { useState } from "react"
import HomeFeedCard from "@/components/Cards/HomeFeedCard";
import { useNotes } from "@/hooks"
import {
    Drawer,
    DrawerContent,
    DrawerTitle,
    DrawerHeader,
    DrawerDescription,
} from "@/components/ui"
import TipForm from "@/components/TipForm";
import routes from "@/lib/routes.json"


export default function HomeFeed({stripePromise}) {

    const [cards, setCards] = useNotes(routes) // TODO: update
    const [selectedCard, setSelectedCard] = useState({ price: null })
    const [open, setOpen] = React.useState(false) // controls modal and drawer

    return (
        <Drawer>
            <ul className="">
                {
                    cards.map((card: any, index: number) => {
                        return (
                            <li key={`${card?.slug}-${index}`} className="py-2">
                                <HomeFeedCard {...{ ...card, open, setOpen, setSelectedCard }} />
                            </li>
                        )
                    })
                }
            </ul>
            {selectedCard.color && <DrawerContent className={`bg-${selectedCard.color}`}>
                <>
                    <DrawerHeader className="text-left">
                        <DrawerTitle>{selectedCard.type === "donate" ? "" : "Get "} {selectedCard.title}</DrawerTitle>
                        {selectedCard.type === 'digital-offering' && <DrawerDescription>
                            Leave a tip of <strong>$0</strong> or more to get the link.
                        </DrawerDescription>}
                    </DrawerHeader>
                    <TipForm className="px-4" title={selectedCard.title} stripePromise={stripePromise}/>

                    
                </>
            </DrawerContent>}
        </Drawer>
    )
}
devout slate
#

Hello, we can help if you're having issues getting Stripe Elements to work. We can't really help design the app.

delicate linden
#

The docs also are out of date when it comes to Next.js and only show the pages router example.

devout slate
#

You can use it in a modal afaik. However, I've heard of some issues where the modal steals focus from elements and that causes weird behavior with PaymentElement like users aren't able to type anything in the fields etc..

The PaymentElement should be rendered though.

delicate linden
# devout slate You can use it in a modal afaik. However, I've heard of some issues where the mo...

yeah i was able to get it to render when not using next's routing but when using react router, so i suspect next is getting in the way of the data reaching the useStripe and useElements hooks. do you think the parallel/intercepted routes from next could get around that? i really don't want to make a dedicated checkout page, but i can if i have to. https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#modals

Routing: Intercepting Routes | Next.js

Use intercepting routes to load a new route within the current layout while masking the browser URL, useful for advanced routing patterns such as modals.

devout slate
#

I don't know next.js deep enough to answer that unfortunately. I doubt anyone on my team knows either.
I'd just recommend giving it a quick try and see if that works.

Are you seeing any errors in your console when you try to use it with other routers?

delicate linden
devout slate
#

I see. Hmm, can't think of a workaround.
Going to see if we've seen any one ask about this before

#

When you say you tried "Loading stripe from global layout", do you mean you tried that from app file?

#

it doesn't rely on Intent first approach

delicate linden
delicate linden