Credit Messaging Integration

DOCS

Last updated: Aug 15th, 7:17am

Steps for integrating PayPal Credit messaging

To add PayPal Credit messaging to your site:

Add the script
Render the messages
Customize the messages
Test it and go live

Credit messaging supports JavaScript in the browser.

1. Add messaging.js to your web page

Add the messaging.js script tag into the document head. Include your unique 13 digit PayPal merchant account ID, found here, as the data-pp-account attribute value on the script tag. This will expose the global paypal.Messages object used to manually render messages.

1<!DOCTYPE html>
2
3<head>
4  <meta name="viewport" content="width=device-width, initial-scale=1">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6  <script
7    src="https://www.paypalobjects.com/upstream/bizcomponents/js/messaging.js"
8    data-pp-account="ABC123DEF456G">
9  </script>
10</head>
11
12<body>
13  ...
14</body>

2. Render the Credit Messages

You tell the library where and how to render messaging and our back-end delivery system determines which credit messaging will display on your website.

Note: To maximize effectiveness, we recommend adding credit messaging early in the consumer's shopping experience and to your product and cart pages near the product or cart price. See our Best Practices section for a comprehensive guide for effective presentment of credit messaging throughout your site.

Render messages in one of two ways

Inline Attributes: The script automatically scans the DOM (webpage) for elements with data-pp-message attributes and place messaging inside of any matching element.

1<body>
2  <div
3    data-pp-message
4    data-pp-style-layout="text"
5    data-pp-style-logo-type="primary"
6    data-pp-style-logo-position="left">
7  </div>
8</body>

JavaScript Configuration: Add render code wherever you want to display PayPal Credit messaging. Various options may be passed to customize the appearance of your credit messaging. A CSS selector is then used to locate where to render any messages.

1<body>
2  <div class="pp-message"></div>
3
4  <script>
5    paypal
6      .Messages({
7        style: {
8          layout: 'text',
9          logo: {
10            type: 'primary',
11            position: 'left'
12          }
13        }
14      })
15      .render('.pp-message');
16  </script>
17</body>

Both examples above will render the same message on your site similar to following image:

3. Customize the Credit Messages

Customize credit messaging in two ways:

For all merchants: Change style option attributes to change the appearance of your credit messaging.
For merchants with Easy Payments: Include amount attribute to show monthly payment details. If no amount attribute is provided, only the number of payments will display in the credit messaging.

Adding Message attributes

Message attributes can be added in a mixture of 2 ways:

Add message attributes to a JavaScript object and pass into the paypal.Messages function call.
Place message attributes directly within the HTML markup via inline data-pp-* attributes.

Note: Inline data-pp-* attributes have higher priority over any JavaScript object attributes.

See the code samples and reference tables for more details.

4. Test it and go live

After you have tested locally that the desired message is displaying on your site, push up the changes to your live production site to let your customers know that financing is available to them.