PayPal
PayPal is a popular payment gateway that allows you to accept payments online.
Nuxt Scripts provides PayPal SDK v6 integration:
useScriptPayPalcomposable which loads the scripthttps://www.paypal.com/web-sdk/v6/core.ScriptPayPalButtonscomponent that initializes the PayPal SDK v6 instance and exposes it via a scoped slot.ScriptPayPalMessagescomponent that allows you to use PayPal Messages on your site.
Nuxt Config Setup
Add this to your nuxt.config.ts to load PayPal globally. Alternatively you can use the useScriptPayPal composable for more control.
export default defineNuxtConfig({
scripts: {
registry: {
paypal: {
trigger: 'onNuxtReady',
}
}
}
})useScriptPayPal()
The useScriptPayPal composable lets you have fine-grain control over when and how PayPal is loaded on your site.
const { proxy } = useScriptPayPal()
// PayPal buttons render via componentPlease follow the Registry Scripts guide to learn more about advanced usage.
Example
Using PayPal in a 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>Types
To use PayPal with full TypeScript support, you will need
to install the @paypal/paypal-js dependency.
pnpm add -D @paypal/paypal-js
The v6 types are available from @paypal/paypal-js/sdk-v6.
Demo
<script setup lang="ts">
import type { Components, SdkInstance } from '@paypal/paypal-js/sdk-v6'
const clientId = 'YOUR_CLIENT_ID'
function onSdkReady(instance: SdkInstance<Components[]>) {
console.log('PayPal SDK v6 ready', instance)
}
async function startPayment(instance?: SdkInstance<Components[]>) {
if (!instance)
return
const eligibility = await instance.findEligibleMethods()
if (eligibility.isEligible('paypal')) {
const session = instance.createPayPalOneTimePaymentSession({
onApprove: async (data) => {
console.log('Payment approved:', data.orderId)
},
onError: (error) => {
console.error('Payment error:', error)
},
})
await session.start(
{ presentationMode: 'auto' },
fetch('/api/create-order').then(r => r.json()),
)
}
}
</script>
<template>
<div>
<ScriptPayPalButtons
:client-id="clientId"
:components="['paypal-payments']"
page-type="checkout"
@ready="onSdkReady"
>
<template #default="{ sdkInstance }">
<button @click="startPayment(sdkInstance)">
Pay with PayPal
</button>
</template>
</ScriptPayPalButtons>
</div>
</template>
With Environment Variables
If you prefer to configure your client ID using environment variables.
export default defineNuxtConfig({
scripts: {
registry: {
paypal: { trigger: 'onNuxtReady' },
}
},
// you need to provide a runtime config to access the environment variables
runtimeConfig: {
public: {
scripts: {
paypal: {
clientId: '', // NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID
},
},
},
},
})
NUXT_PUBLIC_SCRIPTS_PAYPAL_CLIENT_ID=<YOUR_CLIENT_ID>
Composable
export function useScriptPayPal<T extends PayPalApi>(_options?: PayPalInput) {}
Please follow the Registry Scripts guide to learn more about advanced usage.
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()),
}),
])