A demo checkout payment selector that showcases a Klarna integration built to Klarna's Payment Presentation guidelines for hosted checkout pages and embedded elements.

⚠️ Demonstration only — no live Klarna Partner credentials are used. The backend mocks the Payment Presentation API and authorizePayment action so the UI can faithfully render the documented presentation logic.

• Component anatomy — the Klarna payment method renders the documented parts: icon, badge, header, subheader, message (always a full row), terms, and button.
• Selection / deselection — message, terms, and the payment button are mounted but only revealed when the Klarna option is selected.
• Presentation instructions — switch customer journeys in the demo panel to see each instruction applied:

  Instruction	Journey
  SHOW_KLARNA	Anonymous shopper — Klarna alongside other methods
  PRESELECT_KLARNA	Signed in / saved option — pre-selected, savedPaymentOption prioritized
  SHOW_ONLY_KLARNA	Express Checkout started — Klarna as the only method
  HIDE_KLARNA	Partner access revoked — Klarna hidden

• Amount-aware refresh — adjusting the order total re-requests Payment Presentation so the instalment amounts stay correct (a hard requirement in the docs).
• initiate → authorize flow — clicking the Klarna button posts the session token + paymentOptionId to the backend, which simulates authorizePayment.

Rendering mermaid diagram...

• index.ts — Hono server: serves the frontend and the two mock Klarna API routes.
• backend/presentation.ts — builds the Payment Presentation response (instruction + payment options) from the checkout context.
• frontend/ — React UI (.tsx components, Twind for styling).

Open the root URL. Use the Order summary slider to change the total and the Presentation scenario panel to switch instructions.