您可以使用Next.Js提供的Script组件
https://nextjs.org/docs/basic-features/script

import Script from 'next/script'

<Script
  key="init-paddle"
  src="https://cdn.paddle.com/paddle/paddle.js"
  onLoad={() => {
    console.log('On paddle load')
    if (PADDLE_SANDBOX) {
      window.Paddle.Environment.set('sandbox')
    }
    window.Paddle.Setup({
      vendor: 12345,
      eventCallback: function (data) {
        // The data.event will specify the event type
        if (data.event === 'Checkout.Loaded') {
          console.log(data.eventData) // Data specifics on the event
        } else if (data.event === 'Checkout.Complete') {
          console.log(data.eventData) // Data specifics on the event
        } else if (data.event === 'Checkout.Close') {
          console.log(data.eventData) // Data specifics on the event
        }
      },
    })
  }}
/>

如果你使用的是typescript，并且你想输入paddle积分，你可以用途：
(not（但总比没有好）

/// paddle.d.ts

export declare global {
  interface Customer {
    total: number
    total_tax: number
    currency: string
  }

  type PaddleEvent =
    | 'Checkout.Loaded'
    | 'Checkout.Close'
    | 'Checkout.Complete'
    | 'Checkout.User.Subscribed'
    | 'Checkout.Quantity.Change'
    | 'Checkout.Login'
    | 'Checkout.Logout'
    | 'Checkout.PaymentMethodSelected'
    | 'Checkout.Coupon.Add'
    | 'Checkout.Coupon.Submit'
    | 'Checkout.Coupon.Cancel'
    | 'Checkout.Coupon.Applied'
    | 'Checkout.Coupon.Remove'
    | 'Checkout.Error'
    | 'Checkout.Location.Submit'
    | 'Checkout.Language.Change'
    | 'Checkout.Vat.Add'
    | 'Checkout.Vat.Cancel'
    | 'Checkout.Vat.Submit'
    | 'Checkout.Vat.Applied'
    | 'Checkout.Vat.Remove'
    | 'Checkout.WireTransfer.Complete'
    | 'Checkout.PaymentComplete'
    | 'Checkout.PaymentMethodChange'
    | 'Checkout.WireTransfer.PaymentMethodChange'

  interface Window {
    Paddle: {
      Checkout: {
        open: (options: {
          product: string | number
          title?: string
          message?: string
          coupon?: string
          email?: string
          marketingConsent?: '0' | '1'
          country?: string
          postcode?: string
          allowQuantity?: boolean
          quantity?: number
          disableLogout?: boolean
          locale?: string
          passthrough?: string
          referring_domain?: string
          success?: string
          successCallback?: string
          closeCallback?: string
          loadCallback?: string
          upsell?: string | number
          upsellTitle?: string
          upsellText?: string
          upsellAction?: string
          upsellCoupon?: string
          upsellPassthrough?: string
          override?: string
          displayModeTheme?: string
          // Inline checkout
          method?: string
          frameTarget?: string
          frameInitialHeight?: number
          frameStyle?: string
        }) => void
      }
      Environment: {
        set: (env: string) => void
      }
      Setup: (options: {
        vendor: number
        eventCallback: (data: {
          event: PaddleEvent
          eventData: {
            payment_method?: string
            available_payment_methods?: string
            available_payment_methods_count?: number
            checkout: {
              recurring_prices: {
                customer: Customer
                interval: {
                  type: string
                  length: number
                }
              }
              prices: {
                customer: Customer
              }
            }
            product: { id: number; name: string; quantity: number }
            user: { id: string; email: string; country: string }
          }
          checkoutData: {
            'paddlejs-version': '2.0.9'
            apple_pay_enabled: string
            display_mode: string
            guest_email: string
            is_popup: string
            method: string
            paddle_js: string
            parentURL: string
            parent_url: string
            passthrough: string
            popup: string
            product: string
            referring_domain: string
          }
        }) => void
      }) => void
    }
  }
}

不要把文档看得太字面。因为你使用的是React，所以包含任何内联JavaScript没有意义。Paddle.js只在客户端，所以它应该在根组件的useEffect回调中初始化。

// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <script src="https://cdn.paddle.com/paddle/paddle.js" />
          <NextScript />
        </body>
      </Html>
    )
  }
}

// pages/_app.js

import { useEffect } from 'react'

function MyApp({ Component, pageProps }) {
  // Initialize Paddle
  useEffect(() => {
    Paddle.Setup({ vendor: 1234567 })
  }, [])

  return <Component {...pageProps} />
}

您需要将其设置为内部HTML

<script
        type="text/javascript"
        dangerouslySetInnerHTML={{
          __html: `
          Paddle.Setup({ vendor: 123456 });`,
        }}
      ></script>

他们的文档详细说明了如何处理react：https://developer.paddle.com/guides/b4f911a991bd7-overlay-checkout
对于Next.js，您可以使用动态导入并禁用ssr，如下所示

// paddle-next-integration.js
const PaddleNextIntegration = () => {
  const Paddle = window.Paddle;
  const openCheckout  = () => { 
      Paddle.Checkout.open({ product: 12345 });
  }
  return (
    <div className="App">
      <header className="App-header">
        <Button variant="primary" onClick={openCheckout}>Subscribe Now!</Button>{' '}
      </header>
    </div>
  );
}
export default PaddleNextIntegration;

// main.js
export const DynamicPaddleNextIntegration = dynamic(() => import("./paddle-next-integration"), {
  loading: () => <Loading />,
  ssr: false
})

// you can use it now like this
<DynamicPaddleNextIntegration />