# Pay later messages

> Show PayPal's and Klarna's pay later messages on the product page and in the cart, with the amount the visitor would pay, kept up to date by Smootify.

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/features/pay-later  
Updated: 2026-10-15

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.

> [!NOTE]
> You need a PayPal or a Klarna account that offers pay later in your country, and their script on the site. Smootify writes only the amount: no plan or add-on is needed.

## 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:

| Placement | Amount | Smootify writes | The provider draws |
|---|---|---|---|
| PayPal, inside `variant="pay-later"` on the product page | the form total: 2 × €40.00 = €80.00 | `data-pp-amount="80.00"` and `data-pp-currency="EUR"` | "Pay in 3 interest-free payments of €26.67", in the style of your `data-pp-style-*` attributes |
| Klarna, inside `cart="pay-later"` in the cart | the cart total: €124.00 | `data-purchase-amount="12400"` (in cents), then asks Klarna to draw again | "Pay in 3 interest-free payments of €41.33", the message of your `data-key` in your `data-locale` |

The product amount follows the form: the price with the selling plan and the add-ons, times the quantity, as `smootify-price` shows it in `data-prop="total"`. 1 × €40.00 writes `data-pp-amount="40.00"`; 2 × €40.00 writes `80.00`; 2 × €36.00 with a −10% subscription writes `72.00`; 2 × (€36.00 + €5.00 gift wrap) writes `82.00`.

## 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:

```html
<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:

```html
<div variant="pay-later">
  <div class="w-embed"><div data-pp-message="" data-pp-style-layout="text"></div></div>
</div>
```

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:

```html
<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:

```html
<div cart="pay-later">
  <div class="w-embed"><klarna-placement data-key="credit-promotion-badge" data-locale="en-GB"></klarna-placement></div>
</div>
```

`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

> [!STUCK]
> - **The message shows no amount.** The attribute is missing, or it is outside its element: `variant="pay-later"` must be inside `smootify-product`, `cart="pay-later"` inside `smootify-cart`.
> - **Nothing shows at all.** The provider's script is missing from the page, or your account does not offer pay later in the visitor's country.
> - **The Klarna message does not change.** The placement is not a `klarna-placement`, or it sits outside the element with the attribute.
> - **The style is not the one you want.** Smootify does not style the message: change PayPal's `data-pp-style-*` attributes or Klarna's settings.