Braintree

Braintree provides two PayPal-based Express Button providers via the Braintree JS v3 SDK.

Braintree Shared Tokenization Key

All Braintree providers on the same page must use the same tokenizationKey. The Braintree client SDK is initialised once per page with the first tokenization key it sees — using different keys across providers causes an authentication error.

Braintree:PayPalExpress

Renders: the standard PayPal Express Checkout button via the Braintree JS SDK and PayPal Buttons API.

Options

Type: BraintreePayPalExpressOptions

Required

Field	Type	Description
tokenizationKey	string	Braintree tokenization key from the Control Panel (e.g. sandbox_xxx_yyy).
pspAutoCaptureEnabled	boolean	true → immediate capture; false → authorize only (maps to Braintree intent: 'capture' or 'authorize').
currencyCode	string	ISO 4217 currency code.

Optional

Field	Type	Description
locale	string	BCP 47 locale. Accepts collana pay format (de-DE) or Braintree/PayPal format (de_DE).

Braintree:PayLater

Renders: the PayPal Pay Later installment button via the Braintree JS SDK. The funding source is automatically set to PAYLATER.

Options

Type: BraintreePayLaterOptions — identical fields to BraintreePayPalExpressOptions:

Required

Field	Type	Description
tokenizationKey	string	Must match the tokenizationKey used by Braintree:PayPalExpress.
pspAutoCaptureEnabled	boolean	true → immediate capture; false → authorize only.
currencyCode	string	ISO 4217 currency code.

Optional

Field	Type	Description
locale	string	BCP 47 locale. Accepts collana pay format (de-DE) or Braintree/PayPal format (de_DE).

Style

Type: PayPalStyle — shared by both Braintree providers.

Style options are purely cosmetic and forwarded directly to paypal.Buttons({ style: ... }). See the full field reference in the PayPal provider docs — Style and the PayPal JS SDK — Buttons style object.

Field	Type	Description
color	'gold' | 'blue' | 'silver' | 'white' | 'black'	Button background color. Default: 'gold'.
shape	'rect' | 'pill' | 'sharp'	Button border shape. Default: 'rect'.
height	number	Button height in pixels (25–55).
borderRadius	number	Border radius in pixels (0–28). Only applies to shape: 'rect'.
label	'paypal' | 'checkout' | 'buynow' | 'pay' | 'installment' | 'subscribe' | 'donate'	Text displayed on the button. Default: 'paypal'.

Example — PayPalExpress and PayLater Together

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

const TOKENIZATION_KEY = 'sandbox_g42y39zp_348jhnfdew59qi3c';

const buttons = CollanaPay.ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Braintree',
      paymentMethodType: 'PayPalExpress',
      container: '#braintree-paypal-container',
      style: {
        color: 'gold',
        shape: 'rect',
        height: 45,
      },
      options: {
        tokenizationKey: TOKENIZATION_KEY,
        pspAutoCaptureEnabled: false,   // authorize only
        currencyCode: 'EUR',
        locale: 'de_DE',
      },
    },
    {
      providerProtocolType: 'Braintree',
      paymentMethodType: 'PayLater',
      container: '#braintree-paylater-container',
      style: {
        color: 'white',
        shape: 'pill',
        height: 45,
      },
      options: {
        // Must be the same tokenizationKey
        tokenizationKey: TOKENIZATION_KEY,
        pspAutoCaptureEnabled: false,   // must match the value set on PayPalExpress
        currencyCode: 'EUR',
      },
    },
  ],

  onClick: async (identity, options) => {
    const res = await fetch('/api/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ provider: identity, options }),
    });
    const transaction = await res.json();
    // Return the checkoutData from your backend (collana pay API response).
    return transaction.checkoutData;
  },

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

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

buttons.render();