How To Accept Payments Using Klarna And Steps To Implement Klarna Payment

Klarna was founded in 2005 in Stockholm, Sweden with the aim of making it easier for people to shop online. In the last 15 years, technology has evolved, excited and transformed the world around us, yet our mission remains as relevant as ever, to make paying as simple, safe and above all, smooth as possible.

Klarna is the leading global payments and shopping service, providing smarter and more flexible shopping and purchase experiences to 90 million active consumers across more than 250,000 merchants in 17 countries. Klarna offers direct payments, pay after delivery options and installment plans in a smooth one-click purchase experience that lets consumers pay when and how they prefer to.
When the company acquired SOFORT in 2014 the Klarna Group was formed. Klarna is backed by investors such as Sequoia Capital, Silver Lake, Bestseller Group, Dragoneer, Permira, Visa, Ant Group and Atomico.


Klarna is a part of The Klarna Group.

  • Total active consumers: 90,000,000
  • Total number of merchants: 250,000
  • Number of transactions per day: 2,000,000
  • Number of employees: 3500

Stripe users in supported countries can enable Klarna payments using Sources—a single integration path for creating payments using any supported method.

During the payment process, a Source object is created and your customer is either presented with a Klarna widget or redirected to a Klarna Hosted Payment Page that displays payment options, including Pay now, Pay later, and Financing. Your integration then uses the source to make a charge request and complete the payment.

Within the scope of Sources, Klarna is a push-based, single-use and synchronous or asynchronous method of payment.

U.S. users can accept payments from U.S. customers, and European users can accept payments from customers in the following countries:

Purchase CountryCountry CodeCurrency
United KingdomGBGBP

Prerequisite: Update Terms and Conditions

Prior to processing live transactions with Klarna, it’s important that you update your Terms and Conditions and Privacy Policy, per Klarna’s requirements.

Step 1 Install stripe

npm i @stripe/stripe-js


<script src="" defer></script>

Step 2 Create source object

A Source object is either created client-side using Stripe.js or server-side using the Source creation endpoint. Updatable fields enable you to create a source without providing personally identifiable information (PII), which must be added later using a source update once the customer selects Klarna as a payment option.

Klarna also supports a full-redirect authorization specifically designed for both desktop and mobile experiences. To leverage the redirect flow, you create the source using these additional arguments:

redirect[return_url]The URL the customer should be redirected to after the authorization process.

To create a Klarna source, call stripe.createSource() with the relevant details:

In your component return the following code

  • home.component.html
<mat-toolbar color="primary"> <span>Klarna Payment Example</span> </mat-toolbar> <br />

<button md-raised-button color="accent" (click)="pay()">Pay</button>
  • home.component.ts
import { loadStripe } from '@stripe/stripe-js';
export class PaymentComponent implements OnInit {

stripe: any;
ngAfterViewInit() {

async initStripeElements(){
this.stripe = await loadStripe(Constants.stripePK);

type: 'klarna',
flow: 'redirect',
redirect: {
return_url: REDIRECT_URL
amount: 816,
currency: 'eur',
klarna: { product: 'payment', purchase_country: 'DE' },
source_order: {
items: [{
type: 'sku',
description: 'Grey cotton T-shirt',
quantity: 2,
currency: 'eur',
amount: 796
type: 'tax',
description: 'Taxes',
currency: 'eur',
amount: 20
type: 'shipping',
description: 'Free Shipping',
currency: 'eur',
amount: 0,
}).then(function (result) {

setTimeout(() => {, '_self'); }, 2000);

}, err => { console.log(err); });



After clicking on the pay button the user will redirect to klarna pages.

Using either server-side or client-side source creation, Stripe returns a Source object containing the relevant details for the method of payment used. To allow your customer to authorize the payment, redirect them to one of the URLs provided within the Source object, eg:

klarna[pay_later_redirect_url], klarna[pay_over_time_redirect_url] or klarna[pay_now_redirect_url].

When flow is set to redirect, Stripe returns a Source of flow redirect. To allow your customer to authorize the payment, redirect them to one of the URLs provided within the Source object, eg: klarna[pay_later_redirect_url], klarna[pay_over_time_redirect_url] or klarna[pay_now_redirect_url].

If the customer is redirected to redirect[url], Pay later will be used if it’s available.


After the authorization process, your customer is redirected back to the URL provided as the value of redirect[return_url]. This happens regardless of authorization success or failure. Stripe appends redirect[return_url] with a redirect_status parameter, with the following potential values:

ValueDescriptionSuggested Action
CanceledThe customer abandoned the payment flow.Reload the checkout page with the same options.
FailedThe customer was not eligible for the selected Klarna method.Reload the checkout page with the remaining eligible Klarna payment_method_categories.

If the customer authorizes the payment, the Source object’s status transitions to chargeable when it is ready to be used in a charge request. If your customer declines the payment and no other payment_method_categories are available, the status transitions to failed.

Step 3 Charge the source

Once Klarna authorizes the payment, the source’s status transitions to chargeable and it can be used to make a charge request.

You can see in dashboard


Since that transition happens asynchronously, it is essential that your integration rely on webhooks to determine when the source becomes chargeable in order to create a charge. Please refer to our best practices for more details on how to best integrate payment methods using webhooks.


The following webhook events are also sent to notify you about changes to the source’s status:

source.chargeableA source object becomes chargeable after it has been authorized by Klarna.
source.failedA source object failed to become chargeable.
source.canceledA source object expired and cannot be used to create a charge.

Make A Charge Request To Finalize The Authorization

Once the source is chargeable, from your source.chargeable webhook handler, you can make a charge request using the source ID as the value for the source parameter to complete the payment. The amount must match the Source object’s amount.

When selling physical goods, you should pass the capture: false flag to the charge request to let Klarna know that you’re working on fulfilling the order. Once all items have been shipped, send a capture request to let Klarna know that the order has been fulfilled. Note that the order must be fulfilled within 28 days. Only one capture, less than or equal to the charge amount, is permitted. Any remaining amount will be released back to the customer.

Call the following API and pass the amount, currency, sourceId in the request body from the REDIRECT_URL component and according to the response show payment success message to the user.

// See your keys here:

const Stripe = require('stripe');'/charge-source', (req, res, next) => {
const stripe = Stripe('secret key');

const charge = await stripe.charges.create({
amount: req.amount,
currency: req.currency,
Source: req.sourceId
return charge;

Make A Charge Request To Finalize The Authorization

Optional: Authorizing The Payment And Capturing Immediately

By omitting the capture parameter or sending capture: true, Klarna assumes that the order is immediately fulfilled. This is handy if you’re selling digital goods.

Step 4 Confirm that the charge has succeeded

Once the charge is confirmed—and the funds guaranteed—its status is updated to succeed.

One of the following events is sent when the charge’s status is updated:

charge.succeededThe charge succeeded and the payment was complete.
charge.failedThe charge has failed and the payment could not be completed.


So here we are, we learn to use sources to accept payments using Klarna and steps to implement klarna payment. For more information please visit the document.


Tech Expert

Full-stack developer with around 2 years of experience. Expert in Angular, Java, NodeJs integrated web application. Skills like designing, building, integrating, understanding of responsive web development and writing efficient, maintainable and reusable code.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.


We had very close go live timeline and MindBowser team got us live a month before.

Shaz Khan
CEO, BuyNow WorldWide

They were a very responsive team! Extremely easy to communicate and work with!

Kristen M.
Founder & CEO, TotTech

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

Chacko Thomas
Co-Founder, TEAM8s

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

Dave Dubier
Founder & CEO, MangoMirror

Mindbowser was very helpful with explaining the development process and started quickly on the project.

Hieu Le
Executive Director of Product Development, Innovation Lab

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

Alex Gobel
Co-Founder, Vesica

Mindbowser is professional, efficient and thorough. 

MacKenzie R
Consultant at XPRIZE

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

Bennet Gillogly
Co-Founder, Flat Earth

They're very tech-savvy, yet humble.

Uma Nidmarty
CEO, GS Advisorate, Inc.

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

Katie Taylor
Founder, Child Life On Call

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

Radhika Kotwal
Founder of Courtyardly

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

Michael Wright
Chief Executive Officer, SDOH2Health LLC

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

David Cain
CEO, thirty2give

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

Bart Mendel
Founder, Mindworks