如何消除 Stripe 定价表上的闪烁

Question

我正在使用 Stripe 定价表，但它在视图中闪烁。如何停止闪烁并删除动画？

这是我的 React 页面：

    import { Shell } from '@/components/shells/shell'
    import { getSessionUser } from '@/lib/db/users'
    import Stripe from '@/lib/stripe'
    
    export default async function Page() {
      const user = await getSessionUser()
      return (
        <Shell>
          <div className="mx-auto w-full max-w-6xl">
            <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
            <div
              dangerouslySetInnerHTML={{
                __html: `<stripe-pricing-table \
                  pricing-table-id="${Stripe.pricingTableID}" \
                  publishable-key="${Stripe.publishableKey}" \
                  client-reference-id="${user.id}" \
                ></stripe-pricing-table>`,
              }}
            />
          </div>
        </Shell>
      )
    }

Answer 1

您应该尝试以下操作：

'use client';
import { useEffect } from 'react';
const PricingPage = () => {
   useEffect(() => {
     const script = document.createElement('script');
     script.src = 'https://js.stripe.com/v3/pricing-table.js';
     script.async = true;
     
     // Add script to document
     document.body.appendChild(script);
     
     // Cleanup function
     return () => {
     document.body.removeChild(script);
   };
   }, []); // Empty dependency array means this runs once on mount
  return (
     <div className="w-full max-w-6xl mx-auto">
       <stripe-pricing-table 
         pricing-table-id="YOUR_TABLE_ID"
         publishable-key="YOUR_PUBLISHABLE_KEY"
       />
     </div>
   );
};
export default PricingPage;

（来源）