#manux_code
fickle basaltBOT
👋 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/1341356252285898833
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
vague lagoon
👋 happy to help
spare wing
hi!
Any idea how to get the google/apple pay checkout pop-ups reflect the updated payment intent?
vague lagoon
what are you using? PaymentElement or Express Checkout Element?
spare wing
Yeah, I tried that but somehow on my end when I'm trying to use elements.update I don't have the amount option available. Maybe you can help me to know exactly how to access the correct elements object?
I was trying the useElements hook, also trying to do
elements = stripe.elements({
clientSecret,
});
using useElements I only have appearance and locale available when using update 😕
fickle basaltBOT
tawdry bison
What do you mean by 'amount option available'?
As in, the paramerer isn't available in the types?
tawdry bison
I suspect your Stripe libs are out of date
tawdry bison
You can either update them or pass the amount param (it'll still work) and just do // @ts-ignore
Update is the better option if possible
spare wing
nice! That gives me something to try, I appreciate that. At least now I know this is the way to go (I had tried that but thought I was trying to access elements wrong)
If I update successfully the check out pop ups should be updated as well , right?
tawdry bison
Yes exactly:
Shown in Apple Pay, Google Pay, or Buy now pay later UIs
https://docs.stripe.com/js/elements_object/update#elements_update-options-amount
spare wing
Cool I'll give it a try and report back, much appreciated ynnoj 🙏
tawdry bison
However you should only really be using amount if you're doing the deferred intent flow. Sounds like you're not?
i.e. you're creating/updating an Payment Intent before using clicks pay
spare wing
Which one exactly is the deferred flow? do you have a link to the docs by any chance?
spare wing
I'm not super clear on the whole backend of this, I know we do manual capture because there's a pre-reservation thing happening and the payment is only captured after the reservation is fully confirmed
But we do create the payment intent as soon as the payment page renders
tawdry bison
Can you share your <Elements /> code?
tawdry bison
But we do create the payment intent as soon as the payment page renders
Yeah that isn't deferred then so amount, currency etc are not necessary
fetchUpdates should do what you need to update the Apple Pay UI to reflect the new amount on the intent
spare wing
Well that's bad news because I did try fetchUpdates and it didn't seem to work. Let me try it once more and get back to you. Is this the right way to do it?
const stripe = useStripe();
const elements =
stripe.elements({
clientSecret,
});
and then
elements.fetchUpdates().then(function (result) {
console.log(result);
});
??
tawdry bison
Should be. When are you calling fetchUpdates? After your server updates the intent?
spare wing
yeah, when the API returns the updated pricing data that means the modify method should have already ran
if fetchUpdates returns an empty object that means it should have been successful, right?
tawdry bison
Yeah
spare wing
OK let me try again just in case
tawdry bison
What's the clientSecret value?
spare wing
@staticmethod
def get_client_secret(obj):
return obj.payment_intent.client_secret
should be the payment intent's client secret, does that look correct?
tawdry bison
Yeah but you paste the actual value here
(it's safe to share)
I wanna check that the intent is actually being updated
tawdry bison
Hmm, your update request doesn't seem to actually have a different amount?
- Create –
amount: 29150: https://dashboard.stripe.com/test/logs/req_u1nVlR0JewRzCu - Update –
amount: 29150: https://dashboard.stripe.com/test/logs/req_0DegyuAWdqAC61
So there's no updates to fetch?
Probably an issue in your backend code whre you apply the discount I guess?
spare wing
sorry, now you should see how the amount has changed to 270.05 after the update has applied
however the google pay checkout still shows 291.50
tawdry bison
sorry, now you should see how the amount has changed to 270.05 after the update ...
Not on pi_3QtouZKPF1lmFQxD09NS6BIF no
What is the pi_xxx ID?
spare wing
pi_3QtowSKPF1lmFQxD1lRKu6Kb
this is the one that got updated in my dashboard, so before it was 291.50 now it changed to 270.05
tawdry bison
And fetchUpdates doesn't work?
spare wing
and if i go through with it it will complete with the correct amount
fetch update has ran succesfully but the checkout amount still is the one previous to the update
tawdry bison
Have you removed the amount parameters from your <Elements /> component? Can you share your full React code?
spare wing
let me see one sec
const Payment: NextPageWithLayout<{
formsContainerData: FormsContainerData;
client_secret: string;
stripe_account_pk: string;
profileData?: User;
}> = ({
formsContainerData,
client_secret: clientSecret,
stripe_account_pk,
profileData,
}) => {
const { locale } = useRouter();const [stripePromise, _] = useState(() => loadStripe(stripe_account_pk));
const options = useMemo(() => {
return {
clientSecret,
appearance: {
theme: "stripe",
},
locale,
};
}, [clientSecret, locale]) as StripeElementsOptions;return (
<Box className="notranslate">
{clientSecret && (
<Elements key={clientSecret} options={options} stripe={stripePromise}>
<FormsContainer
clientSecret={clientSecret}
formsContainerData={formsContainerData}
profileData={profileData}
slots={{
TermsAndConditionsLinkComponent: (props) => (
<NextLink external to={TERMS_AND_CONDITIONS_URL} {...props} />
),
PrivacyPolicyLinkComponent: (props) => (
<NextLink external to={PRIVACY_POLICY_URL} {...props} />
),
}}
/>
</Elements>
)}
</Box>
);
};
tawdry bison
I don't see confirmPayment?
spare wing
that's somewhere else, you want to see that too?
tawdry bison
Yeah I'd like to see the code where fetchUpdates is called and confirmPayment
spare wing
confirmPayment is in this function which is fired when the user submits the form
`export const useStripeConfirmPayment = ({
confirmParams,
onError,
}: {
confirmParams: ConfirmPaymentData;
onError: (message: string) => void;
}): (() => Promise<void>) => {
const stripe = useStripe();
const elements = useElements();
const { t } = useTranslation("payment", {
keyPrefix: "paymentPage",
});
const confirmPayment = useCallback(async () => {
if (!stripe || !elements) {
return onError(t("messages.stripeNotLoaded"));
}
const { error } = await stripe.confirmPayment({
elements,
confirmParams,
});
if (error) {
if (error.type === "card_error" || error.type === "validation_error") {
onError(error.message!);
} else {
onError(t("messages.unexpectedError"));
}
}
}, [stripe, elements, confirmParams, onError, t]);
return confirmPayment;
};`
tawdry bison
fetchUpdates?
spare wing
Let me check because I had it in a use effect that fired when pricing data was updated but I'm trying it inside the API fetch call too
so yeah it's working ok as far as I can see
`useEffect(() => {
if (isInitialRender.current) {
isInitialRender.current = false;
return;
}
validateVoucher(apiInstance)({
voucherCode,
uuid,
})
.then((data) => {
if (data.pricing_data) {
console.log(data.pricing_data);
setPricingData(data.pricing_data);
elements &&
elements.fetchUpdates().then(function (result) {
console.log(result);
});
}
})
.catch((err) => {
setPricingData((prev) => ({
...prev,
voucher_error: err.message,
}));
});
}, [uuid, voucherCode, apiInstance]);`
the result from fetch updates is an empty object
fickle basaltBOT
tawdry bison
Right but where does that effect run? Could it be running unexpecedtly and resetting the Elements instance somehow?
spare wing
Hmm not really but even if so, after the intent is updated, even if it did ran, shouldn't it be resetting the elements instance to the right state?
Doesn't fetchUpdates update the elements instance to reflect what we have on the dashboard?
should we try to run fetchUpdates on the useStripeConfirmPayment too?
fleet sonnet
hi! I'm taking over this thread.
spare wing
Cool, thanks for the assistance Soma
fleet sonnet
trying to summarize the issue:
- you mount the Payment Element, and it has the correct amount shown
- then you update the PaymentIntent amount on your backend, and call
fetchUpdates()on the frontend - it works, except the the amount in Google/Apple pay popup is still the old one
is this correct?
fleet sonnet
that's odd. do you have a link where we can reproduce the issue?
spare wing
Not really, do you have some way of testing if with a similar setup the apple/google pay checkout updates correctly on your end?
oh! I got it!
When I added fetch updates to the confirm payment function
`const confirmPayment = useCallback(async () => {
if (!stripe || !elements) {
return onError(t("messages.stripeNotLoaded"));
}
const { error } = await stripe.confirmPayment({
elements,
confirmParams,
});
if (error) {
if (error.type === "card_error" || error.type === "validation_error") {
onError(error.message!);
} else {
onError(t("messages.unexpectedError"));
}
}
elements.fetchUpdates().then(function (result) {
console.log(result);
});
}, [stripe, elements, confirmParams, onError, t]);`
Now it reflected the updated amount correctly
thanks a lot for the assistance guys, I really appreciate
if possible lets delete this thread as it contains company code (nothing really sensitive but still...)
fleet sonnet
interesting! I'm glad that you solved this.
you can edit your previous messages if you want.
spare wing
OK no worries