Marketing Solutions Integration Guide

SDK

Last updated: Sept 10th, 6:55pm

Important: PayPal Marketing Solutions is a legacy product. We accept new integrations and support existing integrations, but there are new solutions.

PayPal Marketing Solutions uses a Tag Manager to manage marketing products for merchants. A Tag Manager requires a container, which is comprised of a set of macros, rules, and tags.

Take these steps to integrate PayPal Marketing Solutions.

1. Add the JavaScript to your site

In the main HTML file of the merchant site, add the PayPal JavaScript tag.

1<script src='https://www.paypalobjects.com/muse/partners/muse-button-bundle.js'></script>

2. Create PayPal Marketing Solutions Button

After the script loads, place the button in the 'insert-element-id' element of this function:

1MUSEButton('insert-element-id', {...})

Pass one of these properties in the {...} parameter to configure the button:

Property Description

Property	Description
Container ID (`cid`)	If you have a container ID, place it in your object's `cid` property to show Manage Settings on your button. Otherwise, the button shows Activate. If you do not have a container ID, pass the `onContainerCreate` property and a function in your object's `cid` property. When the container is successfully created, your function is called with the container ID as the parameter. Your callback function must save the container ID so you can access it the next time the merchant is identified. Otherwise, a container is created for the merchant. For example, a container ID might be `149a2912-7235-11e7-b969-837adbf1d469`.
Styles (`styles`)	The `styles` object uses the `button` key to stylize the button. Apply CSS properties in camel case to change the button style: `style: [{"key1": "value1"}, {"button": "CSSvalueInCamelCase"}]` For pseudo-classes such as `:hover`, the key value type is object. 1<script> 2 //Example styles object 3 const styles = { 4 button: { 5 color: 'red', 6 background: 'blue', 7 ':hover': { 8 background: 'blue' 9 } 10 } 11 } 12options.styles = styles 13</script>

Container ID (cid)

If you have a container ID, place it in your object's cid property to show Manage Settings on your button. Otherwise, the button shows Activate.

If you do not have a container ID, pass the onContainerCreate property and a function in your object's cid property. When the container is successfully created, your function is called with the container ID as the parameter.

Your callback function must save the container ID so you can access it the next time the merchant is identified. Otherwise, a container is created for the merchant.

For example, a container ID might be 149a2912-7235-11e7-b969-837adbf1d469.

Styles (styles)

The styles object uses the button key to stylize the button. Apply CSS properties in camel case to change the button style: style: [{"key1": "value1"}, {"button": "CSSvalueInCamelCase"}] For pseudo-classes such as :hover, the key value type is object.

1<script>
2  //Example styles object
3  const styles = { 
4    button: { 
5      color: 'red', 
6      background: 'blue', 
7      ':hover': {
8        background: 'blue' 
9      }
10    }
11  }
12options.styles = styles
13</script>

3. Add the container ID to the merchant site

To complete the integration, add this script tag in the merchant site header. You must replace containerId with the actual container ID.

1<!-- PayPal BEGIN -->
2<script>
3;(function(a,t,o,m,s){a[m]=a[m]||[];a[m].push({t:new Date().getTime(),event:'snippetRun'});var f=t.getElementsByTagName(o)[0],e=t.createElement(o),d=m!=='paypalDDL'?'&m='+m:'';e.async=!0;e.src='https://www.paypal.com/tagmanager/pptm.js?id='+s+d;f.parentNode.insertBefore(e,f);})(window,document,'script','paypalDDL','containerId');
4</script>
5<!-- PayPal END -->

Complete code example

This example shows a complete PayPal Marketing Solutions integration:

1<div id='paypal-marketing-button-container'></div>
2
3<script src='https://www.paypalobjects.com/muse/partners/muse-button-bundle.js'></script>
4<script>
5  MUSEButton('paypal-marketing-button-container', {
6    onContainerCreate: (containerId) => {
7      // Optional callback. If cid property is not passed in,
8      // A container ID will be created for you.
9    },
10    host_name: 'https://example.com',
11    partner_name: 'bar',
12    bn_code: 'xyz',
13    env: 'sandbox',
14    cid: 'Merchant ContainerId',
15  })
16</script>

See the Marketing Solutions button parameters:

Marketing Solutions Reference

Install and activate PayPal Marketing Solutions for e-Commerce platforms:

Install and activate PayPal Marketing Solutions

Marketing Solutions Integration Guide

1. Add the JavaScript to your site

2. Create PayPal Marketing Solutions Button

3. Add the container ID to the merchant site

Complete code example

Next