PayPalCheckoutV6

Example

var session = paypalCheckoutV6Instance.createBillingAgreementSession({
  billingAgreementDescription: 'Monthly subscription for premium service',
  planType: 'SUBSCRIPTION',
  planMetadata: {
    currencyIsoCode: 'USD',
    name: 'Premium Subscription',
    productDescription: 'Monthly premium access',
    billingCycles: [{
      billingFrequency: 1,
      billingFrequencyUnit: 'MONTH',
      numberOfExecutions: 0,
      sequence: 1,
      startDate: '2025-12-01T00:00:00Z',
      trial: false,
      pricingScheme: {
        pricingModel: 'FIXED',
        price: '9.99'
      }
    }]
  },
  onApprove: function (data) {
    console.log('Billing agreement approved:', data);
  },
  onCancel: function () {
    console.log('Billing agreement canceled');
  },
  onError: function (err) {
    console.error('Billing agreement error:', err);
  }
});

// Trigger the vault flow when user clicks a button
document.getElementById('paypal-button').addEventListener('click', function () {
  session.start();
});

Examples

// Standard PayPal payment
var session = paypalCheckoutV6Instance.createOneTimePaymentSession({
  amount: '10.00',
  currency: 'USD',
  intent: 'capture',
  onApprove: function (data) {
    return paypalCheckoutV6Instance.tokenizePayment(data).then(function (payload) {
      // Send payload.nonce to your server
    });
  },
  onCancel: function () {
    console.log('Payment canceled');
  },
  onError: function (err) {
    console.error('Payment error:', err);
  }
});

// PayPal payment with direct app switch
async function initializePayPal() {
  try {
    // Create client and PayPal Checkout v6 instances
    const clientInstance = await braintree.client.create({
      authorization: 'your_client_token'
    });

    const paypalCheckoutV6Instance = await braintree.paypalCheckoutV6.create({
      client: clientInstance
    });

    // Load the PayPal SDK
    await paypalCheckoutV6Instance.loadPayPalSDK();

    // Create a one-time payment session
    const session = paypalCheckoutV6Instance.createOneTimePaymentSession({
      amount: '10.00',
      currency: 'USD',
      intent: 'capture',
      // When using app switch, returnUrl and cancelUrl must be specified
      // These should be URLs in your application that can handle the return flow
      returnUrl: 'https://example.com/return',
      cancelUrl: 'https://example.com/cancel',
      onApprove: function (data) {
        return paypalCheckoutV6Instance.tokenizePayment(data).then(function (payload) {
          // Send payload.nonce to your server
          console.log('Payment approved, nonce:', payload.nonce);
        });
      },
      onCancel: function () {
        console.log('Payment canceled');
      },
      onError: function (err) {
        console.error('Payment error:', err);
      }
    });

    // First, check if returning from app switch using the hasReturned() method
    // This should be done when your page loads, before showing any UI
    if (session.hasReturned()) {
      // Resume the payment session to complete the flow
      await session.resume();
    } else {
      // Initial flow - set up button click handler
      document.getElementById('paypal-button').addEventListener('click', async () => {
        try {
          // Start the payment with app switch configuration
          const { redirectURL } = await session.start({
            // Use direct-app-switch mode to enable app switch flow
            presentationMode: 'direct-app-switch',
            autoRedirect: {
              enabled: true
            }
          });

          // If autoRedirect is disabled or fails, manually redirect
          if (redirectURL) {
            window.location.assign(redirectURL);
          }
        } catch (error) {
          console.error('Error starting payment:', error);
        }
      });
    }
  } catch (error) {
    console.error('Initialization error:', error);
  }
}

// Initialize on page load
initializePayPal();

// PayPal Credit payment
var session = paypalCheckoutV6Instance.createOneTimePaymentSession({
  amount: '10.00',
  currency: 'USD',
  offerCredit: true, // Offer PayPal Credit
  onApprove: function (data) {
    return paypalCheckoutV6Instance.tokenizePayment(data).then(function (payload) {
      // payload will include creditFinancingOffered if customer used PayPal Credit
      // Send payload.nonce to your server
    });
  }
});

// Dynamic shipping price calculation with onShippingAddressChange
var session = paypalCheckoutV6Instance.createOneTimePaymentSession({
  amount: '10.00',
  currency: 'USD',
  lineItems: [
    {
      quantity: '1',
      unitAmount: '10.00',
      name: 'Product Name',
      kind: 'debit'
    }
  ],
  shippingOptions: [
    {
      id: 'economy',
      label: 'Economy Shipping (5-7 days)',
      selected: true,
      type: 'SHIPPING',
      amount: {
        currency: 'USD',
        value: '0.00'
      }
    },
    {
      id: 'express',
      label: 'Express Shipping (2-3 days)',
      selected: false,
      type: 'SHIPPING',
      amount: {
        currency: 'USD',
        value: '5.00'
      }
    }
  ],
  amountBreakdown: {
    itemTotal: '10.00',
    shipping: '0.00'
  },
  onShippingAddressChange: function (data, actions) {
    // Calculate shipping cost based on selected option and shipping address
    var newShippingCost = '0.00';
    var newTotal = '10.00';

    // Example: determine shipping cost based on selected option
    if (data.selectedShippingOption) {
      if (data.selectedShippingOption.id === 'express') {
        newShippingCost = '5.00';
        newTotal = '15.00';
      }
    }

    // Example: determine shipping cost based on country
    if (data.shippingAddress && data.shippingAddress.countryCode) {
      if (data.shippingAddress.countryCode === 'CA') {
        newShippingCost = '7.50';
        newTotal = '17.50';
      }
    }

    // Update the payment with new amount and breakdown
    return paypalCheckoutV6Instance.updatePayment({
      paymentId: data.orderId,
      amount: newTotal,
      currency: 'USD',
      shippingOptions: [
        {
          id: 'economy',
          label: 'Economy Shipping (5-7 days)',
          selected: data.selectedShippingOption && data.selectedShippingOption.id === 'economy',
          type: 'SHIPPING',
          amount: {
            currency: 'USD',
            value: '0.00'
          }
        },
        {
          id: 'express',
          label: 'Express Shipping (2-3 days)',
          selected: data.selectedShippingOption && data.selectedShippingOption.id === 'express',
          type: 'SHIPPING',
          amount: {
            currency: 'USD',
            value: '5.00'
          }
        }
      ],
      amountBreakdown: {
        itemTotal: '10.00',
        shipping: newShippingCost
      }
    });
  },
  onApprove: function (data) {
    return paypalCheckoutV6Instance.tokenizePayment(data);
  }
});

// Later, trigger the payment flow
button.addEventListener('click', function () {
  session.start();
});

Examples

// Basic checkout flow
paypalCheckoutV6Instance.createPayment({
  flow: 'checkout',
  amount: '10.00',
  currency: 'USD',
  intent: 'capture'
}).then(function(orderId) {
  console.log('Order ID:', orderId);
});

// Basic vault flow
paypalCheckoutV6Instance.createPayment({
  flow: 'vault'
}).then(function(billingToken) {
  console.log('BA Token:', billingToken);
});

use the new plan features

// Plan and plan metadata are passed to createPayment
paypalCheckoutV6Instance.createPayment({
  flow: 'vault',
  planType: 'RECURRING',
  planMetadata: {
    billingCycles: [
      {
         billingFrequency: "1",
         billingFrequencyUnit: "MONTH",
         numberOfExecutions: "1",
         sequence: "1",
         startDate: "2024-04-06T00:00:00Z",
         trial: true,
         pricingScheme: {
           pricingModel: "FIXED",
       },
     },
     ],
    currencyIsoCode: "USD",
    name: "Netflix with Ads",
    productDescription: "iPhone 13",
    productQuantity: "1.0",
    oneTimeFeeAmount: "10",
    shippingAmount: "3.0",
    productPrice: "200",
    taxAmount: "20",
 };
});

Vault Flow with Purchase (Billing Agreement with Recurring Payment)

paypalCheckoutV6Instance.createPayment({
  flow: 'vault',
  amount: '12.50',
  currency: 'USD',
  planType: 'SUBSCRIPTION',
  planMetadata: {
    billingCycles: [{
      billingFrequency: 1,
      billingFrequencyUnit: "MONTH",
      sequence: 1,
      pricingScheme: {
        pricingModel: "FIXED",
        price: "10.00"
      },
    }],
    currencyIsoCode: "USD",
    totalAmount: "10.00",
    name: "My Recurring Product"
  }
});

Examples

// Check eligibility before rendering buttons
paypalCheckoutV6Instance.findEligibleMethods({
  amount: '10.00',
  currency: 'USD'
}).then(function (eligibility) {
  if (eligibility.paylater) {
    // Show Pay Later button
    document.getElementById('paylater-button').style.display = 'block';
  }
  if (eligibility.credit) {
    // Show PayPal Credit button
    document.getElementById('credit-button').style.display = 'block';
  }
  if (eligibility.paypal) {
    // Show standard PayPal button
    document.getElementById('paypal-button').style.display = 'block';
  }
}).catch(function (err) {
  console.error('Eligibility check failed:', err);
});

// Conditionally offer Pay Later messaging
paypalCheckoutV6Instance.findEligibleMethods({
  amount: '150.00',
  currency: 'USD'
}).then(function (eligibility) {
  if (eligibility.paylater) {
    // Show "Pay in 4" promotional messaging
    showPayLaterPromo();
  }
});

Example

paypalCheckoutV6Instance.getClientId().then(function (clientId) {
  console.log('Client ID:', clientId);
});

Examples

paypalCheckoutV6Instance.loadPayPalSDK().then(function () {
  // PayPal V6 SDK is now loaded
});

var options = {
  env: 'stage'
};
paypalCheckoutV6Instance.loadPayPalSDK(options).then(function () {
  // PayPal V6 SDK is now loaded from the stage environment
});

Example

paypalCheckoutV6Instance.teardown();

Examples

// One-time payment tokenization
paypalCheckoutV6Instance.tokenizePayment({
  payerID: data.payerID,
  orderID: data.orderID
}).then(function (payload) {
  console.log('Payment method nonce:', payload.nonce);
});

Vault flow tokenization

paypalCheckoutV6Instance.tokenizePayment({
  billingToken: data.billingToken
}).then(function (payload) {
  console.log('Vaulted payment method nonce:', payload.nonce);
});

Opt out of auto-vaulting behavior

paypalCheckoutV6Instance.tokenizePayment({
  billingToken: data.billingToken,
  vault: false
}).then(function (payload) {
  console.log('Payment method nonce (not vaulted):', payload.nonce);
});

Examples

// Promise-based approach - often used in onShippingAddressChange
paypal.Buttons({
  // ... other configuration ...
  onShippingAddressChange: function (data) {
    return paypalCheckoutV6Instance.updatePayment({
      paymentId: data.orderId,
      amount: '15.00',  // Updated total amount
      currency: 'USD',
      lineItems: [
        {
          quantity: '1',
          unitAmount: '10.00',
          name: 'Product Name',
          kind: 'debit'
        }
      ],
      shippingOptions: [
        {
          id: 'shipping-speed-fast',
          type: 'SHIPPING',
          label: 'Fast Shipping',
          selected: true,
          amount: {
            value: '5.00',
            currency: 'USD'
          }
        }
      ],
      amountBreakdown: {
        itemTotal: '10.00',
        shipping: '5.00',
        handling: '0.00',
        taxTotal: '0.00',
        insurance: '0.00',
        shippingDiscount: '0.00',
        discount: '0.00'
      }
    }).then(function(response) {
      console.log('Server response:', response);
    }).catch(function(err) {
      console.error('Update failed:', err);
    });
  }
});

// Callback-based approach
paypalCheckoutV6Instance.updatePayment({
  paymentId: orderId,
  amount: '15.00',
  currency: 'USD',
  lineItems: [{ ... }],
  shippingOptions: [{ ... }],
  amountBreakdown: { ... }
}, function (err, response) {
  if (err) {
    console.error('Update failed:', err);
    return;
  }
  console.log('Payment updated successfully:', response);
});