feat: PayPal SDK (#503)

Co-authored-by: Robin Kehl <[email protected]>

Author: harlan-zw

docs/app/components/content/PayPalDemo.vue

@@ -0,0 +1,32 @@
+<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>

docs/content/scripts/payments/paypal.md

@@ -0,0 +1,80 @@
+---
+title: PayPal
+description: Use PayPal in your Nuxt app.
+links:
+  - label: useScriptPayPal
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/registry/paypal.ts
+    size: xs
+  - label: "<ScriptPayPalButtons>"
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/ScriptPayPalButtons.vue
+    size: xs
+  - label: "<ScriptPayPalMarks>"
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/ScriptPayPalMarks.vue
+    size: xs
+  - label: "<ScriptPayPalMessages>"
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/components/ScriptPayPalMessages.vue
+    size: xs
+---
+
+[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.
+
+```bash
+pnpm add -D @paypal/paypal-js
+```
+### Demo
+
+::code-group
+
+:pay-pal-demo{label="Output"}
+
+```vue [Input]
+<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>
+```
+
+::

package.json

@@ -73,6 +73,7 @@
   },
   "peerDependencies": {
     "@stripe/stripe-js": "^7.0.0",
+    "@paypal/paypal-js": "^8.1.2",
     "@types/google.maps": "^3.58.1",
     "@types/vimeo__player": "^2.18.3",
     "@types/youtube": "^0.1.0",
@@ -82,6 +83,9 @@
     "@stripe/stripe-js": {
       "optional": true
     },
+    "@paypal/paypal-js": {
+      "optional": true
+    },
     "@types/google.maps": {
       "optional": true
     },
@@ -117,6 +121,7 @@
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/scripts": "workspace:*",
     "@nuxt/test-utils": "3.19.2",
+    "@paypal/paypal-js": "^8.1.2",
     "@types/semver": "^7.7.1",
     "@typescript-eslint/typescript-estree": "^8.44.0",
     "acorn-loose": "^8.5.2",

playground/pages/index.vue

@@ -54,6 +54,10 @@ const thirdParties = [
     name: 'Stripe',
     path: '/third-parties/stripe/nuxt-scripts',
   },
+  {
+    name: 'PayPal',
+    path: '/third-parties/paypal/nuxt-scripts',
+  },
   {
     name: 'Segment',
     path: '/third-parties/segment',

playground/pages/third-parties/paypal/nuxt-scripts.vue

@@ -0,0 +1,32 @@
+<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>

pnpm-lock.yaml

@@ -214,6 +214,16 @@ export async function registry(resolve?: (path: string, opts?: ResolvePathOption
         from: await resolve('./runtime/registry/lemon-squeezy'),
       },
     },
+    {
+      label: 'PayPal',
+      src: false, // should not be bundled
+      category: 'payments',
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.728 190.5" xmlns:v="https://vecta.io/nano"><g transform="translate(898.192 276.071)"><path clip-path="none" d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z" fill="#001c64"/><path clip-path="none" d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z" fill="#0070e0"/><path clip-path="none" d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z" fill="#003087"/></g></svg>`,
+      import: {
+        name: 'useScriptPayPal',
+        from: await resolve('./runtime/registry/paypal'),
+      },
+    },
     // content
     {
       label: 'Vimeo Player',