#arkansasbeauty_code
sterile boltBOT
👋 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/1274116342819323924
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
hybrid marlinBOT
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.
- arkansasbeauty_code, 1 hour ago, 20 messages
zenith salmon
Hello! Can you give me the ID of a recent object from your account so I can look up your domain? A Customer ID, Payment Intent ID, request ID, anything like that will do.
vestal stag
This is the one used for customer at the moment:
cus_Q8ZL7C3KQodkD9
But what strange is that even though I clearly see the new Gpay button its rendered un-clickable.
Thats the new one I migrated to.
zenith salmon
Nothing happens you you press that Google Pay button?
Regarding Apple Pay, you'll need to add a Payment Method Domain for the domain you're using the Express Checkout Element on: https://docs.stripe.com/payments/payment-methods/pmd-registration
In particular, you need to perform an additional validation step for Apple Pay: https://docs.stripe.com/payments/payment-methods/pmd-registration?dashboard-or-api=dashboard#verify-domain-with-apple
zenith salmon
Ah, sorry, I think I misunderstood because you mentioned Apple Pay in your original question. What shows up in the web dev console when you press the Google Pay button?
vestal stag
When clicking on it, it doesn't do anything nothing triggers I even added log to state triggered when clicked but nothing shows up
when hovering over the button the cursor is not pointer like it is with the others
zenith salmon
Can you share a link to your page so I can investigate?
vestal stag
Is it okay if I can just explain and try over message with you?
I can also share my code/implementation
zenith salmon
We can try, but it sounds like the kind of thing that's doing to be difficult to fix if I can't see/interact with the page myself.
Is it possible some invisible element is on top of the button and intercepting clicks?
Does the Link button work normally?
vestal stag
The Link button beside it thats rendered with it works like it should
vestal stag
import React, { useContext, useState, useEffect, useCallback, useMemo } from 'react';
import { useStripe, useElements, ExpressCheckoutElement } from '@stripe/react-stripe-js';
import { CartContext } from '../context/CartContext';
import { debounce } from 'lodash';
const DEBOUNCE_DELAY = 500;
const MAX_RETRIES = 3;
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 (retryCount = 0) => {
try {
setLoading(true);
setError(null);
const response = await fetch('/api/createCaGpApPaymentIntent', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
amount: total,
currency: 'usd',
paymentMethodType: 'card'
}),
});
if (!response.ok) {
throw new Error(`Error: ${response.status} ${response.statusText}`);
}
const data = await response.json();
if (data.clientSecret) {
setClientSecret(data.clientSecret);
} else {
throw new Error('Invalid response from server');
}
} catch (error) {
console.error('Error fetching client secret:', error);
if (retryCount < MAX_RETRIES) {
setTimeout(() => fetchClientSecret(retryCount + 1), 1000 * (retryCount + 1));
} else {
setError('Failed to initialize payment. Please try again later.');
}
} finally {
setLoading(false);
}
}, [total]);
const debouncedFetchClientSecret = useMemo(
() => debounce(fetchClientSecret, DEBOUNCE_DELAY, { leading: true, trailing: true }),
[fetchClientSecret]
);
continued.....
......continued here:useEffect(() => {
if (total > 0) {
debouncedFetchClientSecret();
}
return () => debouncedFetchClientSecret.cancel();
}, [total, debouncedFetchClientSecret]);
const handleClick = async ({ resolve }) => {
console.log('Click handler triggered');
resolve({
emailRequired: true,
});
};
const handleConfirm = async (event) => {
if (!stripe || !elements) {
return;
}
setLoading(true);
try {
const { error } = await stripe.confirmPayment({
elements,
clientSecret,
confirmParams: {
return_url: `${window.location.origin}/order-confirmation`,
},
});
if (error) {
setError(`Payment failed: ${error.message}`);
} else {
// Payment succeeded, handle accordingly
console.log('Payment successful');
}
} catch (error) {
console.error('Error in payment confirmation:', error);
setError('An unexpected error occurred. Please try again.');
} finally {
setLoading(false);
}
};
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
options={{
buttonType: {
applePay: 'buy',
googlePay: 'buy',
paypal: 'buynow'
},
buttonHeight: 40,
buttonTheme: {
applePay: 'black',
googlePay: 'black',
},
}}
onClick={handleClick}
onConfirm={handleConfirm}
/>
)}
</div>
);
};
export default GoogleAppleLinkPayButton;
That component is then being used here in another class:
import GoogleAppleLinkPayButton from '../components/GoogleAppleLinkPayButton';
import { loadStripe } from "@stripe/stripe-js";
import SetupForm from '../components/CardVerificationForm';
const stripePromise = useMemo(() => {
return loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
}, []);
<Elements
stripe={stripePromise}
options={{
mode: 'payment',
amount: total * 100,
currency: 'usd',
}}
>
<div className="w-full" >
<GoogleAppleLinkPayButton />
</div>
<div className="w-full " >
<CashAppPay />
</div>
</Elements>
zenith salmon
Can you add logging just above if (!stripe || !elements) { to see if it's hitting that far or not?
zenith salmon
And console.log('Click handler triggered'); never fires either?
vestal stag
some logs here:Express button- API response status: 200
GoogleAppleLinkPayButton.js:43 Express button- API response data: {clientSecret: 'pi_5PoY7JKvNVlEZBMa0j......'}
GoogleAppleLinkPayButton.js:46 Express button- Client secret received
GoogleAppleLinkPayButton.js:125 Express button- Rendering ExpressCheckoutElement. Loading: false
zenith salmon
If not, it could be another invisible element on top of the button, it could be some strange CSS thing, it could be some kind of event interception, could be a lot of things, honestly.
Is every single part of the button not clickable? Like have you checked all the edges and everything?
vestal stag
yes, I checked the edges, I also moved it to another part, same thing
I believe I followed the docs for the migration accurately
zenith salmon
I've never heard of the Link button working and the Google Pay button not working. Can you create an isolated test case to see if you can narrow it down? Or can you try on another computer (maybe it's something to do with your Chrome install)?
vestal stag
I will try
Ah, looks like the issue was indeed in that page somewhere as I created a test page and am able to see it open and is clickable
Thank you and I'm ashamed I didn't try that sooner 😞
vestal stag
Me too, and thanks for your time!