PayPal

Suggest Edits

PayPal

PayPal allows your customers with one click, to get directly from the product page or the shopping cart to the PayPal payment page without any detours. PayPal remembers their financial and shipping details, so customers don’t have to re-enter them on your site.

PayPal Pay in 4

PayPal Pay Later offers for Australian customers include PayPal Pay in 4 , which is a short-term instalment product that provides eligible PayPal customers the option to split purchases into 4 interest-free payments for transactions between $30 AUD - $1,500 AUD. The first payment is due at the time of the transaction with subsequent payments due every two weeks. [1]

The Wpay implementation of PayPal Pay in 4 uses the PayPal Checkout method which utilizes the Braintree SDK. Checkout with PayPal is a one-time payment checkout experience that gives you more control over the entire checkout process. It offers a streamlined checkout flow that keeps customers local to your website during the payment authorization process. Unlike the PayPal Vault method, Checkout with PayPal does not provide the ability to store a customer’s PayPal account in the Vault. [5]

🚧

Minimum Braintree SDK version

Braintree SDK JavaScript v3 3.69.0 or higher is required on the client side.

Supported Integration Patterns

Below are the current PayPal integration methods further detail about each integration method can be found on the Braintree Website.

Payment Integration MethodWpay SupportPayment TypesSave for Future Use
Vault FlowYesPayPalYes
Checkout FlowYesPayPal
PayPal Pay in 4		No
Checkout Flow with Vault FlowNot currentlyPayPal
PayPal Pay in 4		Yes

❗️

Number of Integration Methods

Please note you can only use one integration method at a time and they can't be used simultaneously. Therefore, its important to consider which integration method best supports your current and future use cases for PayPal.

PayPal Account Setup

As a Merchant you will first need to setup your PayPal Developer Account which can be used for both Sandbox testing and Production. Follow the PayPal instructions to ensure you sign up with the correct account type as either Personal or Business.

📘

PayPal Account Sign Up

Sign Up: Create a PayPal Account - PayPal Australia

Note: If you setup the PayPal Developer Account as a Business type there are a few things to consider:

  • Who will be the Primary Account User this individual is essentially the owner of the account.
  • Roles and Permissions you may want to have for different groups of users in your business who require access to the account to perform their role.

Braintree Account Setup

As a Merchant you will also need to setup your Braintree Developer Account which can be used for both Sandbox testing and Production. In order, to link your PayPal and Braintree Accounts together you should follow these instructions from Braintree. As part of the setup process you will need to enter the following details:

  • Sandbox Account Email
  • Client ID
  • Secret

This information can be found in the My Apps & Credentials menu item inside your PayPal Developer Account.

PayPal Client Token

Obtaining the current PayPal client token may be retrieved from your Merchant Profile. The PayPal client token is located under the payPal.clientToken path.

🚧

Client Token Validity

The client token is only valid for 24 hours before it expires and new one is required to be generated.

PayPal Buttons Integration Tool

Once the PayPal and Braintree Sandboxes have been linked together and PayPal enabled as a Payment Processing Option in the Braintree control panel it is possible to test the integration using the PayPal Buttons Integration Tool. This will allow you to test your integration is setup correctly by observing if the PayPal Buttons render in the tool in the sandbox environment. A prerequisite to the PayPal buttons appearing is a Client Token must be generated and inserted into the code as shown in the extract below.

<!-- Load the Braintree components -->
    <script src="https://js.braintreegateway.com/web/3.85.2/js/client.min.js"></script>
    <script src="https://js.braintreegateway.com/web/3.85.2/js/paypal-checkout.min.js"></script>
    <script>
      // Client Token
      var ClientToken =
        "eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiJleUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpGVXpJMU5pSXNJbXRwWkNJNklqSXdNVGd3TkRJMk1UWXRjMkZ1WkdKdmVDSXNJbWx6Y3lJNkltaDBkSEJ6T2k4dllYQnBMbk5oYm1SaWIzZ3VZbkpoYVc1MGNtVmxaMkYwWlhkaGVTNWpiMjBpZlEuZXlKbGVIQWlPakUyTkRRMk16YzRPVFFzSW1wMGFTSTZJbVprTmpjMU1EQmpMVGt5WWpRdE5EVTNOUzA1WmpCakxUVmtaV1JqWmpRMk9UUXdaU0lzSW5OMVlpSTZJbVIyWmpWaWEyZHhjRFZvZHpWMk9ESWlMQ0pwYzNNaU9pSm9kSFJ3Y3pvdkwyRndhUzV6WVc1a1ltOTRMbUp5WVdsdWRISmxaV2RoZEdWM1lYa3VZMjl0SWl3aWJXVnlZMmhoYm5RaU9uc2ljSFZpYkdsalgybGtJam9pWkhabU5XSnJaM0Z3TldoM05YWTRNaUlzSW5abGNtbG1lVjlqWVhKa1gySjVYMlJsWm1GMWJIUWlPbVpoYkhObGZTd2ljbWxuYUhSeklqcGJJbTFoYm1GblpWOTJZWFZzZENKZExDSnpZMjl3WlNJNld5SkNjbUZwYm5SeVpXVTZWbUYxYkhRaVhTd2liM0IwYVc5dWN5STZlMzE5LmtKLWZ5cFltZU1fYV8tTzRMUVE0Uk4tbWFNdXFXOFp6bTJBSlJOX29USGRlR3ZOajdRS0RxZEFPaVZIYl9RVlVuaTlvYVYyTDRQMlhfeThRUWxJRG53IiwiY29uZmlnVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzL2R2ZjVia2dxcDVodzV2ODIvY2xpZW50X2FwaS92MS9jb25maWd1cmF0aW9uIiwiZ3JhcGhRTCI6eyJ1cmwiOiJodHRwczovL3BheW1lbnRzLnNhbmRib3guYnJhaW50cmVlLWFwaS5jb20vZ3JhcGhxbCIsImRhdGUiOiIyMDE4LTA1LTA4IiwiZmVhdHVyZXMiOlsidG9rZW5pemVfY3JlZGl0X2NhcmRzIl19LCJjbGllbnRBcGlVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvZHZmNWJrZ3FwNWh3NXY4Mi9jbGllbnRfYXBpIiwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwibWVyY2hhbnRJZCI6ImR2ZjVia2dxcDVodzV2ODIiLCJhc3NldHNVcmwiOiJodHRwczovL2Fzc2V0cy5icmFpbnRyZWVnYXRld2F5LmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgudmVubW8uc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbSIsInZlbm1vIjoib2ZmIiwiY2hhbGxlbmdlcyI6W10sInRocmVlRFNlY3VyZUVuYWJsZWQiOnRydWUsImFuYWx5dGljcyI6eyJ1cmwiOiJodHRwczovL29yaWdpbi1hbmFseXRpY3Mtc2FuZC5zYW5kYm94LmJyYWludHJlZS1hcGkuY29tL2R2ZjVia2dxcDVodzV2ODIifSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImJpbGxpbmdBZ3JlZW1lbnRzRW5hYmxlZCI6dHJ1ZSwiZW52aXJvbm1lbnROb05ldHdvcmsiOmZhbHNlLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYWxsb3dIdHRwIjp0cnVlLCJkaXNwbGF5TmFtZSI6IldwYXkgUHR5IExpbWl0ZWQiLCJjbGllbnRJZCI6IkFYYndtSHdKQlRUMlVMNmkzZjlBTS1Va1h3eWxTbF9qMi1RTDFORnN5dmtXazdtU3FnTF9YOUVnVWxjdFFMU3FBYmJXbFZGVWpJeWlYSDRVIiwicHJpdmFjeVVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS9wcCIsInVzZXJBZ3JlZW1lbnRVcmwiOiJodHRwOi8vZXhhbXBsZS5jb20vdG9zIiwiYmFzZVVybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXNzZXRzVXJsIjoiaHR0cHM6Ly9jaGVja291dC5wYXlwYWwuY29tIiwiZGlyZWN0QmFzZVVybCI6bnVsbCwiZW52aXJvbm1lbnQiOiJvZmZsaW5lIiwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwibWVyY2hhbnRBY2NvdW50SWQiOiJ3cGF5cHR5bGltaXRlZCIsImN1cnJlbmN5SXNvQ29kZSI6IkFVRCJ9fQ==";

PayPal Buttons

The PayPal Checkout method allows you to render either the single PayPal or also a Pay in 4 button depending on your preference as documented here by PayPal. For more detailed information regarding styling of PayPal buttons please refer to this guide on the PayPal Developer Portal.

The Pay in 4 button provides direct access to Pay Later offers in PayPal Checkout. Specify the fundingSource: paypal.FUNDING.PAYLATER option when rendering the Pay Later button, and additionally pass enable-funding: paylater as a query param in the PayPal SDK. Passing dataAttributes.amount when calling loadPayPalSDK is required for the Pay in 4 button to render. [2] It’s also possible to render multiple standalone payment buttons for supported payment method. [3]

paypalCheckoutInstance.loadPayPalSDK({
  components: 'buttons,messages'
  currency: 'AUD',
  'enable-funding': 'paylater',
  dataAttributes: {
    amount: '10.00'
  }
  // Other config options here
}).then(function () {
  var button = paypal.Buttons({
    fundingSource: paypal.FUNDING.PAYLATER,

    createOrder: function () {
      return paypalCheckoutInstance.createPayment({
        flow: 'checkout', // Required
        amount: '10.00', // Required
        currency: 'AUD' // Required
      });
    },
    onApprove: function (data, actions) {
      return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
        // Submit `payload.nonce` to your server
      });
    },
  });
  if (!button.isEligible()) {
    // Skip rendering if not eligible
    return;
  }

  button.render('#pay-later-button');
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Add meta tags for mobile and IE -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>PayPal Checkout Integration | Client Demo</title>
  </head>

  <body>
    <!-- Set up dynamic message element -->
    <div
      data-pp-message
      data-pp-layout="text"
      data-pp-text-color="black"
      data-pp-logo-type="inline"
      data-pp-amount="50"
    ></div>
    <!-- Set up container element for the button -->    
    <div id="paypal-button-container"></div>

    <!-- Load the PayPal JS SDK with your PayPal Client ID-->
    <script src="https://www.paypal.com/sdk/js?client-id=DEMO_CLIENT_ID"></script>

    <!-- Load the Braintree components -->
    <script src="https://js.braintreegateway.com/web/3.85.2/js/client.min.js"></script>
    <script src="https://js.braintreegateway.com/web/3.85.2/js/paypal-checkout.min.js"></script>
    <script>
      // Client Token
      var ClientToken = "DEMO_XXX"
      
      var FUNDING_SOURCES = [
        paypal.FUNDING.PAYPAL,
        paypal.FUNDING.PAYLATER,
        paypal.FUNDING.CARD,
      ];
      // Create a client.
      braintree.client
        .create({
          authorization: ClientToken,
        })
        .then(function (clientInstance) {
          // Create a PayPal Checkout component.
          return braintree.paypalCheckout.create({
            client: clientInstance,
          });
        })
        .then(function (paypalCheckoutInstance) {
          // Load the PayPal JS SDK (see Load the PayPal JS SDK section)
          paypalCheckoutInstance
            .loadPayPalSDK({
              components: "buttons,messages,funding-eligibility",
              currency: "AUD",
              "enable-funding": "paylater",
              dataAttributes: {
                amount: "50.00",
              },
              // Other config options here
            })
            .then(function () {
              // or use paypal.getFundingSources()
              FUNDING_SOURCES.forEach(function (fundingSource) {
                var button = paypal.Buttons({
                  fundingSource: fundingSource,
                  createOrder: function () {
                    return paypalCheckoutInstance.createPayment({
                      flow: "checkout", // Required
                      amount: "50.00", // Required
                      currency: "AUD", // Required
                    });
                  },
                  onApprove: function (data, actions) {
                    return paypalCheckoutInstance
                      .tokenizePayment(data)
                      .then(function (payload) {
                        // Submit `payload.nonce` to your server
                        console.log(payload.nonce)
                      });
                  },
                  style: {
                    layout: "vertical",
                    shape: "rect",
                  },
                });

                if (!button.isEligible()) {
                  // Skip rendering if not eligible
                  return;
                }
                button.render("#paypal-button-container");
              });
            });
        })
        .catch(function (err) {
          // Handle component creation error
        });
    </script>
  </body>
</html>

Pay in 4 Messaging

PayPal provides a dynamic messaging to let customers know they can buy now and pay later. With dynamic messaging, PayPal will show them the right order for what they’re buying. You must show the Pay Later button if you present Pay Later messaging.

780

Qualifying amount message example [1]

980

Non-qualifying amount or no amount message example [1]

To present this messaging, you must include the PayPal messaging component in JavaScript while loading PayPal SDK, and also include a div on the HTML page where you want to render a message. [2] 

paypalCheckoutInstance.loadPayPalSDK({
  components: 'buttons,messages'
  // Other config options here
}, function () {
  // set up PayPal buttons (see next section)
});

<!--
  In your code, dynamically update data-pp-amount with
  the price or cart amount. For example,
  data-pp-amount="89.99" for $89.99 product
-->
<div
  data-pp-message
  data-pp-layout="text"
  data-pp-text-color="black"
  data-pp-logo-type="inline"
  data-pp-amount="ENTER_VALUE_HERE">
</div>

For more detailed information about the presentment of PayPal Pay in 4 messaging please refer to the documentation on the PayPal Developer Portal here.

Tokenizing PayPal

To tokenize a PayPal instrument using the Wpay Platform please follow Tokenizing a Payment Instrument.

Making a PayPal Payment

To make a PayPal payment using the Wpay Platform please follow Making a Payment.

Using PayPal Seller Protection

To use PayPal Seller Protection when making a payment please follow PayPal Seller Protection.

References

  1. Pay Later Offers (AU)

  2. Pay Later Offers

  3. Standalone Payment Buttons

  4. Braintree PayPal Guide

  5. Checkout Method

Updated almost 2 years ago