React HyperJS Checkout Form Not Executing Fully

[behdadmns]

I'm using @juspay-tech/react-hyper-js for a checkout form in React. When submitting the form, only console.log("start") appears, and the execution stops before setIsLoading(true), meaning the later logs never show.

It seems hyper or widgets might be null or not initialized properly, but I already check if (!hyper || !widgets) return;.

What is the correct way to ensure hyper and widgets are fully initialized before processing payments in React? What's the best practice for handling this?

const handleSubmit = async (e) => { e.preventDefault(); // Prevent default form behavior console.log("start"); setMessage(""); // Clear previous message if (!hyper || !widgets) { return; } console.log("1"); setIsLoading(true); console.log("2"); try { // Process payment const { error, status } = await hyper.confirmPayment({ elements: widgets.getElements(), // Send widgets for processing confirmParams: { return_url: "https://example.com/complete", // Return URL after processing }, redirect: "always", // Always redirect to return URL }); console.log("3"); if (error) { setMessage(error.message || "An unexpected error occurred."); } else if (status) { handlePaymentStatus(status); // Handle payment status } } catch (err) { setMessage("Something went wrong during payment processing."); console.log("4"); } finally { setIsLoading(false); console.log("5"); } };

[PritishBudhiraja]

Hey @behdadmns

Can you please check the Demo App in this section if you are using React JS. It will give you the whole flow how to integrate.

Can you please check this Demo App in this section if you are using Vanilla JS. It will give you the whole flow how to integrate.

Let me know still you face any issue.