Advanced JavaScript Options

SDKCurrentDirect Merchant

Last updated: Apr 9th, 8:51pm

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.

Configure using JavaScript

You can configure and display Pay Later messages using JavaScript as an alternative to HTML attributes. The JavaScript SDK messages component uses an 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.

Reference

See Reference tables for more details on available options.

Know before you code

This integration modifies an existing Pay Later integration

Required

This integration modifies an existing Pay Later integration

Learn More