---
title: "PayPal · Nuxt Scripts"
meta:
  description: "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:description": "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:title": "PayPal · Nuxt Scripts"
---

```

Nuxt Scripts on GitHub

**

**Payments**# **PayPal**[Copy for LLMs](https://scripts.nuxt.com/scripts/v0/payments/paypal.md) [**~~PayPal~~**](https://www.paypal.com) is a popular payment gateway that allows you to accept payments online. Nuxt Scripts provides multiple PayPal features: - `useScriptPayPal` composable which loads the script `https://www.paypal.com/sdk/js`. - `ScriptPayPalButtons` component that allows you to embed [**~~PayPal Buttons~~**](https://developer.paypal.com/sdk/js/reference/#buttons) on your site. - `ScriptPayPalMarks` component that allows you to embed [**~~PayPal Marks~~**](https://developer.paypal.com/sdk/js/reference/#marks) on your site. - `ScriptPayPalMessages` component that allows you to embed [**~~PayPal Messages~~**](https://developer.paypal.com/studio/checkout/pay-later/us/customize/reference) on your site. ## Types To use the PayPal with full TypeScript support, you will need to install the `@paypal/paypal-js` dependency.```
pnpm add -D @paypal/paypal-js
```### Demo placeholderDisabled placeholder```
<template>
  <div>
    <ScriptPayPalButtons
      class="border border-gray-200 dark:border-gray-800 rounded-lg"
      :button-options="buttonOptions"
      :disabled="disabled"
    />
    <label>
      Disabled
      <input v-model="disabled" type="checkbox">
    </label>
    <ScriptPayPalMarks />
    <ScriptPayPalMessages :messages-options="{ style: { color: 'white-no-border', layout: 'flex' } }" />
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import type { PayPalButtonsComponentOptions } from '@paypal/paypal-js'

  const buttonOptions = computed(() => ({
    style: {
      layout: 'vertical',
      color: 'blue',
      shape: 'rect',
      label: 'paypal',
    },
    message: { amount: '10.00' },
  } satisfies PayPalButtonsComponentOptions))

  const disabled = ref(false)
</script>
```#### With Environment Variables If you prefer to configure your client ID using environment variables.nuxt.config.ts```
export default defineNuxtConfig({
  scripts: {
    registry: {
      paypal: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        paypal: {
          clientId: '', // NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID
        },
      },
    },
  },
})
```.env```
NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
```[~~Edit this page~~](https://github.com/nuxt/scripts/edit/0.x/docs/content/scripts/v0/payments/paypal.md) [~~Markdown For LLMs~~](https://scripts.nuxt.com/scripts/v0/payments/paypal.md) [**Lemon Squeezy** Use Lemon Squeezy in your Nuxt app.](https://scripts.nuxt.com/scripts/v0/payments/lemon-squeezy) [**Stripe** Use Stripe in your Nuxt app.](https://scripts.nuxt.com/scripts/v0/payments/stripe)