How can I update the Stripe PaymentElement amount in React without reloading the page?

Below is an explanation along with guidance on what you need to do.

Why the Amount Isn't Updating

The PaymentElement renders based on the PaymentIntent (identified by its client secret) that was originally created. If you update the cart total (amount) on your site, you’re creating a new PaymentIntent on the server side and receiving a new client secret. However, the PaymentElement won’t automatically update to the new amount unless you remount it with the new client secret.

How to Update the PaymentAmount

To have the updated amount reflect in the PaymentElement, you’ll need to completely reinitialize the Elements (and its PaymentElement) by doing one of the following:

1. Unmount and Remount the Elements Provider:
   When the client secret changes, you need to remount the Elements provider. This ensures that the PaymentElement is reinitialized with the updated PaymentIntent details (and new amount).

2. Create a New PaymentIntent:
   Ensure that on the server side, when the amount is updated, you create a new PaymentIntent. Then, update your client state with the new client secret and force a remount of the Elements provider.

Example Approach

Here’s one approach: conditionally render the Elements provider only when you have a client secret. When grandTotal changes, fetch the new client secret; the new client secret will cause Elements to remount. You might also want to add a key to the Elements component so that React properly re-mounts it:

JAVASCRIPTCopied
import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import CheckoutForm from '../../components/CheckoutForm'; // Adjust the path as needed
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { useParams } from 'next/navigation';
import { useSelector } from 'react-redux';

export default function CheckoutPage() {
  const storeInfo = useSelector((state) => state.storeInfo);
  const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
  const [clientSecret, setClientSecret] = useState(null);
  const params = useParams();
  const storeId = params.store_id;
  const grandTotal = useSelector((state) => state.cart.grandTotal); // Assuming it's in the cart slice

  useEffect(() => {
    const grandTotalInCents = Math.round(grandTotal * 100);

    const fetchClientSecret = async () => {
      try {
        const response = await fetch('/api/checkout/create-payment-intent', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            amount: grandTotalInCents,
            name: 'Dummy User',
            email: 'test@gmail.com'
          }),
        });

        const data = await response.json();

        if (data.clientSecret) {
          setClientSecret(data.clientSecret);
        } else {
          console.error('Failed to retrieve client secret:', data);
        }
      } catch (error) {
        console.error('Error fetching client secret:', error);
      }
    };

    fetchClientSecret();
  }, [grandTotal]); // Dependency ensures this runs when grandTotal changes

  return (
    <div className="container mt-5">
      <div className="d-flex justify-content-end mb-3"></div>
      {stripePromise && clientSecret && (
        // Adding a key based on clientSecret forces Elements to remount when clientSecret changes.
        <Elements key={clientSecret} stripe={stripePromise} options={{ clientSecret }}>
          <CheckoutForm clientSecrett={clientSecret} />
        </Elements>
      )}
    </div>
  );
}

Key Points

• Client Secret and PaymentIntent: The PaymentElement is tied to the PaymentIntent. When the amount changes, you must create a new PaymentIntent on the backend and use its client secret.
• Forcing a Remount: By providing a unique key to the Elements component (in this case, using the client secret), React will unmount and remount the entire payment element, which forces it to reinitialize with the new amount.
• Reactivity: The PaymentElement itself isn’t “reactive” to changes in the PaymentIntent. Instead, you control the update by reinitializing the Elements provider with the new client secret.

This approach should ensure that when your grandTotal updates, the new PaymentIntent (with the updated amount) is used, and the PaymentElement reflects the new amount without the need for a full page reload.