#vickyh_docs
snow garnetBOT
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.
- vickyh_docs, 1 day ago, 32 messages
- vickyh_docs, 5 days ago, 32 messages
- vickyh_docs, 6 days ago, 27 messages
oak skiffBOT
đ 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/1267799645988327444
đ Have more to share? Add more details, code, screenshots, videos, etc. below.
strange kettle
Hi, let me help you with this.
You should be able to. Could you please share the whole code snippet where you create and update the elements?
lethal mesa
this.setLoading(true)
// Create payment request to proceed
let totalPrice
// Ensure number in boost page is not changed
if (this.boostPage) {
// Use Math.round because of some calculation resulting incorrect rounding
totalPrice = Math.round(this.totalAmount * 100)
} else {
totalPrice = parseInt(this.totalAmount * 100, 10)
}
const initialOptions = {
mode: 'payment',
amount: totalPrice,
currency: this.userCurrency.toLowerCase(),
paymentMethodTypes: ['card'],
}
const options = {
// Customizable by using the Appearance API.
paymentMethods: {
amazonPay: 'never',
link: 'never',
paypal: 'never',
applePay: 'always',
googlePay: this.googleEligible ? 'always' : 'never',
},
buttonTheme: {
applePay: 'white',
googlePay: 'white',
},
}
const elements = this.stripe.elements(initialOptions)
this.stripeElement = elements.create('expressCheckout', options)
this.stripeElement.mount('#express-checkout-element')
document.getElementById('payment-button').style.display = 'none'
document.getElementById('express-checkout-element').style.display = 'block'
this.stripeElement.on('click', event => {
const paymentOptions = {
emailRequired: true,
}
event.resolve(paymentOptions)
})
this.stripeElement.on('confirm', async () => {
const payload = {
usecase_data: {
payment_dest_data: null,
payment_src: this.paymentType ? this.paymentType.toUpperCase() : null,
payment_src_data: null,
price_unit_currency: 'USD',
currency_as_charged: this.userCurrency.toUpperCase(),
},
}
this.setLoading(true)
this.$emit('pay', {
payload,
callback: data => this.confirmStripeElement(elements, data),
})
})
this.setLoading(false)
},```here's the code for initializing element
I'm using nuxt right now so I can watch the changes of the state and trigger previous paymentRequestUpdate
but it's not written on the document how to update the amount
amount: parseInt(val * 100, 10),
})```Hmm, I am trying this myself now and I don't think it works...
lethal mesa
previously asked chatGPT and it told me to update the payment intent instead lol
strange kettle
Yeah, that works as well, but you're using a different flow and set the amount on the Elements.
lethal mesa
previously asked chatGPT and it told me to update the payment intent instead lol
so i think this is not a best practice
strange kettle
because I have some page that required updating the amount dynamically
Both flows:
- creating the PaymentIntent first and then collecting the payment details, and
- vice versa, deferred flow (the one you use)
should support updating the amount, but in different ways.
elements.update({ amount }) is the way to update the amount in the deferred flow. However, it doesn't work and I can't understand why.
lethal mesa
maybe we can treat it as a bug?
in this page also not mentioning we can update the amount
but stripe has this function as well which I have no requirement on using this
this function I think similar with updating amount
kindred prism
hi! elements.amount works as expected for me really. Give me a sec to give you a repro.
kindred prism
not sure what you mean by that
but anyway, https://lightning-antique-dawn.glitch.me/ . You can click the button to add 100c to the amount and then click the GooglePay button and see the amount has changed. Works fine
lethal mesa
hi! `elements.amount` works as expected for me really. Give me a sec to give you...
i got the hint from you
elements.amount
kindred prism
I mean that was a typo
kindred prism
like the code I use is just
document.getElementById("btn").addEventListener("click", (e) => {
e.preventDefault();
amount += 100
elements.update({amount: amount })
})
as described in https://docs.stripe.com/js/elements_object/update#elements_update-options-amount ; works as expected
yes you have to update the Elements object returned from calling stripe.elements()
kindred prism
also if you get it wrong it tells you in the console so make sure to look at that
[Stripe.js] Unrecognized expressCheckoutElement.update() parameter: amount is not a recognized parameter. This may cause issues with your integration in the future.