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

note

The examples on this page now use the PayPal Checkout component released in version 3.7.0 of the Braintree JavaScript SDK. Documentation and examples for the deprecated PayPal component are available in the JavaScript reference.

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

JavaScript
// Be sure to have PayPal's checkout.js library loaded on your page.
// <script src="https://www.paypalobjects.com/api/checkout.js" data-version-4></script>

// Create a client.
braintree.client.create({
  authorization: 'CLIENT_TOKEN_FROM_SERVER'
}, function (clientErr, clientInstance) {

  // Stop if there was a problem creating the client.
  // This could happen if there is a network error or if the authorization
  // is invalid.
  if (clientErr) {
    console.error('Error creating client:', clientErr);
    return;
  }

  // Create a PayPal Checkout component.
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (paypalCheckoutErr, paypalCheckoutInstance) {

    // Stop if there was a problem creating PayPal Checkout.
    // This could happen if there was a network error or if it's incorrectly
    // configured.
    if (paypalCheckoutErr) {
      console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
      return;
    }

    // Set up PayPal with the checkout.js library
    paypal.Button.render({
      env: 'production', // or 'sandbox'

      payment: function () {
        return paypalCheckoutInstance.createPayment({
          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'
          }
        });
      },

      onAuthorize: function (data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data)
          .then(function (payload) {
            // Submit `payload.nonce` to your server
          });
      },

      onCancel: function (data) {
        console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
      },

      onError: function (err) {
        console.error('checkout.js error', err);
      }
    }, '#paypal-button').then(function () {
      // The PayPal button will be rendered in an html element with the id
      // `paypal-button`. This function will be called when the PayPal button
      // is set up and ready to be used.
    });

  });

});

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.

PayPal Credit

US and UK merchants can add PayPal Credit to a Checkout flow integration with a few additional lines of code. For full info on the availability and benefits of offering PayPal Credit, see the support article. For integration details, see the developer guide.

Next: Server-side →

Still have questions?

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