Configurar gateway CyberSource IO

10 min de leitura

A Cybersource é uma empresa que oferece diversas soluções para auxiliar a gestão de pagamentos da sua loja. Entre elas estão um gateway e um antifraude, ambos com integrações disponíveis na VTEX.

Caso deseje maiores informações sobre como integrar o antifraude da Cybersource em sua loja, acesse Configurar antifraude Cybersource.

Para utilizar o gateway da Cybersource IO em sua loja, as seguintes ações são necessárias:

Instalar os aplicativos Cybersource IO (VTEX IO CLI)
Criar as chaves de autenticação na Cybersource (Cybersource environment)
Realizar as configurações do app Cybersource (Admin VTEX)
Configurar o gateway Cybersource (Admin VTEX)
Configurar a condição de pagamento (Admin VTEX)
Configurar o Device Fingerprint (opcional)
Configurar campos do merchant (opcional)

Instalando apps da Cybersource

Os seguintes apps da Cybersource devem ser instalados na conta de sua loja:

vtex.cybersource-ui
vtex.cybersource
vtex.cybersource-payer-auth

Caso você pretenda utilizar o sistema de antifraude da Cybersource, mas deseja transacionar os pagamentos em um gateway que não seja o da Cybersource, será necessário instalar o app vtex.cybersource-fraud.

Saiba mais como instalar aplicativos em uma conta VTEX em Installing an app.

Criando chaves de autenticação na Cybersource

Após a instalação dos apps você deve criar as chaves de autenticação no ambiente da Cybersource.

As configurações realizadas em um ambiente externo à VTEX podem ser descontinuadas ou modificadas sem aviso prévio. Consulte sua conta na Cybersource para informações atualizadas.

Siga os passos abaixo:

Acesse o painel EBC (Enterprise Business Center) da Cybersource com os seus dados.
No painel de navegação lateral, selecione Payment Configuration > Key Management.
Clique em Generate Key.
Em REST APIs, selecione a opção REST - Shared Secret.
Clique em Generate Key.
Clique em Download key ou copie as informações das chaves utilizando a função copiar localizada a frente dos campos Key e Shared Secret.

Configurando o app Cybersource IO

Com as chaves de autenticação disponíveis, é o momento de realizar a configuração do app Cybersource IO no Admin.

${"base64":" ","img":{"width":1595,"height":817,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","orientation":1,"length":101003,"url":"//images.ctfassets.net/alneenqid6w5/53S98k6G5yOwOJrAO4ueiF/635fe1762fa5be2e9c6c118f5245cb39/Cybersource_Admin_settings_PT.JPG"}}$

Siga os passos abaixo para configurar o app Cybersource IO:

No Admin VTEX, acesse Aplicativos > Apps Instalados > Cybersource, ou digite Cybersource na barra de busca no topo da página.
Na aba Admin Settings, preencha ou selecione os campos abaixo:

Configurando o gateway Cybersource

Para configurar o gateway Cybersource, siga os passos abaixo:

No Admin VTEX, acesse Configurações da loja > Pagamentos > Provedores, ou digite Provedores na barra de busca no topo da página.
Na tela de provedores, clique no botão Novo provedor.
Digite o nome Cybersource IO na barra de busca e clique sobre o nome do provedor.
Em Autorização do provedor, não é necessário preencher os campos Chave de aplicação e Token de aplicação.
Caso deseje modificar o nome de identificação a ser exibido para o gateway Cybersource na tela do Admin VTEX, insira a informação no campo Nome em Informações básicas.
Em Controle de pagamento, selecione se deseja ativar o gateway em ambiente de teste clicando em Ativar modo de teste.
Em Liquidação automática, selecione uma das seguintes opções:

Configurando condição de pagamento

Para processar pagamentos com cartões de crédito por meio da Cybersource, siga os passos abaixo:

No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
Na aba Condições de Pagamentos, clique no botão +.
Clique sobre o nome do cartão de crédito desejado.
Preencha o campo Nome da condição com um nome de sua preferência para identificação.
Ative a condição no campo Status.
Em Processar com o provedor selecione a opção Cybersource - IO.
Se desejar utilizar um sistema antifraude, selecione a opção Usar solução antifraude e escolha o provedor de sua preferência.
Se desejar, você também poderá configurar condições especiais de pagamento.
Clique em Salvar.

Se você criou anteriormente condições de pagamento com cartão de crédito para outros gateways (incluindo o provedor Cybersource legado), poderá definir essas condições como Inativas. As transações em andamento iniciadas nesse provedor ainda serão processadas por ele, mesmo que esteja inativo. Apenas novas transações serão processadas pelo novo provedor Cybersource IO. Caso você precise reverter para o provedor anterior por qualquer motivo, basta definir as respectivas condições de pagamento como Ativas e as condições de pagamento do Cybersource IO como Inativas.

Configurar Cybersource IO Device Fingerprint (opcional)

Device Fingerprint é um identificador que atua no processamento de um pagamento, tendo como objetivo melhorar a análise do risco de fraude em cada transação.

Por meio da coleta de dados não sensíveis, o Device Fingerprint identifica e analisa o nível de segurança do dispositivo utilizado para realizar a transação, bem como as transações que anteriormente foram realizadas com este mesmo dispositivo.

Cada loja deve ter somente um Device Fingerprint cadastrado. Verifique se você já efetuou o cadastro do Device Fingerprint em outro conector, antes de continuar os passos abaixo.

Para configurar o Device Fingerprint da Cybersource IO, siga os passos abaixo:

No Admin VTEX, acesse Configurações da loja > Storefront > Checkout, ou digite Checkout na barra de busca no topo da página.
Clique no ícone do site desejado.
No menu de opções azul localizado na parte superior da página, clique em Código.
Em Arquivos, clique sobre checkout5.custom.js.
Insira o código abaixo no campo de texto e clique em Salvar.


function addsDeviceFingerPrint() {
  if (!window.vtex) return;
  if (window.vtex.deviceFingerprint) return;
  $.ajax({
    type: 'get',
    async: true,
    url: rootPath() + '/api/sessions?items=*'
  }).then(function(response) {
    var ORG_ID = "{{ORG_ID}}";
    var MERCHANT_ID = "{{MERCHANT_ID}}";
    console.log('session', response);
    window.vtex.deviceFingerprint = response.id;
    var sessionId = response.id || "CYBERSOURCE";
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = `https://h.online-metrix.net/fp/tags.js?org_id=$\{ORG_ID\}&session_id=$\{MERCHANT_ID\}$\{sessionId\}`;
    document.head.appendChild(script);
    var noScript = document.createElement("noscript");
    var iframe = document.createElement("iframe");
    iframe.style = "width: 100px; height: 100px; border: 0; position: absolute; top: -5000px;";
    iframe.src = `https://h.online-metrix.net/fp/tags?org_id=$\{ORG_ID\}&session_id=$\{MERCHANT_ID\}$\{sessionId\}`;
    noScript.appendChild(iframe);
    document.body.appendChild(noScript);
  })
}

Configurar campos do merchant (opcional)

Adicionalmente, você pode definir campos customizados que serão incluídos em pedidos encaminhados da VTEX para a Cybersource.

${"base64":" ","img":{"width":1594,"height":644,"type":"jpg","mime":"image/jpeg","wUnits":"px","hUnits":"px","length":90173,"url":"//images.ctfassets.net/alneenqid6w5/5KPPO5k4to3sH9amCFyp7B/107a5ce54fb0f218e8bed5918499d9b4/Cybersource_Admin_merchant_define_fields_PT.JPG"}}$

Veja abaixo como criar estes campos:

No Admin VTEX, acesse Aplicativos > Apps Instalados > Cybersource, ou digite Cybersource na barra de busca no topo da página.
Na aba Campos definidos pelo comerciante, em Informações definidas pelo comerciante, você pode inserir os campos seguindo as seguintes regras:

Exemplos:

Valor inserido no Admin em `Informações definidas pelo comerciante`	Cenário simulado	Resultado
`969{{Reference	PAD	9:0}}`
`{{OrderId}}-01`	Quando `OrderId` é 124578	124578-01
`{{MiniCart.Buyer.LastName}},{{MiniCart.Buyer.FirstName}}`	Quando o nome do comprador (`Buyer`) é John Doe	Doe,John