PayPal

import { CreditVaultFlowIntegrationCodeBlock } from '~/components/CodeBlockInstances/PayPal/CreditVaultFlowIntegration.tsx'

PayPal Credit

Availability

PayPal Credit is currently only available to eligible merchants using our JavaScript v3 SDK.

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 started

See our PayPal Credit support article for full details on the availability and benefits of this feature
Complete your PayPal client-side integration
- Use our PayPal Checkout component with the Vault flow or Checkout flow
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.

Integration

Offering PayPal Credit is similar to offering regular PayPal payments.

Set the fundingSource parameter to paypal.FUNDING.CREDIT
Tokenize using PayPal Credit
- In your paypalCheckoutInstance, specify your flow ('vault' or 'checkout') and offerCredit: true
Submit the resulting payment method nonce to your server to create a transaction

Callback

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'); }); }); });`;
}

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.111.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.0/js/paypal-checkout.min.js"></script>

Callback

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 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.111.0/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/3.111.0/js/paypal-checkout.min.js"></script>

Callback

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)

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.