How to add paypal pay later messaging to product page under price.

[Yvy616]

Hi i want people to be aware that they can finance (or pay in 4) using paypal. So I want to put the paypal messaging dynamic on the product page. Yet I can't seem to find where to do it, and pay pal doesn't have specific instructions for shopify. And the instructions it does have don't really guide well. Does anyone know how to add this please? Thanks!

[dave_dcweb]

Did you ever find out anything more about this? I'm trying to figure it out myself. It seems Paypal fully integrate with Shopify in this way. Maybe it's possible with a custom code.

[Yvy616]

HI there, no I haven't. I ended up using Klarna and using their messaging. Paypal still has the pay in 4 option but I guess the customer has to know or happen to see it if they go into paypal to finish the purchase.

[mwhitehouse]

It does work on Shopify. There are instructions on Paypal.com and also a useful YT video https://www.youtube.com/watch?v=p3y589VyclM In the video it says you need a merchant ID. The code you copy over from paypal.com already has an ID, not sure what this ID is as when following the instructions on paypal.com it didn't work. However following the YT video I was able to generate a new ID, i then replaced the one in the code with this and it worked.

[HashtagDesign]

Your code should look something like the below.

In fact if you add your ID into this code and paste it into your product page it should render something close to what you're after.

<script src="https://www.paypal.com/sdk/js?client-id=YOUR_CLIENT_ID&components=messages,buttons&disable-funding=c...">
</script>
<!-- this renders the message -->
<div
data-pp-message
data-pp-amount="119.00"
data-pp-style-text-align="center"
data-pp-style-text-size="14">
</div>

<!-- this renders the buttons-->
<div id="paypal-button-container"></div>

<script>
paypal.Buttons({
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{
amount: {
value: '119.00'
}
}]
});
},
style: {
layout: 'horizontal',
shape: 'rect',
label: false,
tagline: false
}
}).render('#paypal-button-container');
</script>

[AURAQ]

This is great however it renders the wrong price breakdown. Can you please post a new one that will take the product and divide it into the 4 payments please. Thank you for your help.

[GlenS]

For anyone who needs this do the following - 

Firstly, go into your Paypal, and find your Client ID by going to your Paypal, up the top right press Developer, press API credentials, press Default Application (or the one that's connected to your shopify), now copy the Client ID.

Then go to shopify admin, themes, customize theme, up the very top it says Home Page, press it, 

Products, Default Product, then on the left side under Product information or add to cart, press "Add Block" then select Custom Liquid, now inside of the box:

Replace CLIENTID with the PayPal Client ID, and you should now see exactly what you wanted, PayPal Pay in 4 Learn more.  
- Make sure the currency is also correct as I'm in Australia so its set to AUD.

<script
src="https://www.paypal.com/sdk/js?client-id=CLIENTID&currency=AUD&components=messages">
</script>

<div
data-pp-message
data-pp-placement="product">
</div>


For more information, first log into Paypal, then visit https://developer.paypal.com/docs/checkout/pay-later/au/integrate/

[AURAQ]

Omg! You are a lifesaver! It worked! Thank you so much! You would think that such a big provider such as PP would make this easy instead of having to know how to be a coder! 

[GlenS]

You're very welcome. 🙂 
Inside of the Paypal documentation, it has this line data-pp-amount="120.00"> 

I removed it from mine, as I don't know how to make it automatically display the product's price, so without that line, it will just have "Pay in 4 interest-free payments on purchases of $30-$2,000. Learn more."

Another thing I added these to my code that changes the position of the Paypal logo, and increases the sizing. I think the maximum is 16-20.

data-pp-style-logo-position="right"
data-pp-style-text-size="13"
if you add this code, add it on one line above the "</div>"