Klarna app

This app integrates Saleor with Klarna payment gateway.

Required Saleor version: 3.15

Note

This is an example implementation. Only community support is available.

Development

Prerequisites

Software

• Node.js 20

• pnpm 8.14.2

Access

You need to have a Klarna playground account to run this app. You can create one here.

Installation

1. Copy .env.example to .env and fill in the required values.
2. pnpm install

Usage

Important

The app needs to be tunneled in local development.

To run the app on port 3000, use the following command:

pnpm dev

Each time you modify a .graphql file, you have to run:

pnpm generate

to regenerate the GraphQL types.

Running storefront example

This app comes with a simple storefront example. To run it, follow these steps:

1. Clone the repository.
2. Copy .env.example to .env and fill in the required values.
3. pnpm install
4. pnpm dev

Each time you modify a .graphql file, you have to run:

pnpm generate

Vendor software

The app implements the Hosted Payment Page flow through a custom Klarna API client. The client is located in generated/klarna.ts.

Overview

Features

• ✅ Authorize transactions
• ✅ Charge transactions
• ✅ Refund transactions
• ❌ Cancel transactions
• ✅ Initialize payment gateway
• ❌ Saved payment methods
• ✅ Storing config in metadata
• ✅ Two way webhook synchronization (Saleor → Klarna → Saleor)
• ✅ Front-end example (in external repository)

Payment methods

• Klarna (credit card)

Payment flow

1. Execute checkoutCreate mutation from the front-end.
2. Execute transactionInitialize mutation from the front-end. In the app, the transaction-initialize-session.ts handler creates a session in Klarna. Depending on the chosen TransactionFlowStrategyEnum, it will respond with either AUTHORIZATION_ACTION_REQUIRED or CHARGE_ACTION_REQUIRED. transaction-initialize-session returns the data needed to render the Klarna component.
3. Render the Klarna component in the front-end.
4. Once the payment process is finished, execute the transactionProcess mutation from the front-end. In the app, the transaction-process-session.ts handler creates an order in Klarna.

Configuration

You will need to provide the following configuration:

• Username - your Klarna username
• Password - your Klarna password

Now, save the configuration and assign it to the channel you want to use it with.