AI OnAI Off

Klarna Payment Provider - Installation and User Guide

Product version:

EPiServer Commerce 1 R2 SP2

Document last saved:

Table of Contents

Introduction

This document describes how to install and use the Klarna Payment Provider for EPiServer Commerce with the Enoteca sample templates. The module is available for EPiServer Commerce 1 R2 SP2, and integrates the Klarna payment provider with EPiServer Commerce.

Prerequisites: a Klarna account is required for the installation to work.

Installation

Do the following to install the Klarna payment provider source code:

  1. Download and unzip the Klarna payment provider files.
  2. Open the EPiServer.Business.Commerce.Payment.Klarna.csproj in Visual Studio.
  3. Replace the references to these libraries (References) with the existing one in your Commerce front-end site:
    - EPiServer.dll
    - EPiServer.Business.Commerce.dll
    - EPiServer.Data.dll
    - Mediachase.Commerce.dll
    - Mediachase.Commerce.Plugins.Payment.dll
    - Mediachase.Commerce.Website.dll
    - Mediachase.MetaDataPlus.dll
    - Mediachase.WebConsoleLib.dll
  4. Rebuild the project.
  5. Copy the EPiServer.Business.Commerce.Payment.Klarna.dll to the bin folder in both the Commerce front-end and back-end sites.
  6. Copy the two files CookComputing.XmlRpcV2.dll and KlarnaAPI.dll in the Klarna\Lib folder to the bin folder in both the Commerce front-end and back-end sites.
  7. Copy all of the xml files in the EPiServer.Business.Commerce.Payment.Klarna project lang folder to the lang folder in the Commerce front-end site.
  8. a. For Klarna Invoice:
    - Create a folder named KlarnaInvoice in \Templates\Enoteca\Units\Placeable\Plugins\Payment\ in the Commerce front-end site.
    - Copy these files and folders: PaymentMethod.ascx and ClientResources folders in Klarna\KlarnaInvoice to the KlarnaInvoice folder which has been created.
      
    b. For Klarna Part Payment:
    - Create a folder named KlarnaPartPayment in \Templates\Enoteca\Units\Placeable\Plugins\Payment\ in Commerce the front-end site.
    - Copy these files and folders: PaymentMethod.ascx and ClientResources folder in Klarna\KlarnaPartPayment to the KlarnaPartPayment folder which has been created.
  9. a. For Klarna Invoice:
    - Create a folder named KlarnaInvoice in \eCommerceFramework\5.2\eCommerceFramework\ Shared\Apps\Order\Payments\Plugins\ in the Commerce front-end site.
    - Copy the ConfigurePayment.ascx file in Klarna\KlarnaInvoice to the KlarnaInvoice folder which has been created.
      
    b. For Klarna Part Payment:
    - Create a folder named KlarnaPartPayment in \eCommerceFramework\5.2\eCommerceFramework\ Shared\Apps\Order\Payments\Plugins\ in the Commerce front-end site.
    - Copy the ConfigurePayment.ascx file in Klarna\KlarnaPartPayment to the KlarnaPartPayment folder which has been created.
  10. a. For Klarna Invoice:
    - Copy the Klarna\MetaData\KlarnaInvoice folder to \eCommerceFramework\5.2\eCommerceFramework\Shared\Apps\Order\Payments\MetaData.
     
    b. For Klarna Part Payment:
    - Copy the Klarna\MetaData\KlarnaPartPayment folder to \eCommerceFramework\5.2\eCommerceFramework\Shared\Apps\Order\Payments\MetaData.

Configuring Klarna

Follow the steps below to configure Klarna in Commerce Manager.

  1. In Commerce Manager, go to Administration > Order System > Payments > Your country.
  2. Click New to create a new payment method. An example of the Klarna Part Payment configuration is shown below.
     
  3. In the Overview tab, enter the following required information for the Klarna Invoice or Part Payment methods respectively:

    Field name For Klarna Invoice For Klarna Part Payment
    Name Klarna Invoice

    Klarna Part Payment
    Description Klarna Invoice payment gateway Klarna Part Payment gateway
    System Keyword KlarnaInvoice KlarnaPartPayment
    Language

    The language of your choice

    		 The language of your choice
    Class Name EPiServer.Business.Commerce.Payment.
    Klarna.KlarnaInvoice.KlarnaPaymentGateway    		 EPiServer.Business.Commerce.Payment.Klarna.
    KlarnaInvoice.KlarnaPaymentGateway
    Payment Class Mediachase.Commerce.Orders.ExchangePayment Mediachase.Commerce.Orders.ExchangePayment
    IsActive Yes Yes
    IsDefault No No
    Supports Recurring No No
    Restricted Shipping Methods

    Add all

    		 Add all
      
  4. Click OK to save the data.
  5. Go back to the Parameters tab to add more information, see examples below. Note that the Merchant ID and Shared secret string in the sample images are for demonstration, you need to register an account with Klarna to get a live one.
       
    Configuration example for Klarna Part Payment.

        
    Configuration example for Klarna Invoice.
  6. Enter the following required information:
    Field name Description Value

    Test mode

    If you set this flag, an invoice is created in test mode, even if your store is fully operational.
    Recommended for testing without disrupting regular invoicing.

    		 Yes or No
    Merchant ID

    An e-store ID referring to your store in Klarna's database. This ID is provided by Klarna.

    		 Sample value: 2092
    Shared secret

    A shared secret used to secure all traffic exchanged by Klarna and your store. This string is provided by Klarna.

    Sample value: ch98TVhPYqcUUDD
    Allow different address

    If this flag is checked, the EPiServer Commerce system will not verify the address entered by a customer.
    Instead it will depend totally on Klarna to verity the address.

    		 Yes or No
    Update pclasses button Only for Klarna Part Payment: this will update the pclasses from Klarna. Click button to update
       
  7. Click OK to save the data.
  8. Add the following setting to the <system.serviceModel >\<services > node to the web.config of your Commerce front-end site:
       
    <service behaviorConfiguration="CommerceSiteBehavior" name="EPiServer.Business.Commerce.Payment.Klarna.Services.KlarnaService">
    <endpoint address="" binding="webHttpBinding"
    contract="EPiServer.Business.Commerce.Payment.Klarna.Services.IKlarnaService"
    behaviorConfiguration="CommerceSiteBehavior" />
    </service>
      
  9. Copy the KlarnaService.svc file in the Klarna\Services folder to the Services folder in your Commerce front-end site.

Updating the Enoteca Site

The Enoteca sample site must be updated in order for the Klarna payment provider to work properly. Follow the steps below to update the site.

Copy these lines of code below to:

  • \Templates\Enoteca\Scripts\jquery.paymentstep.js file in Commerce front-end site (Enoteca) at line 22
  • \Templates\Enoteca\Units\Placeable\CheckoutPaymentStep.ascx file in Commerce front-end site (Enoteca) at line 172

    // We cannot bind checkout.onStepChanged event in PaymentMethod because of issue [attempt to run compile-and-go script on a cleared scope]
    // (the cause of this issue is that we use iframe in payment method container and in this iframe we have post-back action)
    // Therefore we provide window.UpdatePaymentUIFunctions as list of functions so every payment methods
    // can register then their functions can be invoked directly from the parent window.
    for (var delegateFunction in window.UpdatePaymentUIFunctions)
    {
    window.UpdatePaymentUIFunctions[delegateFunction]();
    }

  
Using Klarna Part Payment

When you have deployed and configured the Klarna payment provider, it will appear as an option in the checkout procedure. See below for examples of how Klarna Part Payment appears with different country settings.

Placing an order

  1. Add item(s) to a shopping basket and proceed to checkout.
  2. Select a shipping address, shipping option and continue to payment options.
  3. Depending on your current country in the billing address, different forms for input will appear.

Sweden, Finland, Denmark and Norway

The following applies for customers from Sweden, Finland, Denmark and Norway:

  1. In the Payment Method section, select the Klarna Part Payment option.
  2. In the field Social Security No, enter your social security number.
  3. Click Continue to place the order. NOTE that Klarna Part Payment will not accept a company account.

Netherlands and Germany

The following applies for customers from Netherlands and Germany:

  1. In the Payment Method section, select the Klarna Part Payment option.
  2. Enter Gender, Date of birth, House number and House extension (optional).
  3. Click Continue to place the order.
      
  4. If your order is processed successfully, you will see your order number. An e-mail is also sent to you to confirm your order.
      

       
  5. If you are a store owner, you can see the details of the order in the invoice part of the Klarna system. You can use the TestPerson from Klarna for testing, find out more here: http://integration.klarna.com/en/testing/test-persons.

Using Klarna Invoice

When you have deployed and configured the Klarna payment provider, it will appear as an option in the checkout procedure. See below for examples of how Klarna Invoice appears with different country settings.

Placing an order

  1. Add item(s) to a shopping basket and proceed to checkout.
  2. Select a shipping address, shipping option and continue to payment options.
  3. Depending on your current country in the billing address, different forms for input will appear.

Sweden, Finland, Denmark and Norway

The following applies for customers from Sweden, Finland, Denmark and Norway:

  1. In the Payment Method section, select the Klarna Invoice option.
  2. In the Social Security No field, enter a Company registration no for a company, then click Continue to select an address from the list.
  3. Click Continue again to place the order.
      

Netherlands and Germany

The following applies for customers from Netherlands and Germany:

  1. In the Payment Method section, select the Klarna Invoice option.
  2. Enter Gender, Date of birth, House number and House extension (optional).
  3. Click Continue to place the order.
        
    f
  4. If your order is processed successfully, you will see your order number. An e-mail is also sent to you to confirm your order.
  5. If you are a store owner, you can see the details of the order in the invoice part of the Klarna system. You can use the TestPerson from Klarna for testing, find out more here: http://integration.klarna.com/en/testing/test-persons.

Go to the beginning of the page