Add Pay Later messaging

DocsCurrent

Last updated: Jul 15th, 8:24pm

Integrate Pay Later messaging to show customized payment offers for your buyers.

Know before you code

Required
Complete Get Started

Complete Get Started to set up your PayPal account, client ID, and sandbox emails for testing.

1

Enable Pay Later messaging on your website

Add the PayPal JavaScript SDK to your website to enable Pay Later messaging. Copy the following code and paste it in the tag of your website. Replace CLIENT_ID with your sandbox or production client ID.

Note: If you’ve already added the PayPal JavaScript SDK to your website, add ‘messages’ to the components components=messages,buttons.

    1<script
    2src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&components=messages,buttons"
    3data-namespace="PayPalSDK">
    4</script>
    2

    Customize and preview Pay Later messaging

    Add the following code to the body of your pages to display Pay Later messaging and update the data-pp-amount:
    1. Product page
    2. Cart
    3. Checkout
    4. Home page
    5. Category page
    1<div
    2 data-pp-message
    3 data-pp-style-layout="text"
    4 data-pp-style-logo-type="inline"
    5 data-pp-style-text-color="black"
    6 data-pp-style-text-size="12"
    7 data-pp-amount=ENTER_VALUE_HERE
    8 data-pp-placement=product>
    9</div>

    Test and go live

    Save your website and publish it to start testing Pay Later messaging. Confirm that messaging displays on all appropriate pages.

    Go live

    1. Change your sandbox CLIENT_ID to production CLIENT_ID in the PayPal JavaScript SDK. This includes changing the sandbox client ID in the PayPal JavaScript SDK to call in your HTML.
    2. If you created or updated pages on a website, move that code from the test environment to the live environment.

    Troubleshooting

    Message components, console warnings, and errors include configuration attributes and object validations. Configuration properties have distinct validation checks for input formatting and values. For a full list of accepted options, see the reference.

    If validations fail, the developer console in your web browser displays warning messages that inform you which property is invalid and what you should do to resolve the issue. Depending on the message type, the library attempts to fall back to the default values.