Como configurar a Klarna

A Klarna é um método de pagamento que permite pagamentos em X dias e em parcelas. Este guia está dividido em quatro secções: criar uma conta, configurar a Klarna Payments como gateway de pagamento, capturar pagamentos, e configurar mensagens on-site.

Criar uma conta e obter as chaves importantes para a integração

Para se registar na secção comercial da Klarna, vá ao website da Klarna e clique no botão “Começar”. Terá de fornecer o seu endereço de email, URL da sua loja (ou seja, o endereço da sua loja na internet), o país onde a sua loja está baseada, e uma estimativa do seu rendimento anual. No ecrã seguinte, terá de selecionar o seu tipo de negócio: a opção mais comum é “Nenhuma das anteriores”.

De seguida, terá de selecionar a sua plataforma. Seleccione “Outras soluções de integração” e escolha o Jumpseller. Se não vir o Jumpseller, seleccione “Own built integration”. Clique em Seguinte e complete as restantes perguntas. A sua conta ficará pendente até que o Klarna confirme a sua criação, normalmente por e-mail. Responda às questões restantes e a sua conta ficará pendente até que a Klarna confirme a sua criação, normalmente através do envio de um email.

Quando já for possível entrar no seu portal de comerciante da Klarna irá ver a seguinte página:

Para melhorar a segurança da sua conta, recomendamos adotar medidas de segurança, tais como a ativação de autenticação de dois fatores.

Para configurar a sua loja com o Klarna Payments, vá à secção “Definições” no menu lateral e, em seguida, vá para a subsecção “Credenciais API Klarna”. Aqui, pode criar as chaves necessárias para ligar a sua loja à Klarna Payments.

Depois de criar um novo par de credenciais, é importante guardar a Chave e a Palavra-passe num local seguro. Tenha em atenção que a palavra-passe só será visível nesta fase. Se se esquecer ou perder a Palavra-passe, terá de gerar um novo par de credenciais.

Configurar a Klarna como um gateway de pagamento na sua loja Jumpseller

Para ligar a sua loja Jumpseller à Klarna, no seu Painel de administração da Jumpseller vá a Checkout > Pagamentos, selecione a Klarna e clique “Adicionar método”.

Em seguida, insira o Nome de utilizador da API (UID) no campo ID do vendedor e a Palavra-passe da API no campo Segredo partilhado.

Nesta página, também há um campo para colocar o url dos termos e condições. Este url deve ter o formato do URL da sua loja + “/termos-e-condicoes”. Por exemplo: https://minhalojajumpseller.pt/termos-e-condicoes.

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

Definições de EMD e captura automática

A secção EMD (Extra merchant data)

Estes campos não são obrigatórios para a Jumpseller. No entanto, pode ser necessário marcar um ou mais, com base no seu contrato com a Klarna. Para obter mais informações sobre um determinado EMD, pode clicar na hiperligação junto do mesmo.

Após adicionar as suas credenciais, encontrará algumas caixas EMD para verificar. Em alguns casos, a Klarna requer informações adicionais sobre o cliente e a compra para realizar uma avaliação de risco correta. Essas informações, conhecidas como dados extras do comerciante (EMD), podem incluir dados sobre o cliente que está efetuando a transação, os produtos/serviços associados à transação ou o vendedor e suas afiliadas. Selecione as opções de acordo com o seu caso. Se precisar de informações adicionais sobre isso, clique no link “aqui” no final de cada pacote EMD.

Captura automática

Ao capturar uma encomenda, está a confirmar à Klarna que a encomenda foi enviada. Isto significa que os produtos encomendados foram enviados para o cliente e que este os recebeu. Ao mesmo tempo, informa a Klarna de que é necessário acionar um pagamento e cobrar a encomenda ao cliente.

Se esta secção for deixada em branco (default option), o processo de captura do pagamento tem de ser feito manualmente a partir do portal Klarna.

Depois de guardar as definições, recomendamos vivamente a criação de uma transação de teste. Se conseguir navegar com êxito para o portal Klarna enquanto cliente, isto é uma confirmação de que a integração foi bem sucedida.

Se, depois de seguir estes passos, encontrar um erro durante a transação, contacte a nossa equipa de apoio. Certifique-se de que inclui o URL da sua loja e, se possível, anexe uma captura de ecrã que ilustre o erro.

Capturar pagamentos

Quando um cliente cria uma encomenda utilizando a Klarna na sua loja, o estado da encomenda na Jumpseller será marcado como “Pago” se a Klarna autorizar a transação.

No entanto, tenha em atenção que uma transação autorizada não garante que irá receber os fundos. É necessário capturar manualmente a transação no ecrã de gestão de encomendas na sua conta Klarna para receber o pagamento. Somente os pedidos totalmente capturados resultarão na disponibilização dos fundos.

Opcional: Configurar o envio de mensagens on-site

Para informar os seus clientes sobre a integração da Klarna, pode adicionar elementos visualmente apelativos à sua loja. No entanto, o processo de configuração pode não ser simples, uma vez que depende do tema que instalou. Cada tema tem a sua própria estrutura.

Neste guia, mostraremos como adicionar elementos ao Tema Simple. Se necessitar de assistência adicional com o design, não hesite em solicitar um orçamento à nossa equipa de apoio.

Recomendamos que coloque os elementos da Klarna nas seguintes secções da sua loja:

1. Em todo o website (rodapé e cabeçalho): Isto informará os seus clientes sobre a integração da Klarna e as suas vantagens.
2. Página do produto: Apresente aqui as condições da Klarna e os valores das prestações.
3. Carrinho: Agrupar o valor total da encomenda e apresentar ao cliente uma oferta de prestações com a Klarna.

Ao adicionar elementos da Klarna nestas secções, pode garantir que os seus clientes estão bem informados sobre as opções de pagamento disponíveis e pode aumentar potencialmente a probabilidade de concluírem uma compra.

Para começar, é necessário adicionar as opções de tema que melhor se ajustam à sua loja. Siga estes passos:

1. Vá para o seu Painel de Administração da Jumpseller e navegue para Temas > Editor de Código.
2. No Editor de código, navegue até Configuração > options.json.
3. No penúltimo } adicione uma , e pressione enter, aí cole o seguinte código, certificando-se de que está no interior do ú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"
          }
        ]
      }
    }
  }

Depois disso, vá para o painel de administração da Jumpseller e navegue até Temas > Editor Visual. Dentro do Editor Visual, vá para Configurações Gerais > Editar Configurações e desça até ao final da lista. Verá Klarna On-site messaging e aí pode preencher as informações apropriadas. Quando acabar, não se esqueça de clicar em “Gravar”.

Como posso obter o ID de cliente para OSM (On-site messaging)?

No painel da Klarna vá a Mensagem no local, selecione a sua loja, clique em “get started” e copie o client id.

Agora, volte ao Painel de Administração e vá a Temas > Editor de Código > Modelos > Layout. Aqui, localize o <body> e cole o código da Klarna abaixo, sem apagar qualquer outro código. Não se esqueça de colar por baixo do <body> de abertura, e não o </body> de abertura.

{% 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á que os outros snippets de código funcionem.

Em todo o site (rodapé e cabeçalho)

Em primeiro lugar, vamos adicionar a “Compra agora. Paga depois com Klarna” ao cabeçalho do nosso 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 -->

No seu Editor de código > Parciais > header_area.liquid, remova as linhas 1 e 8 e substitua a linha 5 pelo código acima.

Página do produto

Neste exemplo, adicionaremos uma notificação à página do produto usando o seguinte snippet. Observe que este guia é específico para o tema Simple e que outros temas podem exigir ajustes.

Para adicionar a notificação, vá ao seu Editor de código > Modelos > Produto > Predefinido e cole o seguinte 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 sempre, certifique-se de que não exclui outro código. Cole o código por volta da linha 373, antes do código {% if product.custom_fields != empty %} code.

Se o seu produto tiver variantes com preços diferentes, como um produto com tamanhos e preços diferentes, terá de efetuar um ajuste avançado. Recomendamos vivamente que contacte a nossa equipa de apoio para obter assistência, de modo a evitar potenciais erros.

No entanto, se pretender efetuar estes ajustes por si próprio, terá de encontrar uma função de callback que seja acionada sempre que um cliente escolher uma variante de produto.

Em seguida, na secção do preço, adicione as seguintes linhas:

• Abaixo do preço sem secção de desconto

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

• Abaixo da secção de preços com desconto

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

• Antes do fim da função

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

Deverá ter um aspecto semelhante à imagem seguinte:

Página do carrinho

Esta é a mais simples, copie o seguinte 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 %}

E cole no seu Editor de código > Modelos > Pagamentos > Carrinho. Por exemplo, aqui deve ser colocado na linha 187.

Após todas estas alterações, a sua loja deve apresentar as notificações da Klarna da seguinte forma:

Para garantir que todas as alterações efetuadas são guardadas, lembre-se de clicar no botão guardar após cada modificação. Em alguns casos, pode ser necessário ajustar o design de determinados elementos em páginas específicas para melhorar a experiência geral do utilizador. Se tiver alguma dificuldade em fazê-lo, não hesite em contactar a nossa equipa de apoio para obter assistência.