bewfra

[keen ocean]

Hi there!

I am not sure on how to handle this in my frontend correctly.
Can you clarify what you mean? What are you trying to do exactly?

[untold cave]

const PaymentStatus = () => {
const stripe = useStripe()

const [contactOnError, setContactOnError] = useState(false)
const router = useRouter()

const { onPaymentCompleted, readyToComplete } = useCheckout()
const [statusInfo, setStatusInfo] = useState<{
message: string | undefined
level: "SUCCESS" | "WARN" | "ERROR" | undefined
}>({
message: undefined,
level: undefined,
})
useEffect(() => {
if (!stripe) {
return
}

if (!router.isReady) return
const clientSecret = router.query.payment_intent_client_secret as string

if (!clientSecret) {
  setIsExploding(true)

  setStatusInfo({
    message: "Ihre Bestellung hat keine zugehörige Zahlungsreferenz.",
    level: "WARN",
  })
  return
}

stripe
  .retrievePaymentIntent(clientSecret)
  .then(({ paymentIntent }) => {
   paymentIntent)
    if (!paymentIntent) {
      setStatusInfo({
        message: "",
        level: "ERROR",
      })
      return
    }
    switch (paymentIntent.status) {
      case "succeeded":
        if (readyToComplete) {
          setStatusInfo({
            message:
              ".",
            level: "SUCCESS",
          })
          onPaymentCompleted()
        } else {
          setStatusInfo({
            message: ``,
            level: "SUCCESS",
          })
        }
        break
      case "processing":
        // WHAT DO I DO HERE?
  
        break
    }
  })
  .catch((error) => {

    })
  })

}, [stripe, router.isReady, router.query])

return (
<OrderStatusNotification
message={statusInfo.message}
level={statusInfo.level}
isExploding={isExploding}
contactOnError={contactOnError}
/>
)
}

To me it is not clear what needs to be done in the case "processing": . Are there any working code examples for this?

[keen ocean]

Processing means you have to wait to know if the the payment is succeeded or failed. So what you show to users is completely up to you.
You could assume the payment is succeeded, and provide your service, but note that the payment may fail in the future. Or simply tell the user the payment is being processed, and only once it's successfull you will privode them your service.

[untold cave]

First of all thanks a lot! That already gives me confidence that I am not completely off.

Do you see a crazy mistake or bug in my code above or a case that I am not handling? Sorry for bothering but it is my first time implementing stripe and our basket sizes are rather big 😅.

Is there an example of what one would "usually" do? I am not sure at all what to do with processing

[keen ocean]

Do you see a crazy mistake or bug in my code above or a case that I am not handling?
I'm sorry but we can't review code. However if you encounter any error or bug, I would be happy to look into it.
Is there an example of what one would "usually" do? I am not sure at all what to do with processing
I just answered this question above. On Stripe side there's nothhing to do, you just have to wait. And you could listen to webhook events to be notified when the payment changes status.

[untold cave]

Thanks again! Makes sense