Customize KCO iFrame

The customizations available for klarna iframe is described here "extra features" in klarna documentation. However not all the options available may not be supported by the addOn, as Klarna continue to improve their api and add new features and possibilities. If a feature your project require is not yet implemented in current version, please request Litium support.

B2B flow

Klarna need to configure the merchant account to allow B2B flow in KCO. After that, enable allowB2BCustomersInKco setting in the addon .config file.

To render the B2B flow as default in the KCO iframe, use CheckoutOptions.B2bFlowAsDefault (see example below)

To render only B2B flow, use CheckoutOptions.B2bFlow

To pre-populate the organization number, use CheckoutOptions.OrganizationRegistrationId

Following is a demo of above properties using example code from Accelerator 5, MVC file src\litium.accelerator.mvc\app_start\klarnapaymentwidgetconfigv2.cs

 public CheckoutOptions GetCheckoutOptions(OrderCarrier order, Controller controller)
        {
            var checkoutPage = Page.GetFromID(WebsiteSettings.GetInstance(_cart.OrderCarrier.WebSiteID).CheckOutPageId, _securityToken);

            return new CheckoutOptions
            {
                AdditionalCheckBoxText = "Newsletter",
                AdditionalCheckBoxChecked = true,
                //AdditionalCheckBoxRequired = true,

                //set the button color to color of accelerator buttons.
                ColorButton = "#31a6e0",

                B2bFlowAsDefault = true,
                B2bFlow = true,

                OrganizationRegistrationId = "4103219202"
            };
        }

Changing iframe colors

Use the color properties of the KlarnaPaymentArgs.KlarnaCheckoutOptions object. See sample code below.

        private KlarnaPaymentArgs GetPaymentArgs()
        {
            var checkoutPageUrl = CurrentPage.GetUrlToPage(Guid.Empty, CurrentState.IsInAdministrationMode);
            var args = new KlarnaPaymentArgs
            {
                CustomerPersonalNumber = string.Empty, //no ssn.
                KlarnaCampaignCode = -1,
                ExecuteScript = null, //not used
                TermsUrl = GetTermsPageUrl(),
                ConfirmationUrl = string.Format("{0}?{1}={2}", checkoutPageUrl, QueryStringKeyShowReceipt, "True"),
                PushNotificationUrl = string.Format("{0}?{1}={2}", checkoutPageUrl, QueryStringKeyPushNotification, "True"),
                CheckoutUrl = checkoutPageUrl, //if cancelled, go back to checkout page.
                ClientLanguage = (CurrentState.Current != null && CurrentState.Current.WebSite != null) 
                                        ? CurrentState.Current.WebSite.Culture.Name 
                                        : string.Empty,
                BackToStoreUrl = (CurrentPage.WebSite.GetStartPage(CurrentState.Token) ?? CurrentPage.WebSite.GetTopPage(CurrentState.Token)).GetUrlToPage(),
                ValidationUrl = string.Format("{0}?{1}={2}", checkoutPageUrl, QueryStringKeyValidation, "True"),
                UserHostAddress = StudioKlarnaApi.GetClientIP(),
                PaymentMode = ExecutePaymentMode.Reserve,

                //TODO: set the stylling and checkout iframe options using CheckoutOptions object below.
                //you may also set the AdditionalCheckbox option here.
                KlarnaCheckoutOptions = new CheckoutOptions
                {
                    //AdditionalCheckBoxText = "Newsletter",
                    //AdditionalCheckBoxChecked = true,
                    //AdditionalCheckBoxRequired = true,
                    ColorButton = "#31a6e0"
                    
                }
            };          
            return args;
        }

Setting Shipping Information

Use the Litium.Studio.AddOns.Klarna.CheckoutOptions.ShippingDetails property. To set this information use same object and method as done for changing colors above.

Setting Custom Checkbox

Use following properties of Litium.Studio.AddOns.Klarna.CheckoutOptions. To set this information use same object and method as done for changing colors above.

The value end customer is selecting for the checkbox will be saved into AdditionalPaymentInfo of the order with the value of following constant:

Litium.Studio.AddOns.Klarna.KlarnaProvider.AdditionalPaymentInfoKeyKcoAdditionalCheckboxValue

        /// <summary>
        /// Text that will be displayed to the consumer aside the checkbox. (max 255 characters). This text can contain links using the format [Link text](url).
        /// </summary>
        public string AdditionalCheckBoxText { get; set; }

        /// <summary>
        /// Default state of the additional checkbox. It will use this value when loaded for the first time.
        /// </summary>
        public bool AdditionalCheckBoxChecked { get; set; }

        /// <summary>
        /// Whether it is required for the consumer to check the additional checkbox box or not in order to complete the purchase.
        /// if this is set to true, the user has to check this checkbox and cannot leave it unchecked. 
        /// e.g. set to true in cases where user need to agree or need to confirm he has agreed.
        /// </summary>
        public bool AdditionalCheckBoxRequired { get; set; }