Advanced JavaScript options
Explore ways to configure your JavaScript SDK
SDKCurrentLast updated: April 8th 2022, @ 8:17:05 am
The messages
component of the PayPal JavaScript SDK is flexible enough for you to integrate and utilize in a variety of ways. The following sections cover different methods for configuring and using the SDK.
On this page
Know before you code
- This integration modifies an existing Pay Later integration.
- If you haven't already, add Pay Later messaging to your site.
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.
Sample code
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script
src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID¤cy=EUR&components=messages">
</script>
</head>
<body>
<div class="pp-message"></div>
<script>
paypal.Messages({
amount: 120,
style: {
layout: 'text',
logo: {
type: 'primary'
}
}
})
.render('.pp-message');
</script>
</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.
See also
See the Reference tables to view all configuration settings.