PayPal

PayPal Creditanchor

important

This guide has been deprecated. Please use the pay later offers guide instead.

PayPal Credit is an instant, reusable credit line your customers can use at checkout. It appears as an additional button in your checkout form and offers all available financing options to customers automatically through a PayPal UI – including Easy Payments in the US and Instalments in the UK, if those have been enabled for your PayPal account.

Before you get startedanchor

  1. See our PayPal Credit support article for full details on the availability and benefits of this feature
  2. Complete your PayPal client-side integration
  • Minimum JavaScript SDK version required: 3.14.0
note

The examples here require version 3.90.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.

Integrationanchor

Offering PayPal Credit is similar to offering regular PayPal payments.

  1. Set the fundingSource parameter to paypal.FUNDING.CREDIT
  2. Tokenize using PayPal Credit
    • In your paypalCheckoutInstance, specify your flow ('vault' or 'checkout') and offerCredit: true
  3. Submit the resulting payment method nonce to your server to create a transaction
  1. Callback
  2. Promise
braintree.client.create({
      authorization: CLIENT_AUTHORIZATION
    }, function (err, clientInstance) {
      braintree.paypalCheckout.create({
        client: clientInstance
      }, function (err, paypalCheckoutInstance) {

        paypalCheckoutInstance.loadPayPalSDK({
          vault: true
          // Other config options here
        }, function () {
          // Set up regular PayPal button, then

          // Set up PayPal Credit button
          paypal.Buttons({
            // Renders the button using the PayPal Credit UI
            fundingSource: paypal.FUNDING.CREDIT,

            // Or createOrder if using Checkout flow
            createBillingAgreement: function () {
              return paypalCheckoutInstance.createPayment({
                flow: 'vault',
                offerCredit: true,
                // Pass additional options as required
              });
            },
            onApprove: function (data) {
              return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
                // Submit 'payload.nonce' to your server
              });
            },
          }).render('#paypal-credit-button');
        });
      });
    });

Examplesanchor

PayPal and PayPal Credit with the Vault flowanchor

Here is an example of a Vault flow integration with both PayPal and PayPal Credit buttons:

  1. HTML
<div id="paypal-button"></div>
<div id="paypal-credit-button"></div>

<!-- Load the Braintree components -->
<script src="https://js.braintreegateway.com/web/3.111.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.0/js/paypal-checkout.min.js"></script>
  1. Callback
  2. Promise
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (err, clientInstance) {
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (err, paypalCheckoutInstance) {
    paypalCheckoutInstance.loadPayPalSDK({
      vault: true
    }, function () {
      // Set up regular PayPal button
      paypal.Buttons({
        fundingSource: paypal.FUNDING.PAYPAL,

        createBillingAgreement: function () {
          return paypalCheckoutInstance.createPayment({
            flow: 'vault',
            billingAgreementDescription: 'Your agreement description',
            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
          });
        },
      }).render('#paypal-button');

      // Set up PayPal Credit button
      paypal.Buttons({
        fundingSource: paypal.FUNDING.CREDIT,

        createBillingAgreement: function () {
          return paypalCheckoutInstance.createPayment({
            flow: 'vault',
            billingAgreementDescription: 'Your agreement description',
            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
          });
        },
      }).render('#paypal-credit-button');
    });
  });
});

PayPal and PayPal Credit with the Checkout flowanchor

Here is an example of a Checkout flow integration with both PayPal and PayPal Credit buttons:

  1. HTML
<div id="paypal-button"></div>
<div id="paypal-credit-button"></div>

<!-- Load the Braintree components -->
<script src="https://js.braintreegateway.com/web/3.111.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.0/js/paypal-checkout.min.js"></script>
  1. Callback
  2. Promise
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (err, clientInstance) {
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (err, paypalCheckoutInstance) {
    paypalCheckoutInstance.loadPayPalSDK({
      currency: 'USD'
    }, function () {
      // Set up regular PayPal button
      paypal.Buttons({
        fundingSource: paypal.FUNDING.PAYPAL,

        createOrder: function () {
          return paypalCheckoutInstance.createPayment({
            flow: 'checkout', // Required
            amount: 10.00, // Required
            currency: 'USD' // Required
          });
        },
        onApprove: function (data, actions) {
          return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
            // Submit 'payload.nonce' to your server
          });
        },
      }).render('#paypal-button');

      // Set up PayPal credit button
      paypal.Buttons({
        fundingSource: paypal.FUNDING.CREDIT,

        createOrder: function () {
          return paypalCheckoutInstance.createPayment({
            flow: 'checkout', // Required
            amount: 10.00, // Required
            currency: 'USD' // Required
          });
        },
        onApprove: function (data, actions) {
          return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
            // Submit 'payload.nonce' to your server
          });
        },
      }).render('#paypal-credit-button');
    });
  });
});

Add a banner (optional)anchor

If you'd like to add ready-made PayPal Credit banners to your site, you can get the code from PayPal's self-service portal. More information on these banners is available in the portal and in our PayPal Credit support article.

See also


Next Page: Server-side →