#daran_code

1 messages ¡ Page 1 of 1 (latest)

quiet hollyBOT
#

👋 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/1369624423589482577

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

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

pulsar bison
# 
const CheckoutForm = () => {
  const checkout = useCheckout()
  const [isLoading, setIsLoading] = useState(false)
  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
    console.log(event)
    event.preventDefault()
    setIsLoading(true)
    const confirmResult = await checkout
      .confirm({ returnUrl: "http://localhost:5174/route-a" })
      .then(console.log, console.error)
  }
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <LinkAuthenticationElement id="link-authentication-element" />
      </div>
      <div>
        <AddressElement options={{ mode: "billing" }} />{" "}
      </div>
      <div>
        <PaymentElement id="payment-element" />{" "}
      </div>

      <button disabled={isLoading} id="submit" type="submit">
        {isLoading ? <div className="spinner" /> : `Pay ${checkout.total.total.amount} now`}
      </button>
    </form>
  )
}
function RouteComponent() {
  const { paymentProvider,  clientSecret } = useLoaderData({ from: Route.id })

  const stripePromise = useMemo(
    () => loadStripe(paymentProvider.publishableKey),
    [paymentProvider.publishableKey],
  )
  return (
    <div>
      <CheckoutProvider
        stripe={stripePromise}
        options={{
          fetchClientSecret: () => Promise.resolve(clientSecret),
          elementsOptions: {},
        }}>
        <CheckoutForm />
      </CheckoutProvider>
    </div>
  )
}
# 
"@stripe/react-stripe-js": 3.7.0
"@stripe/stripe-js": 7.3.0
"stripe": 18.1.0
spring mulch
#

Hi, let me help you with this.

#

I suspect LinkAuthenticationElement might not be supported for Custom Checkout...

pulsar bison
#

oooh ok

#

So do i have to create my own?

spring mulch
#

But let me confirm this.

pulsar bison
spring mulch
#

It seems so, but I can't get an explicit confirmation. In this case I suggest you go ahead and use a custom component for this.

pulsar bison
#

Ok thanks a lot!