arkansasbeauty_code

[quaint monolith]

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

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

[flat vine]

When hovering over the Gpay its not a pointer cursor and when clicking on it nothing happens.

My component being used:
import React, { useContext, useState, useEffect, useCallback } from 'react';
import { useStripe, useElements, ExpressCheckoutElement } from '@stripe/react-stripe-js';
import { CartContext } from '../context/CartContext';

const GoogleAppleLinkPayButton = () => {
const stripe = useStripe();
const elements = useElements();
const [clientSecret, setClientSecret] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const { total } = useContext(CartContext);

const fetchClientSecret = useCallback(async () => {
if (!stripe || !elements) return;
setLoading(true);
try {
const response = await fetch('/api/createCaGpApPaymentIntent', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ amount: total, currency: 'usd', paymentMethodType: 'card' }),
});

  const data = await response.json();
  setClientSecret(data.clientSecret);
} catch (error) {
  setError('Failed to initialize payment. Please try again later.');
} finally {
  setLoading(false);
}

}, [stripe, elements, total]);

useEffect(() => {
if (total > 0 && stripe && elements) fetchClientSecret();
}, [total, stripe, elements, fetchClientSecret]);

const handlePayment = useCallback(async () => {
if (!stripe || !elements || !clientSecret) return;
setLoading(true);
try {
const { error } = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: { return_url: 'https://your-site.com/order/complete' },
});

  if (error) setError('Payment failed. Please try again.');
} catch {
  setError('An unexpected error occurred. Please try again.');
} finally {
  setLoading(false);
}

}, [stripe, elements, clientSecret]);

continued....

....rest of the code: if (!stripe || !elements || !clientSecret) return <div>Loading payment options...</div>;
if (error) return <div className="error-message">{error}</div>;

return (
<div className="payment-button-container">
{loading ? (
<div className="spinner-container">
<div className="spinner2" id="spinner2"></div>
</div>
) : (
<ExpressCheckoutElement onConfirm={handlePayment} />
)}
</div>
);
};

export default GoogleAppleLinkPayButton;

[proud hazel]

Hi, nothing is happening when you click the GooglePay button? Do you see any error on your console?

[flat vine]

no error in the console, just this: controller-735ace549e0b09c3fbb14efb749f1ba6.js:1 [Stripe.js] You have not registered or verified the domain, so the following payment methods are not enabled in the Express Checkout Element:

• apple_pay

Please follow https://stripe.com/docs/payments/payment-methods/pmd-registration to register and verify the domain.

But like I said I already registered in payment method domain in my stripe console, and not using apple pay just gpay.

[proud hazel]

Have you tried your site on a Safari browser?

[flat vine]

no I just need gpay not apple pay

[proud hazel]

I misread 'and not using apple pay just gpay.'.

Can you share the URL to your site please so I can try to replicate this on my end?

[flat vine]

its local

Does it all look right in terms of the code implementation?

[proud hazel]

I did not now think GooglePay would show if you were using a local host

I tried it on my test account and you would need to serve it over https for it to work

[flat vine]

I have ngrok

[proud hazel]

So can you share that link? Does not ngrok allow local development servers expose to the internet?

I tested this on my end and it works. That is a lot of code for me to parse through using this code, https://docs.stripe.com/elements/express-checkout-element/accept-a-payment.

Can you simplify your code a bit to mirror what we offer here to further debug this? At a high level, I do not see what the issue might be on the code.

[flat vine]

Ok, I will will try that

Thanks