How to integrate Paddle with NextJS

Question

Paddle requires these two scripts to be insert before </body> in HTML:

<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
<script type="text/javascript">
    Paddle.Setup({ vendor: 1234567 });
</script>

But NextJS doesn't have HTML files and when I insert into return function, { vendor: 1234567, debug: true } part creates a '}' expected error.

Does anyone know how to solve this?

Answer 1

You can use the Script component provided by Next.Js

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
        }
      },
    })
  }}
/>

If you're using typescript and you want to type the paddle integration you might use:

(not exhaustive, but better than nothing)

/// 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
    }
  }
}