PayPal Credit is a customer credit offering from PayPal. 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

    JavaScript
    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)
               .then(function (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.26.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.0/js/paypal-checkout.min.js"></script>
<script>
  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)
            .then(function (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)
            .then(function (payload) {
              // Submit `payload.nonce` to your server
            });
        },
      }, '#paypal-credit-button');
    });
  });
</script>

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.26.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.26.0/js/paypal-checkout.min.js"></script>
<script>
  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)
            .then(function (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)
            .then(function (payload) {
              // Submit `payload.nonce` to your server
            });
        },
      }, '#paypal-credit-button');
    });
  });
</script>

Add a banner (optional)

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

See also

Next: Server-side →

Still have questions?

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