PayPal/Checkout with PayPal

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 in conjunction with the PayPal JS SDK. The examples here require version 3.63.0 or higher of the Braintree JavaScript SDK.

If you are using the Braintree JavaScript SDK with the deprecated PayPal checkout.js library, review this migration guide to upgrade your integration.

To request a one-time payment, set flow to 'checkout' and include amount and currency options in your createPayment call. The value of currency must match the value passed into loadPayPalSDK.

If intent is used, the value must match in both loadPayPalSDK and createPayment.

Use a createOrder function to create the payment resource:

// Create a client.
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, 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) {
    paypalCheckoutInstance.loadPayPalSDK({
      currency: 'USD',
      intent: 'capture'
    }, function () {
      paypal.Buttons({
        fundingSource: paypal.FUNDING.PAYPAL,

        createOrder: function () {
          return paypalCheckoutInstance.createPayment({
            flow: 'checkout', // Required
            amount: 10.00, // Required
            currency: 'USD', // Required, must match the currency passed in with loadPayPalSDK

            intent: 'capture', // Must match the intent passed in with loadPayPalSDK

            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'
            }
          });
        },

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

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

        onError: function (err) {
          console.error('PayPal error', err);
        }
      }).render('#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.

Checkout with Vault

The Checkout with Vault flow is also a one-time payment checkout experience, but with vaulting capability. It automatically creates a PayPal Billing Agreement and stores a customer's PayPal account in the Braintree Vault, allowing you to charge the account in the future without requiring your customer to re-authenticate with PayPal.

All enrolled merchants can invoke this flow with some additional options in your createPayment call. For full info on createPayment and how to invoke the Checkout with PayPal flow, see the integration guide.

Additional options to include:

• requestBillingAgreement - set to true
• billingAgreementDetails.description - description of the billing agreement to display to the customer

paypal.Buttons({
  fundingSource: paypal.FUNDING.PAYPAL,

  createOrder: function () {
    return paypalCheckoutInstance.createPayment({
      flow: 'checkout',
      amount: 10.00,
      currency: 'USD',

      // new required parameters for this flow
      requestBillingAgreement: true,
      billingAgreementDetails: {
        description: 'Description of the billng agreement to display to the customer'
      }
    });
  },
}).render('#paypal-button');

When creating a Transaction.sale using a nonce from the Checkout with Vault flow, the result will contain a PayPal details object with an implicitlyVaultedPaymentMethodToken property. You can then associate this payment method token with your customer for future transactions.

Country support

PayPal is available to merchants in all countries that we support 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 Page: Server-side →