Cómo configurar Klarna

Klarna es un método de pago que permite pagos en X cantidad de días y a plazos, dependiendo de la elección de los clientes finales. Esta guía se divide en cuatro secciones: creación de la cuenta, configuración de Klarna Payments como pasarela de pago, captura de pagos y configuración de la mensajería on-site.

Crea una cuenta y obtén las credenciales para la integración

Debes suscribirte a la sección de empresas de Klarna, una vez seleccionado el portal Para empresas ve al la sección de “Empezar”. Tendrás que indicar tu dirección de correo electrónico, la URL de tu tienda (es decir, la dirección de tu tienda en Internet), el país en el que estés ubicado y una estimación de tus ingresos anuales. En la siguiente pantalla, tendrás que seleccionar tu tipo de negocio: la opción más común es “Ninguno de los anteriores”.

En la siguiente pantalla, tendrás que seleccionar tu plataforma. Marca la opción de “Other integrations solutions” y selecciona Jumpseller. Si no ves Jumpseller, simplemente selecciona “Own built integration” ve a la siguiente opción, revisa la información y presiona “Create account”. Completa las preguntas restantes, y tu cuenta estará pendiente hasta que Klarna confirme su creación, generalmente por correo electrónico.

Una vez que pueda iniciar sesión en tu Klarna Merchant Portal, verá la siguiente pantalla:

Para mejorar la seguridad de tu cuenta, te recomendamos seguir medidas de seguridad como habilitar la autenticación de dos factores 2FA.

Para configurar su tienda con Klarna Payments, vaya a la sección Configuración del menú de navegación y, a continuación, vaya a la subsección Credenciales de API de Klarna. Aquí puedes crear las claves necesarias para conectar tu tienda con Klarna Payments.

Una vez que hayas creado las credenciales, es importante que guardes la clave y la contraseña en un lugar seguro. Ten en cuenta que la contraseña sólo será visible en esta fase. Si olvida o pierde la contraseña, tendrá que generar un nuevo par de credenciales.

Configura Klarna como Pasarela de Pagos en tu tienda Jumpseller

Para conectar tu tienda Jumpseller con Klarna Payments, ve a tu Panel de Administración Jumpseller y después: Configuración > Pagos. Luego, inserta tu Nombre de Usuario de la API de Klarna (UID) en el campo ID de Comerciante y tu Contraseña de la API de Klarna en el campo “shared secret”.

En esta pantalla, también encontrarás enlaces para los términos y condiciones. Estos enlaces deben tener el formato de la URL de tu tienda + “/terms-and-conditions”. Por ejemplo: https://myjumpsellerstore.com/terms-and-conditions

Se necessário, pode sempre editar estes termos e condições indo ao Painel de Administração da Jumpseller e clicando em “Legal”.

Después de guardar la configuración, te recomendamos encarecidamente que crees una transacción de prueba. Si puede navegar con éxito al portal de Klarna como cliente, esto es una confirmación de que la integración se ha realizado correctamente.

Configuración EMD y Autocaptura

EMD (Extra merchant data)

Estos campos obligatorio para Jumpseller. Sin embargo, se te puede requerir que marques uno o más, basado en tu contrato con Klarna. Para obtener más información sobre un determinado EMD puede hacer clic en el link junto a cada EMD

En algunos casos, Klarna necesita información adicional sobre el cliente y la compra para realizar una correcta evaluación del riesgo. Esta información, denominada “Extra merchant data” o datos comerciales adicionales (EMD), puede consistir en datos sobre el cliente que realiza la transacción, el producto/servicio asociado a la transacción o el vendedor y sus filiales.

Si deseas conocer más información sobre estom puedes hacer click en el hipervínculo “here” y se desplegará información sobre cada paquete EMD de Klarna

Autocaptura

Cuando capturas un pedido, confirmas a Klarna que el pedido se ha despachado . Esto significa que han enviado los productos solicitados a tu cliente y los ha recibido . Al mismo tiempo, le permite a Klarna saber que deben activarle un pago y cobrar al cliente el importe del pedido.

Si esta sección se deja en blanco entonces el proceso de capturar el pago lo debes hacer manualmente desde tu portal de Klarna.

Si, después de seguir estos pasos, te encuentras con un error durante la transacción, ponte en contacto con nuestro equipo de soporte. Asegúrese de incluir la URL de tu tienda y, si es posible, adjuntar una captura de pantalla que ilustra el error.

Captura de Pagos

Una vez que un cliente crea un pedido usando Klarna en tu tienda, el estado del pedido en Jumpseller será marcado como Pagado si Klarna autoriza la transacción. Sin embargo, tenga en cuenta que una transacción autorizada no garantiza que recibirás los fondos.

Debes capturar manualmente la transacción en la pantalla de gestión de pedidos en tu cuenta de Klarna para recibir el pago. Sólo los pedidos totalmente capturados darán lugar a la liberación de fondos. (Esto aplica según lo que hayas marcado en la opción de autocaptura mencionada anteriormente).

Configurar la mensajería on-site

Para informar a tus clientes sobre la integración de Klarna, puedes añadir fragmentos visualmente atractivos a tu tienda. Sin embargo, el proceso de configuración puede no ser sencillo, ya que depende del tema que hayas instalado. Cada tema tiene su propia estructura.

En esta guía, te mostraremos cómo añadir fragmentos en el tema Simple. Si necesitas más ayuda con el diseño, no dudes en solicitar un presupuesto a nuestro equipo de soporte.

Recomendamos colocar los snippets o fragmentos de Klarna en las siguientes secciones de su tienda:

1. Sitewide (Footer y Header): Esto informará a tus clientes sobre la integración de Klarna y sus beneficios.
2. Página de producto: Muestra aquí las condiciones de Klarna y los valores de los plazos.
3. Carrito: Consolida el valor total del pedido y proporciona una oferta de pago a plazos con Klarna al cliente.

Al añadir los snippets o fragmentos de Klarna en estas secciones, puedes asegurarte de que tus clientes están bien informados sobre las opciones de pago que tienen a su disposición, y esto puede aumentar potencialmente la probabilidad de que completen una compra.

Para empezar, tienes que añadir las opciones de tema que mejor se adapten a tu tienda. Sigue estos pasos:

1. Ve a tu Panel de Administración de Jumpseller y navega a Temas > Editor de Código.
2. Dentro del Editor de Código, navega a Config > options.json.
3. En el penúltimo } agrega una , y luego presiona enter, ahí pegarás el siguiente código, asegúrate que esté contenido dentro del último }.

"Klarna On-site messaging": {
    "icon": "credit-card",
    "help": "",
    "options": {
      "klarna_enable": {
        "name": "Enable Klarna On-site messaging",
        "type": "checkbox",
        "help": "On-site messaging (OSM) is a tool used to let customers know that Klarna is available on your website.",
        "default": false
      },
      "klarna_merchant_id": {
        "name": "Client ID",
        "type": "input",
        "help": "A client ID (is a unique client identification code assigned to every merchant using Klarna.",
        "default": ""
      },
      "klarna_design_theme": {
        "name": "Klarna Theme",
        "type": "select",
        "help": "Theme will be used to define which style of OSM to be used.",
        "default": "automatic",
        "options": [
          {
            "Automatic": "automatic"
          },
          {
            "Dark": "dark"
          },
          {
            "Light": "light"
          }
        ]
      },
      "klarna_placement_type": {
        "name": "Placement Type",
        "type": "select",
        "help": "A unique identifier of a placement's type and size.",
        "default": "credit-promotion-badge",
        "options": [
          {
            "Credit Promotion Badge": "credit-promotion-badge"
          },
          {
            "Top Strip Promotion Badge": "top-strip-promotion-badge"
          }
        ]
      },
      "klarna_locale": {
        "name": "Locale",
        "type": "select",
        "help": "Billing country code of the ad",
        "default": "US",
        "options": [
          {
            "AT": "AT"
          },
          {
            "BE": "BE"
          },
          {
            "CH": "CH"
          },
          {
            "CZ": "CZ"
          },
          {
            "DE": "DE"
          },
          {
            "DK": "DK"
          },
          {
            "ES": "ES"
          },
          {
            "FI": "FI"
          },
          {
            "FR": "FR"
          },
          {
            "GB": "GB"
          },
          {
            "GR": "GR"
          },
          {
            "IE": "IE"
          },
          {
            "IT": "IT"
          },
          {
            "NL": "NL"
          },
          {
            "NO": "NO"
          },
          {
            "PL": "PL"
          },
          {
            "PT": "PT"
          },
          {
            "SE": "SE"
          },
          {
            "CA": "CA"
          },
          {
            "MX": "MX"
          },
          {
            "US": "US"
          },
          {
            "AU": "AU"
          },
          {
            "NZ": "NZ"
          }
        ]
      }
    }
  }

Después de eso, ve a tu Panel de Administración de Jumpseller y navega a Temas > Editor Visual. Dentro del Editor Visual, ve a Configuración General y desplázate hacia abajo hasta el final de la lista. Verás Klarna On-site messaging, y puedes llenar la información que se solicita que la obtienes de tu cuenta de Klarna.

¿Cómo puedo obtener el ID de cliente para OSM On-site-messaging?

En el panel de Klarna ve a OSM, seleccione a su tienda, haga clic en “empezar” y copie el ID de cliente.

Ahora, regresa a tu Panel de Administración de Jumpseller y navega a Temas > Editor de Código > Plantillas > Diseño. Aquí, localiza la etiqueta o tag <body> y pega el código base de Klarna justo debajo del tag sin borrar ningún otro código. Asegúrate de pegarlo debajo de la etiqueta <body> de apertura, y no la etiqueta </body> de cierre.

{% if options.klarna_enable == true %}
<script
  async
  data-environment="production"
  src="https://osm.klarnaservices.com/lib.js"
  data-client-id="{{options.klarna_merchant_id}}"
></script>
{% endif %}

Este código permitirá el funcionamiento de los otros snippets

Sitewide (Pie y Encabezado)

En primer lugar, vamos a añadir el mensaje “Comprar ahora, pagar más tarde con Klarna” a la cabecera de nuestro tema.

<!-- Placement v2 -->
<klarna-placement
  data-key="top-strip-promotion-auto-size"
  data-locale="{{languages.first.code}}-{{options.klarna_locale}}"
  data-theme="{{options.klarna_design_theme}}"
></klarna-placement>
<!-- end Placement -->

En tu Editor de Código > Parciales > header_area.liquid, elimina las líneas 1 y 8 y sustituye la línea 5 por el código anterior.

Página de producto

En este ejemplo, añadiremos una notificación a la página del producto utilizando el siguiente fragmento. Tenga en cuenta que esta guía es específica para el tema Simple y que para otros temas pueden requerir ajustes.

Para añadir la notificación, vaya a su Editor de Código > Plantillas > Producto > Predeterminado y pegue el siguiente código:

{% if options.klarna_enable == true %}
<klarna-placement
id="klarna-price"
data-key="{{options.klarna_placement_type}}"
data-locale="{{languages.first.code}}-{{options.klarna_locale}}"
data-purchase-amount="{% if product.discount > 0 %}{{ product.price | minus:product.discount | times: 100 | round: 0}}{%else%}{{product.price | times: 100 | round: 0 }}{%endif%}"
data-theme="{{options.klarna_design_theme}}"
></klarna-placement>
{% endif %}

Como siempre, asegúrate de no borrar otro cosa. Pega el código alrededor de la línea 373, antes del código {% if product.custom_fields != empty %}.

Si tu producto tiene variantes con diferentes precios, por ejemplo un producto con diferentes tamaños y precios, necesitarás hacer un ajuste avanzado. Recomendamos encarecidamente que te pongas en contacto con nuestro equipo de soporte para que te ayude a evitar posibles errores.

Sin embargo, si deseas realizar estos ajustes tú mismo, necesitarás encontrar una función callback que se active cada vez que un cliente elija una variante del producto.

A continuación, en la sección de precios, añade las siguientes líneas:

• Por debajo del precio sin descuento

{% if options.klarna_enable == true %}
$("#klarna-price")[0].dataset.purchaseAmount = productInfo.price * 100;
{% endif %}

• Por debajo del precio con descuento

{% if options.klarna_enable == true %}
$("#klarna-price")[0].dataset.purchaseAmount = (productInfo.price - parseFloat(productInfo.discount)) * 100;
{% endif %}

• Antes del final de la función

{% if options.klarna_enable == true %}
window.Klarna.OnsiteMessaging.refresh();
{% endif %}

Deberá ser algo parecido a esto:

Página del carrito

Esta es la más simple, copie el siguiente código:

{% if options.klarna_enable == true %}
<!-- Placement v2 -->
<klarna-placement
  data-key="credit-promotion-badge"
  data-locale="{{languages.first.code}}-{{options.klarna_locale}}"
  data-theme="{{options.klarna_design_theme}}"
  data-purchase-amount="{{order.total | times: 100 | ceil }}" 
></klarna-placement>
<!-- end Placement -->
{% endif %}

Y pega en tu Editor de Código > Plantillas > Pagos > Carrito. Por ejemplo, aquí debe estar en la línea 187.

Después de todos estos cambios ahora tu tienda debería mostrar las notificaciones de Klarna así:

Para asegurarse de que se guardan todos los cambios realizados, recuerda hacer clic en el botón Guardar después de cada modificación. En algunos casos, es posible que necesites ajustar el diseño de ciertos elementos en páginas específicas para mejorar la experiencia general del usuario.

Si tienes alguna dificultad para hacerlo, no dudes en ponerte en contacto con nuestro equipo de asistencia para obtener ayuda.