The event name.
The handler that was registered with on().
"Unregister a handler registered with {@docs-portal-link Messaging.onOverlayOpen}
or {@docs-portal-link Messaging.onOverlayClose}. Pass the same event name and the same function
reference that was used with on(). Unregistering a handler that is not registered does
nothing.
Use it when the framed page tears down its Klarna components, so that a handler stops resizing an iframe the page no longer shows. If the same handler is also registered on {@docs-portal-link Payment.onOverlayOpen} or {@docs-portal-link Payment.onOverlayClose}, remove it there with {@docs-portal-link Payment.off}."
// onOverlayOpen and onOverlayClose are the handlers from the overlayopen and overlayclose
// examples. Later, when the page removes its Klarna components:
klarna.Messaging.off("overlayopen", onOverlayOpen);
klarna.Messaging.off("overlayclose", onOverlayClose);
// If you also registered them on klarna.Payment:
// klarna.Payment.off("overlayopen", onOverlayOpen);
// klarna.Payment.off("overlayclose", onOverlayClose);
The event name.
Event callback handler.
"Register a handler for the overlayopen event. Klarna emits it on the Messaging
namespace right before flow interaction mode draws anything over the page for an overlay
opened from {@docs-portal-link Messaging.placement}: the 'Learn more' dialog, the backdrop
behind the Klarna pop-up, the backdrop shown when the browser blocks the pop-up, or the in-page
fallback iframe. This includes prequalification links in placements. Links rendered through
{@docs-portal-link Payment.presentation} emit on {@docs-portal-link Payment.onOverlayOpen}
instead.
Register the handler before mounting a {@docs-portal-link Messaging.placement}. If the framed page also uses {@docs-portal-link Payment.button} or {@docs-portal-link Payment.presentation}, register the same handler on {@docs-portal-link Payment.onOverlayOpen}, and count the overlays that are open: a Payment overlay can still be fading out when a Messaging overlay opens."
// Inside a framed checkout page. One count covers the overlays of both namespaces.
let openOverlays = 0;
const onOverlayOpen = () => {
openOverlays += 1;
if (openOverlays > 1) return;
pinKlarnaContainer();
window.parent.postMessage({ type: "klarna:flow-open" }, "https://partner.example.com");
};
if (window.parent !== window) {
klarna.Messaging.on("overlayopen", onOverlayOpen);
// If the page also uses Payment.button or Payment.presentation (PAYMENT in products):
// klarna.Payment.on("overlayopen", onOverlayOpen);
}
The event name.
Event callback handler.
"Register a handler for the overlayclose event. Klarna emits it on the Messaging
namespace after flow interaction mode removes what it drew over the page for an overlay opened
from {@docs-portal-link Messaging.placement}. The event may fire before a redirect navigation
completes while the document is still alive, and may not fire if the browsing context is torn
down first.
Register the handler before mounting a {@docs-portal-link Messaging.placement}. If the framed page also uses {@docs-portal-link Payment.button} or {@docs-portal-link Payment.presentation}, register the same handler on {@docs-portal-link Payment.onOverlayClose}, and restore a resized iframe only once every open overlay has closed."
// Inside a framed checkout page. openOverlays is the count from the overlayopen example
// (let openOverlays = 0), which adds one for each overlay that opens.
const onOverlayClose = () => {
if (openOverlays === 0) return;
openOverlays -= 1;
if (openOverlays > 0) return;
unpinKlarnaContainer();
window.parent.postMessage({ type: "klarna:flow-close" }, "https://partner.example.com");
};
if (window.parent !== window) {
klarna.Messaging.on("overlayclose", onOverlayClose);
// If the page also uses Payment.button or Payment.presentation (PAYMENT in products):
// klarna.Payment.on("overlayclose", onOverlayClose);
}
"Creates a Klarna promotional messaging placement. Placements display
contextual messages such as 'Pay in 4 interest-free installments' on
product pages, cart pages, or footers. The key determines the placement
type and layout, and amount (in minor units, e.g. 2500 for $25.00)
controls the financing terms shown.
Call mount() on the returned element to render it into a DOM container."
// Create a credit-promotion placement and mount it
klarna.Messaging.placement({
key: "credit-promotion-auto-size",
locale: "en-US",
amount: 4999, // $49.99 in minor units
}).mount("#product-messaging");
Messaging package. Credit promotion and placement APIs.
Package Interface
Klarna-lifecycle-stage
gated