Klarna Checkout [BigCommerce React Native]

Klarna Checkout [BigCommerce React Native]



Please make sure you set up the same tax settings in BigCommerce Control Panel and JMango360 Back Office; otherwise, Klarna Checkout will not work correctly.

Klarna Checkout allows you to provide your customers with truly smooth purchase experiences. This article shows how to integrate your BigCommerce React Native App with Klarna Checkout to let your customers take payments via Klarna.



React Native version: 3.5.2

Step 1. Generate API credentials in Klarna Merchant Portal

API credentials are required to authenticate with Klarna when placing orders for your app.



Do the following to generate API credentials:
  1. Log in to Klarna Merchant Portal and navigate to Preferences > Settings > Credentials.
  2. Click Generate new API credentials, then save the credentials to your computer for later use.

Step 2. Enable Klarna Checkout in JMango360 Back Office

Apart from standard checkout and web checkout, you can now make use of Klarna Checkout as a checkout method in your app.



Do the following to enable Klarna Checkout:
  1. Log in to JMango360 Back Office and navigate to Settings > Checkout Settings > Select checkout option > Enable Klarna checkout.
  2. Set up Klarna Checkout.
    1. Region: Currently only Europe region is supported.
    2. Environment: The environment specifies where requests via the API should be directed - sandbox/playground or production. Each environment requires a different set of API credentials.
    3. Username (UID): The username linked to your Merchant ID at Klarna. Please find the username in the *.txt file you downloaded in the first step.
    4. Password: A unique password that is associated with the username. Please find the username in the *.txt file you downloaded in the first step.
    5. Display name: The title shown in the top bar of Klarna Checkout screen in app.
    6. Test Settings: After filling in the required information, click this button to check if the API credentials are valid.
    7. Specify allowed countries: Select the billing countries where you allow to use Klarna Checkout. The store country is selected by default and cannot be excluded from the allowed country list.
  3. Click Save Changes.

Step 3. Configure tax settings for Klarna Checkout

Tax configuration is needed for Klarna Checkout. Please set up tax zones, tax rates, and other tax settings in JMango360 Back Office > Settings > Tax Settings. Make sure you set up the same tax zones and tax rates in both JMango360 Back Office and BigCommerce Control Panel.

For details about tax settings, please see BigCommerce tax settings.

Apart from other common tax settings, once you enable Klarna Checkout, a setting for shipping cost tax becomes available so you can specify a tax class to calculate shipping and handling costs (if any). In Tax Settings > Tax Configuration, select a tax class which will be applied to both shipping and handling charges during checkout.


How to track orders paid with Klarna?

Klarna order ID can be found in both BigCommerce Control Panel and Klarna Merchant Portal. In BigCommerce Control Panel > Orders > View Orders just click the plus icon to the left of an order to expand the details of that order. Klarna order ID is placed under the first column which shows the order's billing information. 



You can use this Klarna order ID to search for the order in Klarna Merchant Portant. 


    • Related Articles

    • BigCommerce tax settings [React Native]

      Settings available in JMango360 Back Office > Settings > Tax Settings. App's tax settings control how taxes are calculated and shown on your app. JMango360 allows you to display tax in several pages within your app, including product list, product ...

    • Klarna Checkout for BigCommerce PWA

      Please make sure you set up the same tax settings in BigCommerce Control Panel and JMango360 Back Office; otherwise, Klarna Checkout will not work correctly. Klarna Checkout allows you to provide your customers with truly smooth purchase experiences. ...

    • BigCommerce native payment: Braintree

      Settings available in JMango360 Back Office > Settings > Native Payment Settings. While there are multiple solutions for processing payments via mobile apps, Braintree stands out as the one of the most efficient payment systems. Knowing that, we are ...

    • Supported product YouTube videos in product details - BigCommerce React Native

      Videos can reach out to potential customers in a way that still images and written product descriptions can’t. Knowing that, we have recently supported product YouTube videos on our BigCommerce React Native Apps. React Native version: 3.8.0 In ...

    • BigCommerce PWA tax settings

      Settings available in JMango360 Back Office > Settings > Tax Settings. PWA's tax settings control how taxes are calculated and shown on your PWA. JMango360 allows you to display tax in several pages within your PWA, including product list, product ...