Question 413782 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How do I remove the flicker on Stripe Pricing Tables

I am using the Stripe Pricing Table, but it flickers into view. How can I stop the flicker and remove the animation?

enter image description here

And this is my React page:

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

2

Answers


  1. 0

    You should try the following:

    '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 (
     <stripe-pricing-table 
       pricing-table-id="YOUR_TABLE_ID"
       publishable-key="YOUR_PUBLISHABLE_KEY"
     />
   );
};
export default PricingPage;

    (source)

    Login or Signup to reply.
  2. 0

    Based on the information on Stripe doc. I’m afraid that there’s no option to remove the loading animation for a pricing table.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search