Pay later messages

A pay later message tells the visitor how they could split the payment, such as “3 interest-free payments of €33.30”. PayPal and Klarna draw the message with their own script. Smootify gives them the amount: on the product page, what the visitor is about to add; in the cart, the cart total. The message changes when the variant, the quantity or the cart changes.

How it fits together

PayPal and Klarna each give you a placement: a small piece of code that becomes the message. You paste it in a Webflow Code Embed. Then you tell Smootify which amount it gets:

• variant="pay-later" inside smootify-product: the total of the product form, as smootify-price shows it in data-prop="total": the price with the selling plan and the add-ons, times the quantity;
• cart="pay-later" inside smootify-cart: the cart total, in the cart’s currency.

The attribute goes on the placement itself, or on an element around it, such as a Div block that holds the Code Embed. On an element around it, Smootify writes the amount on every placement inside.

What is up to you: where the message goes, its style (set with PayPal’s or Klarna’s own attributes), and whether you show it on the product page, in the cart or both.

A PayPal message on the product page and a Klarna message in the cart, with what Smootify writes on each:

1. Add the script

Each provider has its own script. Paste it in Site settings → Custom code, or in the page settings of the pages that show the message.

• PayPal: the PayPal JavaScript SDK with components=messages and your client id, from your PayPal business account.
• Klarna: the On-site messaging script, from the Klarna merchant portal.

For PayPal, the line looks like this, with your own client id:

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

2. On the product page

Add a Div block inside smootify-product with the custom attribute variant="pay-later", and put a Code Embed inside it with the placement:

The code in the Code Embed is PayPal’s placement. The style attributes, such as data-pp-style-layout, are PayPal’s: see their messaging guide. You can also skip the Div block and write variant="pay-later" on the placement, inside the Code Embed:

<div data-pp-message data-pp-style-layout="text" variant="pay-later"></div>

3. In the cart

The same, inside smootify-cart, with cart="pay-later". Here with Klarna’s placement:

data-key (which message) and data-locale (its language and country) are Klarna’s settings: copy them from your Klarna merchant portal.

What Smootify writes

Smootify writes only the amount, in the form each provider reads:

• PayPal (data-pp-message): data-pp-amount and data-pp-currency. On PayPal’s newer paypal-message placement: amount and currency-code. PayPal updates the message by itself when they change.
• Klarna (klarna-placement): data-purchase-amount, in the currency’s smallest unit (3330 for €33.30). Smootify then asks Klarna to draw its placements again.

Everything else, such as the style, the client id, the key and the language, stays as you wrote it.

PayPal, Klarna and Shop Pay

Shopify’s own pay later, Shop Pay Installments, is offered only in the United States, Canada, the United Kingdom and Australia. Elsewhere, such as in the rest of Europe, show PayPal’s or Klarna’s messages instead. They only show the offer: the visitor still pays at Shopify’s checkout, with the payment methods your store has.

Before you publish