#awombmayu_code

1 messages · Page 1 of 1 (latest)

languid shaleBOT
#

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1442456497857499217

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

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.

solemn ermine
#

my old thread got closed

#

tried like this but doesnt work ```
const metadataCartString = useMemo(() => {
const metadataItems = cartItems.map((itemLine) => {
const product = data_product.find((e) => e.id === itemLine.id); // You will need to import data_product here
if (!product) return null;
return {
id: itemLine.id,
name: product.name,
option: itemLine.option,
qty: itemLine.quantity,
price_eur: product.price,
};
}).filter(item => item !== null);

return JSON.stringify(metadataItems);

}, [cartItems]);

const [clientSecret, setClientSecret] = useState(null);
const [loading, setLoading] = useState(true);

// Effekt zum Abrufen des clientSecret (wird bei Betragsänderung neu geladen)

useEffect(() => {
setLoading(true);
const amountInCents = Math.round(totalAmount * 100);

if (amountInCents <= 0) {
     setClientSecret(null);
     setLoading(false);
     return;
}

    // 1. Client Secret vom Backend anfordern
    fetch('/api/create-payment-intent', { 
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
                amount: amountInCents,
                metadata: { cart_details: metadataCartString }
            })
    })
    .then((res) => res.json())
    .then((data) => {
        if (data.clientSecret) {
            setClientSecret(data.clientSecret);  
        } else {
            console.error("Server lieferte kein clientSecret:", data.error);
            setClientSecret(null); 
        }
    })
    .catch(error => {
        console.error("Netzwerkfehler beim Abrufen des clientSecret:", error);
        setClientSecret(null); 
    })
    .finally(() => {
        setLoading(false);
    });
}, [totalAmount, metadataCartString]);
```
foggy marsh
#

hi there!

solemn ermine
#

hi

foggy marsh
#

if 2 PaymentIntents are created, it means this code is called twice: fetch('/api/create-payment-intent'

#

or your code at '/api/create-payment-intent' is itself creating 2 PaymentIntents every time it's called

#

to debug this, you'll need to add a lof ot logs to your frontend and backend code to understand what is happening exactly

solemn ermine
# 
console.log(1)

const CheckoutFormComponent = () => {

console.log(2)

const { getTotalCartAmount, getStripeMetadataCart } = useContext(ShopContext); 
const totalAmount = getTotalCartAmount();

const [clientSecret, setClientSecret] = useState(null);
const [loading, setLoading] = useState(true);
    
    const appearance = useMemo(() => ({
        theme: 'night'
    }), []);

    useEffect(() => {
        setLoading(true);
        const amountInCents = Math.round(totalAmount * 100);
        const metadataCartString = getStripeMetadataCart(); 

        if (amountInCents <= 0) {
             setClientSecret(null);
             setLoading(false);
             return;
        }

        fetch('/api/create-payment-intent', { 
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ 
                amount: amountInCents,
                metadata: { cart_details: metadataCartString } 
            }) 
        })
        .then((res) => res.json())
        .then((data) => {
            if (data.clientSecret) {
                setClientSecret(data.clientSecret);  
            } else {
                console.error("", data.error);
                setClientSecret(null); 
            }
        })
        .catch(error => {
            console.error("", error);
            setClientSecret(null); 
        })
        .finally(() => {
            setLoading(false);
        });
    }, [totalAmount, getStripeMetadataCart]);
    
    if (loading || !clientSecret) {
        return <div className="">
            {loading ? "" : ""}
        </div>;
    }

    const elementsOptions = {
            clientSecret: clientSecret,
            appearance: appearance,
        };
    
    return (
        <Elements stripe={stripePromise} options={elementsOptions}>
            <CheckoutFormElements 
                totalAmount={totalAmount}
                clientSecret={clientSecret}
            />
        </Elements>
    );
}```
#

ok so log 1 gets showen once, but log 2 gets shown twice

#

(topp of page)

foggy marsh
#

great! now you need to figure out why this code is being called twice. I'm guessing CheckoutFormComponent is being mounted twice on your page.