Advanced JavaScript options

SDKCurrent

Last updated: Mar 14th, 6:13pm

The messages component of the JavaScript SDK can be integrated in a variety of ways. The following sections cover different methods for configuring and using the SDK.

Know before you code

Required
This integration modifies an existing Pay Later integration

This integration modifies an existing Pay Later integration.

Configure using JavaScript

You can configure and render your messages using JavaScript as an alternative to HTML attributes. The PayPal JavaScript SDK messages component uses a JavaScript API that is similar to the API used by the buttons component.

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.paypal.com/sdk/js?client-id=CLIENT_ID&currency=EUR&components=messages">
8  </script>
9</head>
10<body>
11
12<div class="pp-message"></div>
13  <script>
14    paypal.Messages({
15      amount: 120,
16      style: {
17        layout: 'text',
18        logo: {
19          type: 'primary'
20        }
21      }
22    })
23    .render('.pp-message');
24  </script>
25</body>

In the above example, you create a message object by calling the paypal.Messages function. The paypal.Messages function takes a configuration object as a parameter and returns a message object. The message object takes in a render parameter to determine where to render a Pay Later message or messages on your HTML page.

The code sample above sets the amount to 120 and configures the message to use a text layout with the primary logo, then instructs the SDK to render the message wherever the pp-message class appears on the HTML page. This example renders a message on your website that's similar to the following image.

Ratenzahlung,text,message,for,a,Pay,Later,offer,with,12,pixel,font,,left-aligned,,black,text,on,a,white,background,,with,a,PayPal,logo,displaying,the,PayPal,icon,and,name,on,the,left,side,of,the,text