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
The simplest way to load PayPal globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptPayPal composable.
export default defineNuxtConfig({
scripts: {
registry: {
paypal: true
}
}
})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 only in production while using the proxy to send events.
<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: true,
}
},
// 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()),
}),
])