#krut4rth

1 messages · Page 1 of 1 (latest)

ionic quartzBOT
muted granite
#

some disclaimer i had removed LinkAuthenticationElement from the checkout form

acoustic agate
#

What's the PaymentIntent ID?

muted granite
#

pi_3NgJamKEOuJhOPhD0gSTSIFW

#

i can send code for checkout form

acoustic agate
#

I don't see any request to confrim this PaymentIntent. Did you call stripe.confirmPayment when the "Pay now" button is clicked?

muted granite
acoustic agate
#

Do you see any error in your browser console log?

muted granite
#

no there are no errors

acoustic agate
#

Do you see errors when you click the "Pay now" button?

muted granite
#

No errors after clicking pay now button

acoustic agate
#

OK, then you might want to put some logs in your app and see what prevents stripe.confirmPayment() from getting called.

muted granite
#

ok, doing that

#

actually when i click pay now, i'm redirected. 1. I'm redirected to wrong path, not the return_url. 2. as redirection occurs the logs go away

acoustic agate
#

Do you call e.preventDefault(); in your button handler?

muted granite
#

yes, I have provided the code above as well.

acoustic agate
#

Then it shouldn't redirect. Can you save your code, recompile and run again?

muted granite
#

I did that, again the same issue as before.

acoustic agate
#

That's very strange.

ionic quartzBOT
muted granite
#

i did some changes, removed the form, and directly calling handleSubmit from the button, the payment is going through, it also redirects to return url but the params are still there in the url. like this: http://localhost:3000/?payment_intent=pi_3NgKh4KEOuJhOPhD0IpFJFZp&payment_intent_client_secret=pi_3NgKh4KEOuJhOPhD0IpFJFZp_secret_OYxPpiLwbraVT8DQm47Wdqk6u&redirect_status=succeeded

My new code is as follow:

# 
import { useEffect, useState } from 'react';
import {
  PaymentElement,
  useStripe,
  useElements
} from '@stripe/react-stripe-js';

export default function CheckoutForm() {
  const stripe = useStripe();
  const elements = useElements();

  const [message, setMessage] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);

  useEffect(() => {
    if (!stripe) {
      return;
    }

    const clientSecret = new URLSearchParams(window.location.search).get(
      'payment_intent_client_secret'
    );

    if (!clientSecret) {
      return;
    }

    stripe.retrievePaymentIntent(clientSecret).then(({ paymentIntent }) => {
      switch (paymentIntent.status) {
        case 'succeeded':
          setMessage('Payment succeeded!');
          break;
        case 'processing':
          setMessage('Your payment is processing.');
          break;
        case 'requires_payment_method':
          setMessage('Your payment was not successful, please try again.');
          break;
        default:
          setMessage('Something went wrong.');
          break;
      }
    });
  }, [stripe]);

  const handleSubmit = async () => {
    if (!stripe || !elements) {
      return;
    }

    setIsProcessing(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: 'http://localhost:3000'
      }
    });

    if (error) {
      setMessage(error.message);
    }

    setIsProcessing(false);
  };

  return (
    <>
      <PaymentElement id="payment-element" />
      <button
        onClick={handleSubmit}
        disabled={isProcessing || !stripe || !elements}
        id="submit"
      >
        <span id="button-text">{isProcessing ? 'Processing ... ' : 'Pay'}</span>
      </button>
      {message && <div id="payment-message">{message}</div>}
    </>
  );
}
nova ingot
#

👋 Taking over this thread, catching up now

#

What is the issue you're facing here?