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 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.

With this change, you must link your PayPal sandbox test account to your Braintree sandbox account for testing.

Integration

Offering PayPal Credit is similar to offering regular PayPal payments.

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

  1. Add a PayPal Credit button
    • Pass style: { label: 'credit' } in your checkout.js button configuration
  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

    Callbacks Promises
    Copy
    Copied
    braintree.client.create({
       authorization: CLIENT_AUTHORIZATION
     }, function (err, clientInstance) {
       braintree.paypalCheckout.create({
         client: clientInstance
       }, function (err, paypalCheckoutInstance) {
    
         // Set up regular PayPal button, then
    
         // Set up PayPal Credit button
         paypal.Button.render({
           env: 'production', // or 'sandbox'
           style: {
             label: 'credit'
           },
           payment: function () {
             return paypalCheckoutInstance.createPayment({
               flow: 'vault', // or 'checkout'
               offerCredit: true,
               // Pass additional options as required
               }
             });
           },
           onAuthorize: function (data, actions) {
             return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
               // Submit `payload.nonce` to your server
             });
           },
         }, '#paypal-credit-button');
       });
     });

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
Copy
Copied
<div id="paypal-button"></div>
<div id="paypal-credit-button"></div>

<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>
<script src="https://js.braintreegateway.com/web/3.39.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.39.0/js/paypal-checkout.min.js"></script>
Callbacks Promises
Copy
Copied
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (err, clientInstance) {
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (err, paypalCheckoutInstance) {

    // Set up regular PayPal button
    paypal.Button.render({
      env: 'production', // or 'sandbox'
      payment: 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'
          }
        });
      },
      onAuthorize: function (data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
          // Submit `payload.nonce` to your server
        });
      },
    }, '#paypal-button');

    // Set up PayPal Credit button
    paypal.Button.render({
      env: 'production', // or 'sandbox'
      style: {
        label: 'credit'
      },
      payment: function () {
        return paypalCheckoutInstance.createPayment({
          flow: 'vault',
          offerCredit: true,
          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'
          }
        });
      },
      onAuthorize: function (data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
          // Submit `payload.nonce` to your server
        });
      },
    }, '#paypal-credit-button');
  });
});

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
Copy
Copied
<div id="paypal-button"></div>
<div id="paypal-credit-button"></div>

<script src="https://www.paypalobjects.com/api/checkout.js" data-version-4 log-level="warn"></script>
<script src="https://js.braintreegateway.com/web/3.39.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.39.0/js/paypal-checkout.min.js"></script>
Callbacks Promises
Copy
Copied
braintree.client.create({
  authorization: CLIENT_AUTHORIZATION
}, function (err, clientInstance) {
  braintree.paypalCheckout.create({
    client: clientInstance
  }, function (err, paypalCheckoutInstance) {

    // set up regular PayPal button
    paypal.Button.render({
      env: 'production', // or 'sandbox'
      payment: function () {
        return paypalCheckoutInstance.createPayment({
          flow: 'checkout', // Required
          amount: 10.00, // Required
          currency: 'USD' // Required
        });
      },
      onAuthorize: function (data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
          // Submit `payload.nonce` to your server
        });
      },
    }, '#paypal-button');

    // set up PayPal credit button
    paypal.Button.render({
      env: 'production', // or 'sandbox'
      style: {
        label: 'credit'
      },
      payment: function () {
        return paypalCheckoutInstance.createPayment({
          flow: 'checkout', // Required
          amount: 10.00, // Required
          currency: 'USD', // Required
          offerCredit: true
        });
      },
      onAuthorize: function (data, actions) {
        return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
          // Submit `payload.nonce` to your server
        });
      },
    }, '#paypal-credit-button');
  });
});

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 →

Still have questions?

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