yen-paymentintent-integration

[winter cloak]

Hello, are you directly writing the code that creates the PaymentIntent or is that part of Woo's code?

[hasty temple]

No i am directly writing the code

Can i share some code? Maybe it'll be easier for u to help me

[winter cloak]

Sounds good to me. And can tell me more about what you mean by a circular dependency for these? Stripe doesn't have a concept of an orderResponse so out API should not require one to create a payment intent

[hasty temple]

Okay! Yes ill explain

[hasty temple]

This is my code:

const onSubmit = async (e) => {
        e.preventDefault();

        const formValues = getValues();

        if(!stripe || !elements) {
            return;
        }

        setIsLoading(true);

        // Collect payment details using elements.submit()
        const result = await elements.submit();

        // Handle the result of elements.submit()
        if (result.error) {
            setMessage(result.error.message);
            setIsLoading(false);
            return;
        }
        
        // Create payment intent
        let paymentIntent = await createPaymentIntentApi(cart.key).catch(
            (error) => {
                setMessage(error.message);
                setIsLoading(false);
                return;
            }
        );

        console.log("Created stripe payment intent: ", paymentIntent);

        const { clientSecret: clientSecret } = paymentIntent // response.data

        const lineItems = cart.items;

        // wooCommerceOrder is using lineItems instead of fetching from CoCart.
        // Previous code: await createOrderApi(....)
        const orderResponse = await createOrderApi(lineItems, paymentIntent.paymentIntentId, formValues).catch(
            (error) => {
                setMessage(error.message);
                setIsLoading(false);
                return;
        });

        const orderId = orderResponse.id; // Retrieve the generated order ID

        //Confirm the payment 
        const { error } = await stripe.confirmPayment({
            elements,
            clientSecret,
            confirmParams: {
                return_url: "https://webshop-nextjs-production.vercel.app",
            },
        });

        if(error.type === "card_error" || error.type === "validation_error") {
            setMessage(error.message);
        } else {
            setMessage("An unexpected error occured.");
        }

        setIsLoading(false);
    }

In my onSubmit function I have stored the createPaymentIntentApi function in let paymentIntent and I am passing the cart.key in its parameters, but I also want to pass the const orderId = orderResponse.id , which is retrieved from const orderResponse = await createOrderApi(...) to the createPaymentIntentApi function. So I want the function to look like this: await createPaymentIntentApi(cart.key, orderId).catch(...). But I am not sure how to make this work because if I place the createOrderApi above the createPaymentIntentApi then I'll be able to pass the orderId to the createPaymentIntentApi function, but what about the createOrderApi function? the createOrderApi function also expects the paymentIntent.paymentIntentId from the createPaymentIntentApi function.

I've thought about creating two paymentIntents, but I think that's bad practice

[winter cloak]

Yeah if this is just one payment it should just be one payment intent. It sounds like you will need to choose one of these things to get created first and then update it after the other is created

[light marlin]

yen-paymentintent-integration