Klarna Payment Link

Pre-requisites

• If you develop locally, your site should be accessible to Klarna to receive notifications. Please follow the steps here >>.

Configure

• Enable distributeHppSessionPaymentLink in the config file.
• (Optional) Configure the endpoint to receive the Klarna notifications. The endpoint will be built by using domain of responseUrl or serverCommunicationUrl. So, you can set up domain of serverCommunicationUrl in the Litium.AddOns.Klarna.dll.config file instead.

How it works

This sequence diagram describes both Litium and Klarna using Payment Link.

1. When the buyer confirms the order, the addon will send a request to Klarna to inform that the payment link will be distributed through Email/SMS/QR Code.
2. When the buyer opens the link in Email / SMS / QR Code and complete the payment, Klarna will inform our system that payment is completed.

Choosing payment link distribution option

There are three options for sending the HPP link to the buyer.

• Email (default): An email which contains HPP link, will be sent to the buyer by Klarna.
• SMS: A SMS which contains HPP link, will be sent to the buyer by Klarna.
• QR Code: The QR Code Url will be stored in the AdditionalPaymentInfo of the payment, You can get it and send it to the buyer manually.

The default is to distribute by email. In order to use a different distribution option, you can set it into CheckoutWorkflowInfo, when ExecutePayment is called. See below example on distributing a QR Code.

Distributing a QR Code

When calling PlaceOrder, set the PaymentLinkMethod value to QrCode as below.

checkoutFlowInfo.SetValue(ConstantsAndKeys.PaymentLinkMethodKey, PaymentLinkMethod.QrCode.ToString());
// or
checkoutFlowInfo.SetValue(“PaymentLinkMethod”, "QrCode");

As shown below:

        //Src\Litium.Accelerator\Services\CheckoutServiceImpl.cs
        public override ExecutePaymentResult PlaceOrder(CheckoutViewModel model, string responseUrl, string cancelUrl, out string redirectUrl)
        {
            var shouldRedirect = false;
            var redirectArgs = string.Empty;
            var checkoutFlowInfo = _requestModelAccessor.RequestModel.Cart.CheckoutFlowInfo;
            checkoutFlowInfo.RequireConsumerConfirm = false;
            checkoutFlowInfo.ExecuteScript = (args, redirect) => { redirectArgs = args; shouldRedirect = redirect; };
            checkoutFlowInfo.ResponseUrl = responseUrl;
            checkoutFlowInfo.CancelUrl = cancelUrl;

            var currentLanguage = _languageService.Get(_requestModelAccessor.RequestModel.ChannelModel.Channel.WebsiteLanguageSystemId.Value);
            checkoutFlowInfo.SetValue(CheckoutConstants.ClientLanguage, currentLanguage.CultureInfo.Name);
            checkoutFlowInfo.SetValue(CheckoutConstants.ClientTwoLetterISOLanguageName, currentLanguage.CultureInfo.TwoLetterISOLanguageName);
            
            //setting to use QR code instead...
            checkoutFlowInfo.SetValue(ConstantsAndKeys.PaymentLinkMethodKey, "QrCode");
           
            //other code

            _cartService.PlaceOrder(out PaymentInfo[] paymentInfos);

            //other code
        }

Showing QR code to buyer

You need an additional property, QrCode url in the OrderConfirmationViewModel

 // Src/Litium.Accelerator/ViewModels/Order/OrderConfirmationViewModel.cs
 public class OrderConfirmationViewModel : IAutoMapperConfiguration, IViewModel
    {
        //other code..

        //QR Code url
        public string QrCodeUrl { get; set; }

        //other code..
    }

When building the orderConfirmationViewModel, set the QrCodeUrl property above, if it is found in additional payment info.

 // Src/Litium.Accelerator/Builders/Order/OrderConfirmationViewModelBuilder.cs
 public class OrderConfirmationViewModelBuilder : IViewModelBuilder<OrderConfirmationViewModel>
    {
        //other code..
        
        public OrderConfirmationViewModel Build(PageModel pageModel, Guid orderId)
        {
            var model = pageModel.MapTo<OrderConfirmationViewModel>();
            var order = _moduleECommerce.Orders.GetOrder(orderId, SecurityToken.CurrentSecurityToken);
            if (order != null)
            {
                model.Order = _orderViewModelBuilder.Build(order);

                //Set the QrCodeUrl from AdditionalPaymentInfo.
                model.QrCodeUrl = order.PaymentInfo.SelectMany(s => s.AdditionalPaymentInfo).FirstOrDefault(s => s.AdditionalPaymentInfoKey.Contains("QrCodeUrl"))?.AdditionalPaymentInfoValue;
            }
            return model;
        }
    }

Then, when handling the payment response, need to redirect if it is a payment link. Note that, if it is a payment link, we do not yet have the payment confirmed from the buyer.

        [HttpGet]
        public ActionResult HandleResponse()
        {
            //if it is a payment link, redirect to confirmation page.
            if (IsPaymentLink())
            {
                return Redirect(_checkoutService.GetOrderConfirmationPageUrl(_requestModelAccessor.RequestModel.Cart.OrderCarrier));
            }

            var callBackResult = _requestModelAccessor.RequestModel.Cart.PaymentProviderCallbackResult;
            if (callBackResult != null)
            {
                if (!callBackResult.Success)
                {
                    var msg = string.IsNullOrEmpty(callBackResult.ErrorMessage) ? string.Empty : $": {Server.HtmlEncode(callBackResult.ErrorMessage)}";
                    throw new CheckoutException(CheckoutConstants.StringPaymentUnsuccessful.AsWebSiteString() + msg);
                }
                return HandlePaymentResult(callBackResult.Success, callBackResult.ErrorMessage);
            }
            return null;

            bool IsPaymentLink() {
                return _requestModelAccessor.RequestModel.Cart.OrderCarrier.PaymentInfo.Any(
                        p => p.AdditionalPaymentInfo.Any(i => i.Key == "DistributeHppSessionPaymentLink"));
            }
        }

Diplay QR Code to buyer

To display the QR code in the confirmation page, change the Src/Litium.Accelerator.Mvc/Views/Order/Confirmation.cshtml as follows.

@model Litium.Accelerator.ViewModels.Order.OrderConfirmationViewModel

<div class="row">
    <div class="small-12 columns">
        <div class="simple-table order-summary">
           <!--other code -->
        </div>

        @Html.Partial("_OrderSummary", Model.Order)

        <div class="simple-table order-summary">
            <div class="row medium-unstack no-margin simple-table__header">
                <div class="columns small-12 medium-6">
                    @Html.WebSiteString("orderdetail.information")
                </div>
            </div>
            @if (!string.IsNullOrEmpty(Model.QrCodeUrl))
            {
                <div class="row small-unstack no-margin">
                <div class="columns small-12">
                    <p>Please scan QR code to complete the payment.</p>
                    <img src="@Model.QrCodeUrl" alt="qrcode" width="200" height="200"/>
                </div>
            </div>
            }
            <div class="row small-unstack no-margin">
                <div class="columns small-12">
                    @Model.Text
                </div>
            </div>
        </div>
    </div>
</div>

The QR code is a URL, which you can scan from your phone and it will open the Klarna HPP at Klarna to complete the payment. Klarna shows the payment receipt, and the buyer is not redirected to the ECommerce site.

Payment status at Litium: In Litium, it may take several minutes before the payment status is updated. Klarna is notifying Litium about the payment completion through a background server to server status notification call.