Scripts
PayPal
PayPal is a popular payment gateway that allows you to accept payments online.
Nuxt Scripts provides multiple PayPal features:
useScriptPayPalcomposable which loads the scripthttps://www.paypal.com/sdk/js.ScriptPayPalButtonscomponent that allows you to embed PayPal Buttons on your site.ScriptPayPalMarkscomponent that allows you to embed PayPal Marks on your site.ScriptPayPalMessagescomponent that allows you to embed PayPal Messages on your site.
Script Stats
Loading
NPM
First-Party
No
Bundling
No
Tracked Data
Transactions
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
placeholder
placeholder
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>