buttons
PayPal Credit Messaging Quick Reference
PPC messaging leverages the PayPal SDK. When you add the components=messages tag to the script, it will automatically scan the DOM for HTML elements with data-pp-message attributes and places messaging inside of any matching HTML element.
Example:
<script src=”https://www.paypal.com/sdk/js?client-id=sb&components=messages”></script>
<div data-pp-message data-pp-style-layout=”text” data-pp-style-logo-type=”primary”>
Output:
You tell the library where and how to render the messages based on the configuration attributes you set. The table below lists all the available attributes you can set to render different credit messaging.
| Attributes | Output |
|---|---|
| data-pp-style-layout=”text” data-pp-style-logo-type=”primary” |
|
| data-pp-style-layout=”text” data-pp-style-logo-type=”alternative” |
|
| data-pp-style-layout=”text” data-pp-style-logo-type=”inline” |
|
| data-pp-style-layout=”text” data-pp-style-logo-type=”none” |
|
| data-pp-style-layout=”text” data-pp-style-logo-position=”left” |
|
| data-pp-style-layout=”text” data-pp-style-logo-position=”right” |
|
| data-pp-style-layout=”text” data-pp-style-logo-position=”top” |
|
| data-pp-style-layout=”text” data-pp-style-text-color=”black” |
|
| data-pp-style-layout=”text” data-pp-style-text-color=”white” |
|
| data-pp-style-layout=”flex” data-pp-style-color=”blue” |
|
| data-pp-style-layout=”flex” data-pp-style-color=”black” |
|
| ddata-pp-style-layout=”flex” data-pp-style-color=”white” |
|
| data-pp-style-layout=”flex” data-pp-style-color=”white-no-border” |
|
| data-pp-style-layout=”flex” data-pp-style-color=”gray” |
|
| data-pp-style-layout=”flex” data-pp-style-ratio=”1×1″ |
|
| data-pp-style-layout=”flex” data-pp-style-ratio=”1×4″ |
|
| data-pp-style-layout=”flex” data-pp-style-ratio=”8×1″ |
|
| data-pp-style-layout=”flex” data-pp-style-ratio=”20×1″ |