Cómo configurar Klarna

Klarna no es solo una pasarela de pagos. Podemos describirla como un servicio de pago cuyo objetivo es mejorar todo el viaje del cliente en tu tienda. Hemos dividido esta guía en tres partes: Cómo crear una cuenta, cómo configurar Klarna como una pasarela de pagos y cómo configurar el diseño de tu tienda para mostrar los mensajes en el sitio web.

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

Accede a Klarna para empresas y haz clic en el botón “Empezar”. Ingresa tu correo electrónico, la URL de tu tienda (esto es, la dirección web de tu tienda en Internet) y el país en el que tu tienda está ubicada. Luego, selecciona un estimado de tus ingresos anuales y, a continuación, selecciona tu tipo de negocio. La opción más común es “Ninguno de los anteriores”.

En la siguiente pantalla, selecciona la plataforma en la que se encuentra tu tienda en línea. Si no ves Jumpseller o la opción “otros”, selecciona cualquiera de las plataformas disponibles (por ejemplo: WooCommerce), ya que la configuración será la misma sin importar la opción que elijas. Luego, completa el resto de las preguntas y tu cuenta quedará pendiente hasta que Klarna confirme su creación, usualmente a través de correo electrónico.

Una vez que puedas entrar al portal de tu comercio en Klarna, verás esta pantalla:

Sigue las recomendaciones que te indiquen; como la de configurar la autenticación de dos factores, para mejorar la seguridad de tu cuenta.

Ahora, ve a Settings (configuración) en el menú de navegación y luego accede a la subsección de Klarna API Credentials (credenciales API de Klarna). Aquí crearás las credenciales necesarias para conectar tu tienda con Klarna Payments.

Luego de generar un nuevo set de credenciales, asegúrate de guardar la llave y contraseña en un lugar seguro, ya que solamente podrás ver la contraseña en este paso. Si la pierdes o la olvidas, será necesario que generes un nuevo set de credenciales.

Configura Klarna como una pasarela de pagos en tu tienda Jumpseller

Accede a tu panel de administración de Jumpseller > Configuración > Caja > Pagos, selecciona Klarna de la lista desplegable e ingresa tu nombre de usuario de la API de Klarna (UID) en el campo ID de comerciante y tu clave de la API de Klarna en el campo Llave secreta. En esta sección, también deberás especificar el enlace a tu página de términos y condiciones, el cual generalmente tiene el formato URL de tu tienda + /terminos-y-condiciones, por ejemplo:

https://mitienda.jumpseller.com/terminos-y-condiciones

Puedes editar tus términos y condiciones en tu panel de administración de Jumpseller > Personalización > Páginas > Legal.

Luego de guardar tu configuración, te recomendamos que hagas una compra de prueba. Si llegas al portal de Klarna como cliente, entonces la integración ha sido completada de forma exitosa. Por otro lado, si luego de seguir los pasos anteriormente indicados te aparece un error en la transacción, por favor contacta a nuestro equipo de soporte indicando la URL de tu tienda y, si es posible, sería ideal que pudieras adjuntar algunas capturas de pantalla que evidencien el error.

Capturar Pagos

Luego de que un cliente complete un pedido en tu tienda usando Klarna, el estado quedará como “Pagado” en Jumpseller si Klarna autoriza la transacción. No obstante, una transacción autorizada no significa que recibirás los fondos inmediatamente. Lo que tienes que hacer es capturar manualmente la transacción en la pantalla de Orders (pedidos) en tu cuenta de Klarna. Solo recibirás los fondos de pedidos que hayan sido completamente capturados (Fully Captured).

Opcional: Configura los mensajes en el sitio web

Puedes agregar mensajes atractivos a tu sitio web para dar a conocer a tus clientes que tu tienda cuenta con la integración de Klarna. La configuración podría no ser tan simple porque depende del tema que tengas instalado en tu tienda, ya que todos varían en su estructura. Aquí te mostraremos cómo configurar los mensajes en el tema “Simple”, pero recuerda que siempre puedes pedir ayuda a nuestro equipo de soporte.

Agregaremos mensajes en las siguientes secciones de la tienda:

• En todo el sitio web (encabezado y pie de página): Para informar a tus clientes acerca de la integración y los beneficios de Klarna.
• Página de producto: Muestra las condiciones y los valores del pago a plazos.
• Carrito de compras: Consolida el valor total del pedido y muestra una oferta de pago a plazos con Klarna.
• Preguntas frecuentes: Página de información de Klarna.

El primer paso es instalar el código base en tu tienda. En tu Portal del Comercio de Klarna, ve a la sección On-site messaging (mensajes del sitio) > Installation (instalación) y copia el primer código que aparece a la derecha de tu pantalla. Usaremos el segundo más adelante.

Este código permitirá que los mensajes en tu sitio funcionen. Ahora, regresa a tu panel de administración > Personalización > Temas > Editor de código > Plantillas > Diseño. En esta plantilla, necesitarás encontrar la etiqueta <body> y pegar el código base de Klarna justo abajo. Asegúrate de pegarlo debajo de la etiqueta <body> y no de la etiqueta </body>, sin eliminar ningún otro código.

En todo el sitio web (encabezado y pie de página)

Ahora, vamos a pegar el mensaje Compra ahora, paga después con Klarna. en la cabecera de nuestro tema. Este es el código que encontrarás en la sección On-site messaging (mensajes del sitio) > Placements (ubicaciones). En este ejemplo, elegimos el tema oscuro para esta ubicación específica.

<!-- Placement v2 -->
<klarna-placement
  data-key="top-strip-promotion-auto-size"
  data-locale="en-PT"
  data-theme="dark"
></klarna-placement>
<!-- end Placement -->

En tu Editor de código > Archivos > Parciales > header_area.liquid, elimina las líneas 1 y 9 y reemplaza la línea 5 con el código que indicamos anteriormente.

En el pie de página, no es necesario agregar ningún código. Solo necesitas agregar el logo de Klarna desde tu panel de administración > Personalización > Temas > Galería > Tema Actual > Personalizar > Editar Opciones > Pie de Página.

Página de Producto

En este ejemplo, usaremos el mensaje que te permitirá tener una notificación dentro de la página de producto. Recuerda que esta guía está enfocada en el tema “Simple”, otros temas podrían necesitar más ajustes.

En tu Editor de código > Plantillas > Producto > Estándar tienes que pegar el siguiente código en dos lugares en específico:

 <!-- Placement v2 -->
 
<klarna-placement
  data-key="credit-promotion-badge"
  data-locale="en-PT"
  data-purchase-amount="{{product.price | times: 100 }}"
></klarna-placement>
<!-- end Placement -->

El primer lugar será debajo de la línea 43, mientras que el segundo será en la línea 134. Como siempre, asegúrate de no eliminar ningún otro código.

Si tu producto tiene variantes con diferentes precios (por ejemplo, un producto con diferentes tallas y precios), será necesario hacer algunos ajustes avanzados. Te recomendamos contactar a nuestro equipo de soporte para evitar complicaciones por posibles errores, pero si de todas formas quieres hacerlo por tu cuenta, necesitarás buscar la función “callback” que se desencadena cada vez que el cliente elije una variante de producto y agregar estas líneas en la sección de precio:

• Debajo de la sección de precio sin descuento

$("klarna-placement").data('data-purchase-amount',productInfo.price)
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });

• Debajo de la sección de precio con descuento

$("klarna-placement").data('data-purchase-amount',productInfo.price_discount)
window.KlarnaOnsiteService.push({ eventName: 'refresh-placements' });

Página del Carrito de compra

Este es el paso más sencillo. Copia el código a continuación:

<!-- Placement v2 -->

<klarna-placement
data-key="credit-promotion-badge"
data-locale="en-PT"
data-purchase-amount="{{order.total | times: 100 }}"
></klarna-placement>

<!-- end Placement -->

Y pégalo debajo de la línea 125 en tu Editor de código > Plantillas > Pago > Carro.

Luego de haber completado todos estos cambios, tu tienda debería mostrar las notificaciones de Klarna tal y como se aprecia a continuación: