hash() retorna null

[sidneydemoraes]

Resumo

A função hash() retorna null mesmo com o pubkey e os dados do cartão passados corretamente.

Resultado Atual e Mensagens de Erro

const moipImport = () => {return import(/* webpackChunkName: "moip" */ 'moip-sdk-js')}

return moipImport().then(Moip => {
    Moip.MoipCreditCard.setPubKey(process.env.GLOBAL.MOIP_KEY)
    .setCreditCard(preCard).hash().then(hash => {
         console.log('HASH => ', hash)
    }
}

Nenhuma mensagem de erro é exibida. O log mostra HASH => undefined

Como reproduzir

Importo a lib moip-sdk-js em uma aplicação Vue.js com npm. Dentro de um método do meu componente, executo o comando listado em Resultado Atual e o resultado não é o esperado.

Workaround

Nenhum descoberto ainda.

Dispositivo / Navegador

Testado em ambiente de desenvolvimento no PC com Chrome.

Detalhes

• A importação da lib foi feita através da constante moipImport para que um chunk fosse criado apenas com a lib do MOIP. Como ele nem sempre será chamado no fluxo da aplicação, não quis colocá-lo no bundle principal gerado pelo webpack.
• Todo o fluxo da operação funciona normalmente. Apenas o hash() não retorna o valor esperado.
• Após debug, percebemos que a condição abaixo da função encrypt retorna false -- if (this.encrypter || this.encrypterName || "undefined" == typeof JSEncrypt || (this.encrypter = JSEncrypt, this.encrypterName = "js"), this.encrypter && this.encrypterName)

[sidneydemoraes]

Descobri o problema. Apesar de usarmos uma versão web, o fato de importarmos o módulo em um projeto Vue/Webpack faz com que precisemos de um encrypter. Identificamos isso analisando o código fonte de vocês.

Importamos o jsencrypter e setamos com o name = js e deu tudo certo.

[somentelucas]

Oi @sidneydemoraes, muito obrigado por ter reportado isso, nós realmente não tínhamos instruções de como fazer a instalação em Vue.

Vc fez assim? npm i moip-sdk-js jsencrypter --save

const JSEncrypter = require('jsencrypter');

MoipCreditCard
    .setEncrypter(JSEncrypter, 'js')
    .setPubKey(pubKey)
...

Se puder colocar um snippet aqui eu adiciono no nosso Readme (ou se preferir vc mesmo pode abrir uma pull request também! 😄).

[reneerojas]

Exatamente como citado pelo @somentelucas para Vue use import

import JSEncrypt from 'jsencrypt'

provavelmente terá problemas com require... Uso com vue (Nuxt)...

[somentelucas]

@reneerojas é jsencrypt ou jsencrypter (ou os dois hehe)?

[reneerojas]

@somentelucas é jsencrypt, na verdade nem testei o outro.... e por falar nisso.... uso assim:

MoipCreditCard.setPubKey(pubKey).setEncrypter(JSEncrypt, 'node')

Confirmado é jsencrypt.

jsencrypter A npm package to encrypt your javascript code and reduce your file size. https://www.npmjs.com/package/jsencrypter

[somentelucas]

Muito obrigado, @reneerojas, vou colocar essas instruções pra Vue no readme também.