#hayen_unexpected

1 messages · Page 1 of 1 (latest)

past rampartBOT
chilly sundialBOT
#

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.

past rampartBOT
#

đź‘‹ Welcome to your new thread!

⏲️ We'll be here soon! We typically respond in a few minutes, but in some cases we might need a bit more time (e.g., server's busy, you've got a complex question, etc.).

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can 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/1257638495510597694

đź“ť Have more to share? Add details, code, screenshots, videos, etc. below.

polar gull
#

hi! can you show some screenshots/examples of what this VAT is exactly and how you add it or what it looks like? not really following.

cerulean warren
#

Yes sure

#

So for now I've selected one product which is 1.00 and I've selected the Netherlands which adds the 21% VAT

#

And when I select paypal or ideal it redirect me to their own pages which shows the correct price which is 1.21 including VAT

#

But for some reason that's not the case when selecting Google Pay

#

This is what the Google Pay screen is showing:

#

As you can see it shows the price of 1.00, which is not correct because the price should be 1.21 including VAT

polar gull
#

so how does that look in code, how do you initialise the PaymentElement, how do you create the PaymentIntent?
your screenshots don't show Google Pay, is that a different integration not in the PaymentElement? what code did you write for that part?

cerulean warren
#

But when I click on 'Betalen' which means 'Pay' in dutch and when checking the stripe dashboard, it succesfully shows 1.21 including vat

#

So this is the code where I initialize the PaymentElement which is the Element component (i am using react). In here I am also passing the options to the Element component

# 
const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

export default function Checkout() {
    const {cart} = useContext(CartContext);
    const [grandTotal, setGrandTotal] = useState(0);
    const [grandTotalFetched, setGrandTotalFetched] = useState(false); // New state variable
    const searchParams = useSearchParams();

    useEffect(() => {
        if (cart && cart.items) {
            // Calculate grand total
            const newGrandTotal = cart.items.reduce(
                (total, item) => total + item.quantity * item.price,
                0
            );

            setGrandTotal(newGrandTotal);
        }
    }, [cart]);

    if(!grandTotal) {
        return (
            <Layout>
                <Container>
                    <div className={styles.successPage}>
                        <h1>Your cart is empty!</h1>
                        <center>Return to the <Link href="/">homepage</Link></center>
                    </div>
                </Container>
            </Layout>
        )
    }

    const appearance = {
        theme: 'stripe',
    };

    const options = {
        // clientSecret,
        appearance,
        mode: 'payment',
        amount: grandTotal,
        currency: 'eur',
        // paymentMethodTypes: ['card', 'ideal', 'paypal'],
        paymentMethodTypes: ['card', 'ideal', 'paypal'],
    };

    return (
        <Layout>
            { searchParams.get('redirect_status') === 'failed' && (
                <div className={styles.error}>
                    <p>There was an error processing your payment. Please try again.</p>
                </div>
            ) }
            <Container>
                <Elements options={options} stripe={stripePromise}>
                    <CheckoutContainer />
                </Elements>
            </Container>
        </Layout>
    )
}
#

In the CheckoutContainer component, I have a handleSubmit function which executes the following code when the user submits the checkout form. This is some code from the handleSubmit function:

đź“Ž message.txt
#

Please wait a few minutes i'll be disconnected from the internet, will be back in 5 minutes, please don't close this thread

polar gull
#

That code is incomplete, where do you call elements.submit() ? in any case, pretty sure you just need to uncomment that code that calls await elements.update(...) and move it around . The Google Pay sheet just uses the amount set on the Elements instnace, and elements.submit() is what pops up the sheet, you need to have called elements.update(...) to set the amount that you want before calling that.

cerulean warren
#

Oh, so you are sure that I have to use elements.update to solve this problem? I commented that code because i wasn’t sure on how to use it to solve this issue

#

I haven’t used elements.submit() just yet, because i wasnt sure of elements.update

#

Where exactly do I need to move the elements.update?

polar gull
#

to before elements.submit

cerulean warren
#

Oh yeah I understood that, but you just saw where I wanted to place the elements.update, it’s just commented out for now. Is that the correct place?

polar gull
#

I would say no

cerulean warren
#

Where do you recommend me to place it?

polar gull
#

any time before you call elements.submit

cerulean warren
#

Yeah I understand that, but where should I move elements.update and elements.submit

#

Is just before stripe.confirmPayment alright?

polar gull
#

elements.update should be called whenever you know that the amount you're wanting to charge has changed; you could also wait until this point(the button click/form submission event) if that's easier

#

elements.submit happens just before calling confirmPayment yes

cerulean warren
#

oh im sorry that was a stupid question I misunderstood you

#

i am testing this approach right now

#

Hmm, it still shows 1.00 in google pay screen

past rampartBOT
polar gull
#

you call elements.submit twice

#

// Collect payment details using elements.submit()
and
// UPDATE ELEMENTS + SUBMIT RESULT!

#

you need to remove one of them and make sure elements.update is being called before the remaining one is called.

cerulean warren
#

Updated my code with just one elements.submit, but it still shows 1.00 when selecting Google Pay

#

when logging amountInCents it logs 121 cents which is correct?

#

I also removed await before elements.update otherwise GooglePay would disappear from the PaymentElement..

polar gull
#

maybe it doesn't work if you call it update this late in the flow. I tested it just now and it works if I have a button I click that updates the amount and calls elements.update(), and then I submit the form later with a different button press.

#

ideally you'd be updating Elements when the amount actually changes, like in that useEffect function you had earlier.