See the code behind this demo!

Fetching updates with the Payment Element

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.


Console

> Ready ...

            
            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)
            })
            
          

Experiment and learn

Make copies, remix, change and learn how to play with this tinydemo.


Any questions?

Reach out to us on any of our contact channels: