A tinydemo to show how to update the Payment Element to reflect changes on the associated Payment Intent.
When making updates to the underlying Payment Intent, use the elements.fetchUpdates()
method to ensure the Payment Element instance is up-to-date. For example, changing amount
or currency
values could affect the payment methods offered.
const options = {
clientSecret: clientSecret,
// Fully customizable with appearance API.
appearance: {
theme: 'flat',
},
};
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');
// Update the Payment Intent via your server
await fetch('/update-payment-intent', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ amount, currency })
})
.then((r) => {
if (!r.ok) throw new Error('Payment Intent Update Failed')
})
.then(async () => {
await elements.fetchUpdates()
})
.catch((err) => {
console.log(err.message)
})
Make copies, remix, change and learn how to play with this tinydemo.
Reach out to us on any of our contact channels: