PayPal

PayPal provides online checkout and payment APIs.

Nuxt Scripts integrates the PayPal JavaScript SDK v6 through:

• useScriptPayPal composable, which loads https://www.paypal.com/web-sdk/v6/core.
• ScriptPayPalButtons component that initializes the PayPal SDK v6 instance and exposes it via a scoped slot.
• ScriptPayPalMessages component for creating a paypal-messages session.

export default defineNuxtConfig({
  scripts: {
    registry: {
      paypal: {
        trigger: 'onNuxtReady',
      }
    }
  }
})

const { proxy } = useScriptPayPal()

// PayPal buttons render via component

<script setup lang="ts">
const { proxy } = useScriptPayPal()

// noop in development, ssr
// just works in production, client
function handleAction() {
  // PayPal buttons render via component
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

The composable uses PayPal's sandbox endpoint in development and the live endpoint in production unless you set sandbox explicitly.

Types

Install @paypal/paypal-js for full TypeScript support.

pnpm add -D @paypal/paypal-js

The v6 types are available from @paypal/paypal-js/sdk-v6.

Demo

With environment variables

Configure the client ID with an environment variable:

export default defineNuxtConfig({
  scripts: {
    registry: {
      paypal: { trigger: 'onNuxtReady' },
    }
  },
})

The module automatically registers PayPal's public clientId runtime-config field, so you can omit a manual runtimeConfig block.

NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>

The facade components currently default their client-id prop to the literal value test. That prop overrides runtime config, so pass the resolved ID to the component explicitly:

<script setup lang="ts">
const config = useRuntimeConfig()
const clientId = config.public.scripts.paypal.clientId
</script>

<template>
  <ScriptPayPalButtons :client-id="clientId" />
</template>

Without that prop, a production build uses PayPal's live endpoint with the test client ID.

Composable

export function useScriptPayPal<T extends PayPalApi>(_options?: PayPalInput) {}

For triggers, proxying, and other script options, see Registry Scripts.

export const PayPalOptions = union([
  object({
    /**
     * Your PayPal client ID.
     * @see https://developer.paypal.com/sdk/js/reference/
     */
    clientId: string(),
    clientToken: optional(string()),
    /**
     * Use the PayPal sandbox environment. Defaults to `true` in development.
     */
    sandbox: optional(boolean()),
  }),
  object({
    clientId: optional(string()),
    /**
     * A server-generated client token for authentication.
     * @see https://docs.paypal.ai/payments/methods/paypal/sdk/js/v6/paypal-checkout
     */
    clientToken: string(),
    /**
     * Use the PayPal sandbox environment. Defaults to `true` in development.
     */
    sandbox: optional(boolean()),
  }),
])