Checkout with PayPal is a one-time payment checkout experience that gives you more control throughout the entire checkout process. It offers a streamlined checkout flow that keeps customers local to your website throughout the payment authorization process.

Unlike the Vault flow, Checkout with PayPal does not provide the ability to store a customer’s PayPal account in the Vault. However, if you are located in a country that supports PayPal One Touch™, your customer can make repeat purchases without re-entering their user credentials after their initial purchase.

Checkout with PayPal supports the following features:

  • Select or add shipping addresses in the PayPal account
  • Select or add funding instruments in the PayPal account
  • PayPal One Touch™ for Web
  • Two factor authentication support (currently only for US, UK, CA, DE, AT, and AU)

Typical use cases for the Checkout With PayPal flow:

  • Checkout from Cart/Product pages
  • Checkout page replacement
  • As a payment source

Invoking the Checkout with PayPal flow

Create a PayPal button

First, create a PayPal button in your HTML. You can use your own button or generate a PayPal button using the following code:

Bind the click event

To request a one-time payment, set flow to 'checkout'. You must also include amount and currency options.

JavaScript
// Fetch the button you are using to initiate the PayPal flow
var paypalButton = document.getElementById('id-for-your-paypal-button');

// Create a Client component
braintree.client.create({
  authorization: 'TOKEN'
}, function (clientErr, clientInstance) {
  // Create PayPal component
  braintree.paypal.create({
    client: clientInstance
  }, function (err, paypalInstance) {
    paypalButton.addEventListener('click', function () {
      // Tokenize here!
      paypalInstance.tokenize({
        flow: 'checkout', // Required
        amount: 10.00, // Required
        currency: 'USD', // Required
        locale: 'en_US',
        enableShippingAddress: true,
        shippingAddressEditable: false,
        shippingAddressOverride: {
          recipientName: 'Scruff McGruff',
          line1: '1234 Main St.',
          line2: 'Unit 1',
          city: 'Chicago',
          countryCode: 'US',
          postalCode: '60652',
          state: 'IL',
          phone: '123.456.7890'
        }
      }, function (err, tokenizationPayload) {
        // Tokenization complete
        // Send tokenizationPayload.nonce to server
      });
    });
  });
});

See our JavaScript PayPal client reference for more information on the options available in the Checkout with PayPal flow.

Country support

PayPal is available to merchants in all countries that Braintree supports and to customers in 140+ countries. Ensure you are using a desired locale code as outlined in our JavaScript PayPal client reference.

Currency presentment

The currency of the transaction is presented to the customer in the Checkout with PayPal flow. We support all currencies that PayPal REST APIs support.

See the server-side section for details on charging a transaction in a specific currency.

Next: Server-side →

Still have questions?

If you can’t find an answer, contact our Support team.