Braintree

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

Constraint: All Braintree providers on the same page must use the same tokenizationKey. See Known Constraints — Braintree Shared Tokenization Key.

Braintree:PayPalExpress

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

Options — BraintreePayPalExpressOptions

Field	Type	Required	Default	Description
tokenizationKey	string	Yes	—	Braintree tokenization key from the Control Panel (e.g. sandbox_xxx_yyy)
intent	'capture' | 'authorize'	No	—	'capture' settles immediately; 'authorize' holds funds
currencyCode	string	No	—	ISO 4217 currency code
locale	string	No	—	BCP 47 locale (e.g. 'de_DE')
enableShippingAddress	boolean	No	—	Enable shipping address collection
shippingAddressEditable	boolean	No	—	Allow buyer to edit the shipping address
enableBillingAddress	boolean	No	—	Enable billing address collection

Braintree:PayLater

Renders a PayPal Pay Later button via the Braintree JS SDK. The fundingSource is automatically set to PAYLATER.

Options — BraintreePayLaterOptions

Identical fields to BraintreePayPalExpressOptions:

Field	Type	Required	Default	Description
tokenizationKey	string	Yes	—	Must match the tokenizationKey used by Braintree:PayPalExpress
intent	'capture' | 'authorize'	No	—	Payment intent
currencyCode	string	No	—	ISO 4217 currency code
locale	string	No	—	BCP 47 locale
enableShippingAddress	boolean	No	—	Enable shipping address collection
shippingAddressEditable	boolean	No	—	Allow buyer to edit the shipping address
enableBillingAddress	boolean	No	—	Enable billing address collection

Both providers share the same PayPalStyle options.

Example — PayPalExpress and PayLater Together

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

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

const TOKENIZATION_KEY = 'sandbox_g42y39zp_348jhnfdew59qi3c';

const buttons = ExpressButtons({
  providers: [
    {
      providerProtocolType: 'Braintree',
      paymentMethodType: 'PayPalExpress',
      container: '#braintree-paypal-container',
      style: {
        color: 'gold',
        shape: 'rect',
        height: 45,
      },
      options: {
        tokenizationKey: TOKENIZATION_KEY,
        intent: 'authorize',
        currencyCode: 'EUR',
        locale: 'de_DE',
        enableShippingAddress: true,
      },
    },
    {
      providerProtocolType: 'Braintree',
      paymentMethodType: 'PayLater',
      container: '#braintree-paylater-container',
      style: {
        color: 'white',
        shape: 'pill',
        height: 45,
      },
      options: {
        // Must be the same tokenizationKey
        tokenizationKey: TOKENIZATION_KEY,
        intent: 'authorize',
        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.braintreeOrderId } };
  },

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

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

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

buttons.render();