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 started

  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

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.

Integration

Offering PayPal Credit is similar to offering regular PayPal payments.

If you are using Drop-in UI, add PayPal Credit to Drop-in UI. Otherwise, continue.

  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

    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');
        });
      });
    });
    This snippet uses the PayPal JS SDK. If you are using checkout.js, learn how to migrate to the PayPal JS SDK.

Examples

PayPal and PayPal Credit with the Vault flow

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

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

<!-- Load the Braintree components -->
<script src="https://js.braintreegateway.com/web/3.66.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.66.0/js/paypal-checkout.min.js"></script>
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');
    });
  });
});
This snippet uses the PayPal JS SDK. If you are using checkout.js, learn how to migrate to the PayPal JS SDK.

PayPal and PayPal Credit with the Checkout flow

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

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

<!-- Load the Braintree components -->
<script src="https://js.braintreegateway.com/web/3.66.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.66.0/js/paypal-checkout.min.js"></script>
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');
    });
  });
});
This snippet uses the PayPal JS SDK. If you are using checkout.js, learn how to migrate to the PayPal JS SDK.

Add a banner (optional)

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 →