CODEWITHSUNDEEP
node.jsreactjsstripe-paymentspayment-gateway
Julio Raposo
Julio Raposo

Reputation: 107

Cannot confirm payment intent in stripe

well I am going to go straight to the point : I was doing an official stripe tutorial about how to use it with react here and I was just copying and pasting code but it is not working properly,the only difference I added was using an axios instance instead of fetch API (I think it is easier to transmit credentials this way),and the problem is like

Everytime I click on the button to pay,it re-renders the Checkout component and does not send the confirm payment action and I really dont know what to do,if anyone could help I appreciate A LOT!!!!

PS: I dont know if I did something like a typo but when I tried to use fetch instead it did not work

Wrapper Component Code :

const [stripePromise,setStripePromise]=useState(null)
    const [clientSecret,setClientSecret]=useState<string>()
    const [run1,setRun1]=useState(1)
    const [run2,setRun2]=useState(1)

    useEffect(()=>{
      api.get('/services/pubkey').then(async(data)=>{
        const pubkey=data?.data?.pubkey
        setStripePromise(loadStripe(pubkey))
      })
    },[])

    useEffect(()=>{
    if(id){
     api.post(`/services/cs/${id}`).then(async(data)=>{
      const clientsecret= data?.data?.clientSecret
      setClientSecret(clientsecret)
      console.log(clientsecret)
     })
    }
    },[])
   
    return (
      <Stack alignItems='center'>
        <Typography fontSize={25}>Agora Que o Serviço foi Aceito Tá na Hora de pagar</Typography>
        {
          stripePromise && clientSecret && (
            <Elements stripe={stripePromise} options={{clientSecret:clientSecret}} key={clientSecret}>
              <CheckoutForm/>
            </Elements>
          )
        }
      </Stack>
    )

Checkout Component code :

const stripe=useStripe()
  const elements=useElements()

  const [message,setMessage]=useState<string|null>('nada ainda')
  const [isProcessing,setIsProcessing]=useState<boolean>(false)

  const handleSubmit=async(e)=>{
    console.log('AEEE')
    e.preventDefault()
    if(!stripe||!elements){
      return
    }
    setIsProcessing(true)
   
    const {error,paymentIntent}=await stripe.confirmPayment({
      elements,
      confirmParams:{
        return_url:`${window.location.origin}`
      },
    })
    console.log(error)
    console.log(paymentIntent)
    if(error){
      setMessage(error==undefined?'error':error?.message)
    }else if(paymentIntent&& paymentIntent.status=='succeeded'){
      setMessage(`Payment Status : ${paymentIntent?.status}`)
    }else{
      setMessage('Unexpected state')
    }
    setIsProcessing(false)
  }
  return (
    <Stack alignItems='center' spacing={4} mt={3}>
        <PaymentElement/>
        <Button onClick={handleSubmit}>Pagar</Button>
        {message}
        {isProcessing}
    </Stack>
  )

Upvotes: 0

Views: 1394

Answers (1)

Tarzan
Tarzan

Reputation: 1077

I'm most certainly sure the problem here is in the return_url that you're setting to window.location.origin which would be in your case the same page as the checkout. You need to create a new React route for completion (as shown here) and use that route for the return_url when confirming the PaymentIntent.

Upvotes: 1

Related Questions