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.