Embed field: Slowly loading a Stripe script

Developing with Prismic
, ,
1

My client has a Stripe script for the pricing tables, which I use in the Prismic Embed field.

Problem:
The pricing tables don't show up for the first time the page loads. I had to refresh the page to load the pricing tables. However, this issue occurs for the Stripe script and HopSpot form as well.

But for now, I need help to figure out a Stripe script loading issue in the Prismic Embed field.

Next.js code

import Bounded from "@/components/Bounded/Bounded";
import InnerWrapper from "@/components/InnerWrapper/InnerWrapper";
import { Content, asText } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";

/**
 * Props for `Embed`.
 */
export type EmbedProps = SliceComponentProps<Content.EmbedSlice>;

/**
 * Component for "Embed" Slices.
 */
const Embed = ({ slice }: EmbedProps): JSX.Element => {
  return (
    <Bounded
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <InnerWrapper className="w-full mx-auto px-5 md:pt-[100px]">
        <div
          dangerouslySetInnerHTML={{ __html: asText(slice.primary.embed) }}
        />
      </InnerWrapper>
    </Bounded>
  );
};

export default Embed;

Thank you for your help!

2

Hi @solution.stack99,

This could be happening because of client-side script execution. Since Next.js uses server-side rendering by default, the Stripe pricing table script might not be properly executing when the page loads initially.

Have you tried using Next.js's <Script> component? It can ensure proper execution and avoids hydration issues. You can learn more about it in the Next.js documentation here: Components: Script | Next.js.

Let me know if that helps :slight_smile: