#danilkinkin
toxic sentinel
radiant eagle
could you share the exact code you have so far?
jade forum
Yep
function GooglePayButton({ onPayed, onValidateFields }) {
const [isAvailable, setIsAvailable] = useState(false);
const [isLoading, setIsLoading] = useState(true);
const { t } = useTranslation('widgets');
const stripe = useStripe();
const elements = useElements();
const isUnavailable = !isAvailable && !isLoading;
const handleConfirm = async (event) => {
if (!stripe) {
// Stripe.js hasn't loaded yet.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
onPayed({
stripeElements: elements,
stripe,
});
};
const handleClick = ({ resolve }) => {
const options = {
phoneNumberRequired: false,
billingAddressRequired: false,
shippingAddressRequired: false,
};
if (onValidateFields()) {
resolve(options);
} else {
// I really want call here reject() that say stripe for prevent click action
}
};
return (
<div
className={clsx(
'google-pay',
'google-pay__backdrop',
isUnavailable && 'google-pay__unavailable',
isMobile && 'google-pay__mobile'
)}
>
{isLoading && (
<div className="google-pay__loader">
<Spinner />
</div>
)}
{isUnavailable && (
<div className="google-pay__unavailable-text">{t('payment_method_not_available')}</div>
)}
<ExpressCheckoutElement
options={{
wallets: { applePay: 'never', googlePay: 'always' },
buttonHeight: 48,
buttonType: {
googlePay: 'buy',
}
}}
onClick={handleClick}
onConfirm={handleConfirm}
onReady={({ availablePaymentMethods }) => {
setIsLoading(false);
setIsAvailable(availablePaymentMethods?.googlePay || false);
}}
/>
</div>
);
}
And i say about this stub
radiant eagle
my assumption is just this is impossible and you wouldn't do the validation in the onClick function
maybe do it a different way , apply disabled to the element, and remove it when you're ready for the customer to be able to pay
jade forum
I can't make pre validation if I use stripe? But why? It's a classic scenario, for example checkbox "I confirm & read"
This button in iframe and don't have disabled option also
valid forge
Can you try to listen to this event:
https://stripe.com/docs/js/element/events/on_click?type=expressCheckoutElement
radiant eagle
they do listen to that event
the point is that when listening to it, in handleClick, they would like to have a way to then not proceed to process the payment or open the UI(which doesn't seem possible to me)
valid forge
Ah sorry, I missed that part, checking more...
jade forum
But it works on all platforms, expect IOS, on IOS stub appearing too early. When onClick fired, but I think it should be happened after call resolve() callback
Also, I think it's intuitive when we have resolve, then we should have reject option. Or naming is wrong and method should name different. For example, update or setOptions
valid forge
Also, I think it's intuitive when we have resolve, then we should have reject option.
Why not simply don't call resolve function if you have validation failure?
Trying to test on safari, like you are doing
jade forum
See my code example, now i use this solution, but problem on IOS Safari
valid forge
Checking your code:
// I really want call here reject() that say stripe for prevent click action
What is the problem here ?
jade forum
Stub appearing even if i not call resolve()
valid forge
I can't manage to reproduce on Safari.
jade forum
Safari on mac or ios?
valid forge
Safari on Mac.
jade forum
Check on IOS please, problem only on IOS
valid forge
ok, testing that...
I just opened the webpage on an iPhone, and nothing happens if I don't call event.resolve(options);
are you sure that when testing on IOS onValidateFields() is returning false in your test scenario ?