Klarna Payment Integration
Klarna is one of Europe’s largest banks and is providing payment solutions such as payments for online storefronts, direct payments, post purchase payments and more. Follow the steps of this guide to set up Klarna payments in our NextJS eCommerce boilerplate.
Getting klarna credentials
To get started with Klarna, you need to create a test account. You can create a real business account but we recommend creating a test account first. After getting an account, you need to create keys which you need to store in your .env file:
KLARNA_USERNAME=your-klarna-username
KLARNA_PASSWORD=your-klarna-password
Note: you have to generate a Crystallize secret token and secret token id to your project follow the steps to generate Crystallize access tokens and add the variables to your .env file:
CRYSTALLIZE_SECRET_TOKEN_ID=your-secret-token-id
CRYSTALLIZE_SECRET_TOKEN=your-secret-token
Initiating payment
In the init payment endpoint default in the NextJS eCommerce boilerplate is /src/pages/api/payment-providers/klarna/render-checkout.js, this is the typical flow you want to follow:
- Create a Crystallize order for the customer and the basket contents.
- Select Klarna as the payment option in the checkout.
- Receive an URL back from Klarna for where to redirect the user to approve the payment.
Note: while you are developing this on your local machine, you need an HTTP proxy so that Klarna can call your local machine, like ngrok, once ngrok is running add the HTTP forwarding URL as an env variable in your .env file:
NGROK_URL=your-ngrock-url
User payment confirmation
Once you click Klarna as payment, in the checkout you will see the Klarna transaction test drive, type the required fields and then click submit.
In payments use the credit card information from the Klarna testing environment docs then click buy now.
Order confirmation
After the customer has confirmed the purchase, they will be redirected back to the shop for a confirmation. The default in the NextJS eCommerce boilerplate is src/pages/confirmation/klarna/[orderId].js.
By default, the payment information can be used to update the order in Crystallize under /src/pages/api/payment-providers/klarna/render-checkout.js. Here you can choose if you would like to store extra information.
Next steps
What happens now is totally up to how you run your business. We advise you to set up proper fulfilment pipelines to orchestrate the orders, which you can use to manage the order fulfilment in a structured and automated way.
Read more about orders and fulfilment or watch our live stream where we demonstrate how Vipps payments (another payment method) work in our boilerplate.
