Stripe Live Mode Fails to Render Payment Details in NextJS

I've tested my application using Sandbox credentials (both publishable and secret keys) and now I'm trying to switch to production mode.

The Issue

• When I change the publishable key to the live key, no payment details appear in the UI.
• Switching back to the test key displays the payment details as expected.

I have only enabled one payment method (card) and there are no visible errors, making it challenging to pinpoint the problem.

Below is my paymentDetails component:

TYPESCRIPTCopied
"use client"
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import * as React from "react";
import {Elements, PaymentElement, useElements, useStripe} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {Env} from "@/libs/Env";
import {subscribe} from "@/api/userCost";
import {useAuth} from "@clerk/clerk-react";
import toast from "react-hot-toast";

interface StripePaymentDetailsProps {
  className?: string;
  clusterName: string;
  onSubmited: () => Promise<void>;
}

console.log('Using publishable key: ', Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
const stripePromise = loadStripe(Env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);

stripePromise
  .catch((error) => {
    console.error("Error loading Stripe:", error);
  });

stripePromise
  .then((error) => {
    console.log("stripe loaded", error)
  });

interface CheckoutFormProps {
  onSubmited: () => Promise<void>;
  clusterName: string;
  email: string;
}
const CheckoutForm: React.FC<CheckoutFormProps> = ({onSubmited, clusterName }) => {
  const stripe = useStripe();
  const elements = useElements();

  const [errorMessage, setErrorMessage] = useState();
  const [loading, setLoading] = useState(false);
  const { getToken } = useAuth();

  const handleError = (error: any) => {
    setLoading(false);
    setErrorMessage(error.message);
  }

  const handleSubmit = async (event: any) => {
    // We don't want to let default form submission happen here,
    // which would refresh the page.
    try {
      event.preventDefault();

      if (!stripe || !elements) {
        // Stripe.js hasn't yet loaded.
        // Make sure to disable form submission until Stripe.js has loaded.
        return;
      }

      setLoading(true);

      // Trigger form validation and wallet collection
      const {error: submitError} = await elements.submit();
      if (submitError) {
        handleError(submitError);
        setLoading(false)
        return;
      }

      // Create the subscription
      const token = await getToken({ "template": "purrstack" });
      if (token) {
        console.log(clusterName)
        const {type, clientSecret} = await subscribe(token, clusterName);
        const confirmIntent = type === "setup" ? stripe.confirmSetup : stripe.confirmPayment;

        // Confirm the Intent using the details collected by the Payment Element
        if (onSubmited) {
          await onSubmited();
        }

        const {error} = await confirmIntent({
          elements,
          clientSecret,
          confirmParams: {
            return_url: `${window.location.origin}/dashboard?element=instances`,
          },
        });

        if (error) {
          // This point is only reached if there's an immediate error when confirming the Intent.
          // Show the error to your customer (for example, "payment details incomplete").
          handleError(error);
          toast.error("An error occurred while creating the subscription");
        } else {
          if (onSubmited) {
            console.log("onSubmited");
            onSubmited();
          }
        }

      } else {
        setLoading(false);
      }
    } catch (error) {
      setLoading(false);
      toast.error("An error occurred while creating the subscription");
    }

  };

  return (
    <form onSubmit={handleSubmit}>
      <PaymentElement options={{
        defaultValues: {
          billingDetails: {
            email: "og@gmail.com"
          }
        }
      }} />
      <div>
        {errorMessage && <div className={"text-red-600"}>{errorMessage}</div>}
      </div>

      <Button type="submit" disabled={!stripe || loading}>
        Submit
      </Button>

    </form>
  );
}

const StripePaymentDetails: React.FC<StripePaymentDetailsProps> = ({ className, onSubmited, clusterName }) => {
  return (
    <div className={className}>
      <h1> Add payment details</h1>
      <Elements stripe={stripePromise} options={{
        mode: 'subscription',
        amount: 0,
        currency: 'eur',
        // Fully customizable with appearance API.
        appearance: {/*...*/},
      }}>
        <CheckoutForm email={"toto@gmail.com"} onSubmited={onSubmited} clusterName={clusterName}/>
      </Elements>
    </div>
  );
};

export default StripePaymentDetails;

I have verified that the logged publishable key matches the one on the live Stripe dashboard.

Below is the UI difference when switching the publishable key between test and production modes:

Test

Live mode

Here is the response from the Stripe API call to elements/sessions:

JSONCopied
{
  "account_id": "acct_1QCnqaKB54wUKrYC",
  "apple_pay_merchant_token_webhook_url": null,
  "apple_pay_preference": "disabled",
  "business_name": "PurrStack",
  "card_brand_choice": {
    "eligible": false,
    "preferred_networks": [
      "cartes_bancaires"
    ],
    "supported_cobranded_networks": {
      "cartes_bancaires": false
    }
  },
  "card_installments_enabled": false,
  ...
  "unverified_payment_methods_on_domain": [
    "apple_pay"
  ]
}

I also observe several warnings and errors not present in test mode when opening payment details in production:

BASHCopied
lockdown-install.js:1 Removing unpermitted intrinsics
110Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
lockdown-install.js:1 Removing unpermitted intrinsics
lockdown-install.js:1 Removing unpermitted intrinsics
...

I'm open to any suggestions or insight to help resolve this issue.

For further context, the website (login/registration required to access payment details) is: https://purrstack-dev.catpack.ninja/dashboard