A Nitro e-com desenvolveu o módulo para Magento em código aberto para contribuir com a comunidade.

O Módulo segue os padrões da documentação oficial Cielo, que você pode encontrar aqui.

Para auxiliar o cliente no Checkout foi inserido um plugin que simula o cartão de crédito enquanto o usuário digita os dados, visando uma maior conversão.

O Plugin utilizado e toda a documentação do funcionamento você pode encontrar aqui

Abaixo segue um exemplo de preenchimento dos dados

Obs.: Lembre-se de instalar o módulo em ambiente de homologação, caso não tenha, faça um backup do seu projeto e do seu bd antes.

Baixe os arquivos, descompate e envie para a raiz do seu projeto
caso você esteja utilizando algum template, verifique para enviar os arquivos para o local correto

"app\design\frontend\ [TEMPLATE] \ [TEMA] \layout"
"app\design\frontend\ [TEMPLATE] \ [TEMA] \template"
"skin\frontend\ [TEMPLATE] \ [TEMA] \css"
"skin\frontend\ [TEMPLATE] \ [TEMA] \js"

Tambem verifique o #id do seu form no checkout, e altere em "js/cielo/form.js". Por padrão esta (form: 'form') conforme abaixo:
var card = new Card({
// a selector or DOM element for the form where users will
// be entering their information
form: 'form',

Checkout suportados

• Onestepcheckout6
• Venda Mais
• RWD

Se você utiliza outro padrão de checkout diferente dos informados acima, sera necessario customizar o arquivo "app\design\frontend\ [TEMPLATE] \ [TEMA] \layout\Nitroecom_Cielo.xml" informando o block do seu checkout.