PayPal

The SDK provides two native PayPal providers that use the PayPal JS SDK directly.

Constraint: Both providers share the PayPal JS SDK singleton. See Known Constraints — PayPal JS SDK Singleton before using both on the same page.

PayPal:PayPalExpress

Renders the standard PayPal Express Checkout button.

Options — PayPalOptions

Field	Type	Required	Default	Description
intent	'capture' | 'authorize'	No	'capture'	'capture' settles immediately; 'authorize' holds funds for later capture
currencyCode	string	No	'EUR'	ISO 4217 currency code
components	string	No	—	Comma-separated PayPal SDK components (e.g. 'buttons,funding-eligibility')
fundingSource	'paypal' | 'card' | 'paylater' | 'venmo' | 'credit'	No	'paypal'	Controls which PayPal button variant is rendered

Style — PayPalStyle

Field	Type	Description
color	'gold' | 'blue' | 'white' | 'black'	Button background color
shape	'rect' | 'pill'	Button border shape
height	number	Button height in pixels (25–55)
label	'paypal' | 'checkout' | 'pay'	Text label on the button

PayPal:PayLater

Renders the PayPal Pay Later button. The fundingSource is automatically set to paylater and cannot be changed. The Pay Later button is only shown if the buyer is eligible.

Options — PayPalPayLaterOptions

Field	Type	Required	Default	Description
intent	'capture' | 'authorize'	No	'capture'	Same as PayPal Express
currencyCode	string	No	'EUR'	ISO 4217 currency code
components	string	No	—	Comma-separated PayPal SDK components

Important: If you use PayPal:PayLater alongside PayPal:PayPalExpress, both intent and currencyCode must be identical in both providers' options.

The PayPal:PayLater provider shares the same PayPalStyle as PayPal:PayPalExpress.

Example — PayPalExpress and PayLater Together

<div id="paypal-container"></div>
<div id="paylater-container"></div>

import { ExpressButtons } from 'collana-pay-js';

const buttons = ExpressButtons({
  providers: [
    {
      providerProtocolType: 'PayPal',
      paymentMethodType: 'PayPalExpress',
      container: '#paypal-container',
      style: {
        color: 'gold',
        shape: 'rect',
        height: 45,
        label: 'paypal',
      },
      options: {
        intent: 'capture',
        currencyCode: 'EUR',
      },
    },
    {
      providerProtocolType: 'PayPal',
      paymentMethodType: 'PayLater',
      container: '#paylater-container',
      style: {
        color: 'gold',
        shape: 'rect',
        height: 45,
      },
      options: {
        // Must match PayPalExpress options
        intent: 'capture',
        currencyCode: 'EUR',
      },
    },
  ],

  onClick: async (identity, paymentMethodData) => {
    const res = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ provider: identity, paymentMethodData }),
    });
    const order = await res.json();
    return { orderId: order.id, checkoutData: { id: order.paypalOrderId } };
  },

  onApprove: (data) => {
    window.location.href = `/order/success?id=${data.orderId}`;
  },

  onCancel: (identity) => {
    console.log('PayPal payment cancelled', identity);
  },

  onError: (error) => {
    console.error('PayPal error', error);
  },
});

buttons.render();