zulqi.

[rare jasper]

Hello! We'll be with you shortly. 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.

• zulqi., 15 hours ago, 37 messages
• zulqi., 17 hours ago, 9 messages

[fathom charm]

Hello 👋
Is there a guide you're following for this?

[lavish mesa]

i have followed many guides and tutorial even tutorial from stripe youtube channels as well since yesterday morning, but none of guide or tutorial helped

[fathom charm]

https is required for Live Mode API requests. Test mode API requests for development shouldn't require https

Are you sure you're using your test mode API keys and not live mode ones?

[lavish mesa]

yes

than may be i am thinking wrong

[fathom charm]

To be clear, the issue you're running into most likely may have nothing to do with Stripe.

What error are you seeing?

[lavish mesa]

actuall issue i am facing is i am not able to type in card nr and even klarna option is not visible, kindley have a look on screeshot:

[fathom charm]

The message in your console is just a warning. It shouldn't affect the way Card Element works in development.
The text in the red color seems to be added by your browser instead

have you tried using a different browser?

[lavish mesa]

ok sorry i fixed it some how to type but getting new issue:

[fathom charm]

What does your code that calls confirmCardPayment look like?

[lavish mesa]

const CheckoutForm = () => {
const stripe = useStripe();
const elements = useElements();
const [clientSecret, setClientSecret] = useState("");

useEffect(() => {
// Fetch the client secret from your backend
fetch("http://localhost:5191/api/Payments/create-payment-intent", {
method: "POST",
})
.then((response) => response.json())
.then((data) => setClientSecret(data.clientSecret));
}, []);

const handleSubmit = async (event) => {
event.preventDefault();

const { paymentIntent, error } = await stripe.confirmCardPayment(
  clientSecret,
  {
    payment_method: {
      card: elements.getElement(CardElement),
    },
  }
);

if (error) {
  console.error(error);
} else {
  console.log(paymentIntent);
}

};

return (
<form onSubmit={handleSubmit}>
<CardElement />
<button type="submit" disabled={!stripe}>
Pay
</button>
</form>
);
};

export default CheckoutForm;

[fathom charm]

is that the only place where confirmCardPayment is getting called?

[lavish mesa]

yes

strange

[fathom charm]

hmm are you disabling the button once it gets clicked on?
The error seems to suggest users can click multiple times

[lavish mesa]

but its working now :/