#awombmayu_code

1 messages · Page 1 of 1 (latest)

quick yarrowBOT
#

👋 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/1441378647293427848

📝 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.

dry tangle
#

hi there!

livid harbor
#

hi:)

dry tangle
#

what do youn mean by "but didnt work"? did you get an error message? if so, which one?

livid harbor
#

i mean that the dev tools div is still there. i dont get error messages but warnings like @react-refresh:267 Unsupported prop change on Elements: You cannot change the stripe prop after setting it. Error Component Stack and Stripe.js] Unrecognized elements() parameter: developerTools is not a recognized parameter. This may cause issues with your integration in the future.

#

my question is basically where should i put the disable option and how do i write it correct

dry tangle
#

Unsupported prop change on Elements: You cannot change the stripe prop after setting it. E
looks like you are trying to update a prop instead of setting it directly

#

where should i put the disable option
can you share your existing code so I can see how you are trying to set it now?

livid harbor
dry tangle
#

you are trying to set the developerTools direct inside the <ExpressCheckoutElement>, which is not the correct spot.

#

I'm not sure exactly where to set it when using React. Could you try maybe in loadStripe directly?

quick yarrowBOT
livid harbor
#

in this line?? how do i write it? tried some variations but didnt work ```const stripePromise = loadStripe("pk_test_51SKZ8tFSXSPNg8P8oZTV6xjnAMM7clXDuggQBLjFZH49zR5GMkjIoWfREs7cPqMl3rqwFDMKNk54tCM3dTyS2YyH00AiGUOWqE");

vital folio
livid harbor
#

yeahhh it worked thanks

vital folio
#

Excellent! Glad to hear it 🙂

livid harbor
#

i have another question: while developing everything works fine, but when i upload to vercel and try to pay via paypal it doesnt work. i enter my correct paypal sandbox mail and password and click buy, then paypal redirects me to my page as if it acccepted my payment, but keeps the scrreen 'frozen'. in the background right under the express payment paypal button i can see error text: 'the string did not match the expected pattern'. i tried to rewrite the metadata to something diffent, but even when i write nothing the same error occurs. (also when i go to my cart the payment options wont load, but only after deploy, in dev they work, maybe the two errors are correlated???)

vital folio
#

Can you share a Payment Method ID where this happens? Do you have a screenshot of the page with the error?

livid harbor
#

the payment does not show up in the dashboard

quick yarrowBOT
thin mango
#

👋 taking over for my colleague. Let me catch up.

#

please give me a moment and I will be with you shortly

#

would you mind sharing your ECE code please?

livid harbor
jaunty fern
#

can you share just the part where you invoke the <ExpressCheckoutElement /> component and it's options?

livid harbor
#

srry ```
{/* BUTTONS */}

    {stripe && elements && (
        <div className="mb-4 relative">
            
            <div style={{
                opacity: isLoading ? 0.5 : 1, 
                pointerEvents: isLoading ? 'none' : 'auto' 
            }}>
                <ExpressCheckoutElement
                    options={expressCheckoutOptions}
                    onConfirm={handleExpressCheckoutConfirm} 
                />
            </div>

            {/* Ladetext */}
            {isLoading && (
                <p className="text-center text-p5-reg mt-2 text-second">
                    Processing payment secure...
                </p>
            )}
        </div>
    )}
jaunty fern
livid harbor
# 
    const handleExpressCheckoutConfirm = async () => {
        
        if (!stripe || !elements) {
            return;
        }

        setIsLoading(true); 
        setMessage(null);

        try {

            const amountInCents = Math.round(product.price * 100);
            
            // Erstelle Metadaten für diesen spezifischen Einzelkauf
            const singleItemMetadata = JSON.stringify([{
                id: product.id,
                name: product.name,
                price: product.price,
                quantity: 1,
                selectedOption: selectedOption || "Default"
            }]);

            const response = await fetch('/api/create-payment-intent', { 
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ 
                    amount: amountInCents,
                    metadata: { cart_details: singleItemMetadata }
                }) 
            });

            const data = await response.json();

            if (!data.clientSecret) {
                throw new Error("Server konnte keine Zahlung vorbereiten.");
            }

            // 2. JETZT BESTÄTIGEN WIR MIT DEM FRISCHEN SECRET
            const { error } = await stripe.confirmPayment({
                // Hier übergeben wir das Secret, das wir gerade geholt haben
                clientSecret: data.clientSecret, 
                elements: elements,
                confirmParams: {
                    return_url: `${window.location.origin}/complete`,
                }
            });

            if (error) {
                setMessage(`Zahlungsfehler: ${error.message}`);
            } else {
                setMessage("Zahlung erfolgreich initiiert.");
            }

        } catch (err) {
            setMessage(`Ein Fehler ist aufgetreten: ${err.message}`);
        }
        
        setIsLoading(false); 
    };
# 

    
const expressCheckoutOptions = useMemo(() => {
        if (!product) return {};
        
        return {
            buttonTheme: {
                applePay: 'white',
                googlePay: 'white',
                paypal: 'white',
                klarna: 'light'
            },
            layout: {
                maxColumns: 1,
                maxRows: 1
            },
            paymentMethods: {
                applePay: 'never',
                googlePay: 'never',
                amazonPay: 'never',
                link: 'never',
                klarna: 'never',
                paypal: 'auto'
            },
        };
    }, [product]); ```
jaunty fern
#

What's the raw output of singleItemMetadata from the variables

livid harbor
#

where do i find that?

jaunty fern
#

add a console.log(singleItemMetadata) after the const is initialised and dump it here. in particular want to see if there are any non-alphanumeric characters in it

#

or just share a pi_xxx ID

livid harbor
#

[{"id":4,"name":"Pineapple","price":1,"quantity":1,"selectedOption":"Default"}]

#

it works when developing, but only after upload to vercel it doesnt work

jaunty fern
#

sounds like a non-Stripe issue then? I'd recommend doing some debugging

livid harbor
#

some debugging? where should i pay attention to for this issue?

jaunty fern
#

clearly something differs between your dev env and production env, so make sure the keys etc match

livid harbor
#

these keys? "pk_test_51SKZ8tFSXSPNg8P8oZTV6xjnAMM7clXDuggQBLjFZH49zR5GMkjIoWfREs7cPqMl3rqwFDMKNk54tCM3dTyS2YyH00AiGUOWqE", {
i put them in the document, no?

jaunty fern
#

right, maybe? I don't know how your dev env is configured. are you not using env variables? maybe there's ones in Vercel that differ?

livid harbor
#

you mean this? so i have to find a different place where i put the test key?```
import { resolve } from 'path'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],

build: {
    rollupOptions: {
        input: {
            main: resolve(__dirname, 'index.html'),
        },
    },
},

server: {
    open: true,
    proxy: {
        '/api': {
            target: 'http://localhost:4242',
            changeOrigin: true,
            secure: false,
        },
    },
},

});```

#

where do i find environment variables and how do i proof if they differ, for vercel i dont really have code i just upload it only thing for vercel is the routes like this { "routes": [ { "src": "/", "dest": "/" }, { "src": "/product/1", "dest": "/" }, { "src": "/product/2", "dest": "/" }, { "src": "/product/3", "dest": "/" }, { "src": "/product/4", "dest": "/" }, { "src": "/product/5", "dest": "/" }, { "src": "/category", "dest": "/" }, { "src": "/cart", "dest": "/" }, { "src": "/complete", "dest": "/" } ] }

jaunty fern
#

I think you're probably best off writing in to our team and we can take a deeper look at the PayPal issue: https://support.stripe.com/contact/email?topic=api_integration

Stripe: Help & Support

Find help and support for Stripe. Our support site provides answers on all types of situations, including account information, charges and refunds, and subscriptions information. Get your questions answered and find international support for Stripe.

livid harbor
#

okey thanks