Criando uma mini loja virtual com PhoneGap - Parte 5

Por que eu devo ler este artigo: Este artigo � �til por apresentar conceitos de comunica��o do nosso aplicativo com uma segunda API de pagamentos muito famosa no mercado: o MercadoPago. Essa solu��o � mais flex�vel que a primeira (PayPal) no que se refere ao parcelamento dos pagamentos, bem como solicita��o de outras a��es b�sicas, como recibos, fluxos de estorno, etc. Por ser uma empresa latina, o MercadoPago se aplica melhor �s regras locais do nosso pa�s, al�m de oferecer uma vasta documenta��o sobre como implementar seus recursos. Neste artigo, o leitor aprender� a conectar nosso app com tal API, vendo dicas de como analisar melhor seus dados de retorno.

Na �ltima parte do artigo vimos como efetuar a implementa��o do checkout via carrinho de compras em integra��o com a API do PayPal para Cordova que a empresa disponibilizou como forma de facilitar a comunica��o no universo JavaScript com as engines SDKs dos sistemas operacionais mobile iOS e Android. Com base nisso, j� conseguimos efetuar todo o fluxo de compra simplificado, inclusive a coleta de dados do usu�rio, j� que o pr�prio PayPal se encarrega de tal tarefa, dado que � preciso estar logado para finalizar o pagamento. Tamb�m vimos como finalizar o fluxo limpando todos os dados do carrinho do usu�rio e o redirecionando para uma tela de sucesso.

Todavia, ainda precisamos disponibilizar ao usu�rio uma forma de parcelar suas compras caso o mesmo deseje, com a respectiva atualiza��o dos valores de juros e provisionamentos. Infelizmente, o PayPal tem algumas limita��es em rela��o � nova API, inclusive para os SDKs mobile no que se refere a parcelamento. O leitor ter� a op��o de implementar tal fluxo quando estiver inserido no modelo de Express Checkout, isto �, quando seu site gera um bot�o que redireciona o usu�rio para o site do PayPal com os dados da compra e parcelamentos inclusos. Vejamos na Figura 1 o fluxo b�sico definido pelo PayPal para esse tipo de implementa��o. Observe que o usu�rio tem, de igual forma, as op��es de efetuar o pagamento com suas credenciais do PayPal (nesse caso, para pagamentos com cart�o de cr�dito os valores ser�o considerados caso o usu�rio n�o tenha saldo na conta do PayPal) ou informando manualmente dos dados pessoais e do cart�o de cr�dito.

**Figura 1**. Fluxo de parcelamento junto ao PayPal.

De toda forma, o fluxo inicia do seu website, � processado no ambiente do PayPal e, no final, pode ser finalizado redirecionando para o seu website novamente. Por�m, essa � de longe a melhor forma de implementarmos j� que estamos usando componentes embutidos no aplicativo mobile na forma de plugins. Voc� at� pode seguir com o mesmo fluxo atrav�s da sua p�gina HTML no projeto PhoneGap, mas isso definitivamente n�o � indicado. Na se��o Links voc� pode encontrar a URL da documenta��o do PayPal que ensina todos os passos para proceder dessa forma.

No nosso caso, como precisamos de um ambiente seguro e que nos disponibilize mais op��es para o mercado brasileiro (lembre-se que as op��es do PayPal para o mercado nacional s�o limitadas, por exemplo: pagamentos com cart�o de cr�dito s� s�o permitidos em moeda americana), analisaremos uma segunda API de pagamentos muito famosa do mercado: o MercadoPago.

Integrando a API do MercadoPago

O MercadoPago � o sistema de pagamentos seguros online mais famoso da Am�rica. Seu m�dulo para desenvolvedores (vide URL na se��o Links) atinge v�rios mercados e plataformas, contemplando desde SDKs clientes para tecnologias como Android, iOS e JavaScript (que � o nosso caso), at� para servidores atendendo linguagens de programa��o diversas: PHP, Java, .Net, Node.js, ASP.NET, Ruby e Phyton. � poss�vel ainda efetuar testes facilmente com o ambiente de Sandbox, muito semelhante ao que trabalhamos com o do PayPal.

A solu��o conta ainda com m�dulos e plugins facilmente integr�veis a diversas plataformas de e-commerce online, como Magento, OpenCart, WordPress, etc. Ou, se voc� preferir, pode tamb�m criar os famosos bot�es de redirecionamento que levam o usu�rio � finaliza��o da compra no pr�prio site do MercadoPago, uma op��o mais simples e que se abst�m da necessidade de conhecimentos t�cnicos mais avan�ados. Finalmente, a empresa ainda conta com op��es para pagamentos f�sicos para os casos em que o usu�rio deseje portar uma maquininha de cart�es (solu��o parecida com a da Cielo ou PagSeguro, por exemplo) atrav�s do MercadoPago Point.

Para a nossa solu��o, faremos uso de dois SDKs da plataforma: o SDK JavaScript nos ser� �til para coletar as informa��es pessoais e do cart�o de cr�dito do usu�rio para gerar um token de autentica��o que, por sua vez, ser� enviado ao segundo SDK, baseado em Java e que estar� hospedado no nosso servidor (via Web Service), pois ser� nesse momento em que o pagamento de fato ser� gerado e enviado aos servidores do MercadoPago.

A primeira coisa que temos de ter em mente quando implementamos a coleta de dados sens�veis do usu�rio, cuja confidencialidade deve ser mantida acima de tudo, � que n�o podemos hosped�-los em nossas aplica��es ou envi�-los ao nosso servi�o via HTTP, visto que nosso ambiente n�o foi homologado nem atende aos crit�rios estabelecidos pelas normas de seguran�a da ind�stria. Essas mesmas normas s�o definidas pela PCI DSS (Payment Card Industry Data Security Standard), um padr�o de seguran�a internacional que especifica exig�ncias m�nimas a serem atendidas pelas empresas que fa�am uso do consumo financeiro gerado por bandeiras famosas, como Visa, MasterCard, American Express, Discover, etc. Marcas privadas e espec�ficas de certos pa�ses n�o est�o inclusas no padr�o. Os servi�os que consumiremos do MercadoPago j� implementam as mesmas via SDKs, nos facilitando todo esse trabalho.

Na Listagem 1, o leitor encontra um exemplo de formul�rio que o MercadoPago disponibiliza em sua documenta��o como sugest�o de dados sens�veis que precisar�o ser coletados no momento da cria��o de um pagamento. Veja que se trata de um formul�rio convencional sem nenhum estilo associado, apenas a estrutura baseada em campos de input, seus tipos e valores de placeholder (esse, inclusive, pode ser usado para dar dicas ao usu�rio de que dados ele pode inserir). Cada campo recebe um id de mesmo valor que o atributo data-checkout, que, por sua vez, ser� usado pela API JavaScript do MercadoPago para validar as informa��es fornecidas pelo usu�rio. Em resumo, os campos que precisamos solicitar s�o: e-mail, dados do cart�o de cr�dito (como n�mero, cvv, data de expira��o e titular do cart�o de cr�dito), tipo do documento e n�mero do documento do mesmo. Algumas dessas informa��es variam de acordo com o pa�s onde se deseja efetuar a venda, logo leia bem a documenta��o caso deseje liberar pagamentos internacionais no seu app.


<form action="" method="post" id="pay" name="pay" >
  <fieldset>
   <ul>
    <li>
     <label for="email">Email</label>
     <input id="email" name="email" value="test_user_19653727@testuser.com" 
     type="email" placeholder="your email"/>
    </li>
    <li>
     <label for="cardNumber">Credit card number:</label>
     <input type="text" id="cardNumber" data-checkout="cardNumber" 
     placeholder="4509 9535 6623 3704" />
    </li>
    <li>
     <label for="securityCode">Security code:</label>
     <input type="text" id="securityCode" data-checkout="securityCode" 
     placeholder="123" />
    </li>
    <li>
     <label for="cardExpirationMonth">Expiration month:</label>
     <input type="text" id="cardExpirationMonth" 
     data-checkout="cardExpirationMonth" placeholder="12" />
    </li>
    <li>
     <label for="cardExpirationYear">Expiration year:</label>
     <input type="text" id="cardExpirationYear" 
     data-checkout="cardExpirationYear" placeholder="2015" />
    </li>
    <li>
     <label for="cardholderName">Card holder name:</label>
     <input type="text" id="cardholderName" data-checkout="cardholderName" 
     placeholder="APRO" />
    </li>
    <li>
     <label for="docType">Document type:</label>
     <select id="docType" data-checkout="docType"></select>
    </li>
    <li>
     <label for="docNumber">Document number:</label>
     <input type="text" id="docNumber" data-checkout="docNumber" 
     placeholder="12345678" />
    </li>
   </ul>
   <input type="submit" value="Pay!" />
  </fieldset>
</form>

Listagem 1. C�digo HTML sugerido pelo MercadoPago para coletar dados do usu�rio

O MercadoPago disponibiliza dois tipos de pagamentos b�sicos:

Checkout b�sico: permite criar um pagamento espec�fico atrav�s da gera��o de um bot�o para que o usu�rio seja redirecionado para o site do MercadoPago, finalizando a compra l� e voltando para o seu site via URL de callback;
Checkout transparente: o usu�rio n�o tem contato algum com o site do MercadoPago e toda a comunica��o � efetuada atrav�s das APIs da plataforma, com chamadas seguras via Rest e recebimentos das respostas tamb�m por fun��es de callback.

Faremos uso do checkout transparente, pois, apesar de mais complexo, atende melhor �s nossas exig�ncias, afinal n�o queremos que o usu�rio saiba qual a plataforma de pagamentos que estamos usando por detr�s.

Coletando os dados de pagamento

Mas antes de partirmos para a implementa��o do c�digo do MercadoPago, voltemos nossa aten��o � cria��o da p�gina que usaremos no app para coletar os referidos dados. No arquivo index.html do projeto, adicione uma nova page tal como demonstrado na Listagem 2. Em si, a listagem � relativamente simples: apenas exibe cada um dos campos usando o estilo de formul�rios do Framework7. Na linha 2, por exemplo, podemos ver a mesma declara��o de formul�rio que herdamos do exemplo fornecido pelo MercadoPago, estrutura essa que se repete na declara��o individual de cada um dos inputs. O que muda, no todo, � a organiza��o da estrutura para impor o design do Framework7.

Nas linhas 5 e 6 vemos dois campos de input do tipo hidden para salvar informa��es (valor e descri��o da compra) que precisaremos enviar para o nosso servi�o que, de fato, processar� o pagamento, o qual ser� criado mais adiante.

Em rela��o aos campos do formul�rio, o Framework7 trabalha com um �cone atrelado ao campo de texto. O �cone deve ser declarado sob a forma de elemento <i> tal como est�vamos fazendo para os ListViews. O modelo que implementamos na listagem faz uso do Material Design do Google, que define que as labels dos campos de formul�rio devem aparecer dentro dos mesmos, e assim que o usu�rio clicar em um dado campo, as mesmas devem flutuar logo acima dele. Dessa forma, o placeholder que configuramos em todos os inputs n�o surtir� efeito, por�m voc� ver� mais adiante uma forma de remover esse efeito.

Perceba que mantivemos todas as configura��es dos inputs tal qual nos fora recomendado pelo MercadoPago, exceto pelos tipos dos mesmos (atributo type), os quais alteramos para que cada um equivalha ao tipo de dado que ali ser� digitado (ex: number, email, text, etc.).


<div class="page-content form-mp">
  <form method="post" id="pay" name="pay">
    <div class="content-block-title">Efetuar Pagamento com 
    MercadoPago!</div>
    <div class="list-block inputs-list">
     <input type="hidden" value="23.00" name="valor" />
     <input type="hidden" value="teste" name="descricao" /> 
     <input type="hidden" value="1" name="parcelas" />
     <ul>
       <li>
        <div class="item-content">
         <div class="item-media"><i class="zmdi zmdi-email">
         </i></div>
         <div class="item-inner">
          <div class="item-title floating-label">E-mail</div>
          <div class="item-input item-input-field">
            <input id="email" name="email" data-checkout="email" 
            type="email" placeholder="Digite seu email" />
          </div>
         </div>
        </div>
       </li>
       <li>
        <div class="item-content">
         <div class="item-media bandeira"><i class="zmdi zmdi-card">
         </i></div>
         <div class="item-inner">
          <div class="item-title floating-label">N�mero do Cart�o</div>
          <div class="item-input item-input-field">
            <input type="number" id="cardNumber" data-checkout="cardNumber" 
            placeholder="4509 9535 6623 3704" />
          </div>
         </div>
        </div>
       </li>
       <li>
        <div class="item-content">
         <div class="item-media"><i class="zmdi zmdi-shield-security">
         </i></div>
         <div class="item-inner">
            <div class="item-title floating-label">CVV</div>
            <div class="item-input item-input-field">
              <input type="number" id="securityCode" data-checkout="securityCode" 
              placeholder="123" maxlength="3"/>
            </div>
         </div>
        </div>
       </li>
       <li>
        <div class="item-content">
         <div class="item-media"><i class="zmdi zmdi-calendar">
         </i></div>
         <div class="item-inner">
            <div class="item-title floating-label">M�s Vencimento</div>
            <div class="item-input item-input-field">
              <input type="number" id="cardExpirationMonth" 
              data-checkout="cardExpirationMonth" placeholder="12" />
            </div>
         </div>
        </div>
       </li>
       <li>
        <div class="item-content">
         <div class="item-media"><i class="zmdi zmdi-calendar">
         </i></div>
         <div class="item-inner">
          <div class="item-title floating-label"
          >Ano Vencimento</div>
          <div class="item-input item-input-field">
            <input type="number" id="cardExpirationYear" 
            data-checkout="cardExpirationYear" placeholder="2016" />
          </div>
         </div>
        </div>
       </li>
       <li>
          <div class="item-content">
           <div class="item-media">
           <i class="zmdi zmdi-folder-person"></i></div>
           <div class="item-inner">
              <div class="item-title floating-label"
              >Nome do Titular</div>
              <div class="item-input item-input-field">
                <input type="text" id="cardholderName" 
                data-checkout="cardholderName" placeholder="JULIO SAMPAIO" />
              </div>
           </div>
          </div>
       </li>
       <li>
        <div class="item-content">
         <div class="item-media"><i 
         class="zmdi zmdi-accounts-list-alt"></i></div>
         <div class="item-inner">
           <div class="item-title floating-label">Tipo do Documento</div>
           <div class="item-input item-input-field">
              <select id="docType" data-checkout="docType"></select>
           </div>
         </div>
        </div>
       </li>
       <li>
        <div class="item-content">
         <div class="item-media"><i class="zmdi 
         zmdi-card-membership"></i></div>
         <div class="item-inner">
          <div class="item-title floating-label">N�mero do Documento</div>
          <div class="item-input item-input-field">
            <input type="number" id="docNumber" 
            data-checkout="docNumber" placeholder="41763266702" />
          </div>
         </div>
        </div>
       </li>
     </ul>
    </div>
  </form>
</div>

Listagem 2. Page com o formul�rio de coleta dos dados sens�veis do usu�rio

Como a estrutura b�sica do nosso exemplo de formul�rio foi extra�da da p�gina inicial de exemplos do Framework7, para que o suporte ao Material Design funcione precisamos importar dois novos arquivos: o kitchen-sink.css na tag <head>, que se encontra dispon�vel na pasta www/css do download de c�digo fonte deste artigo e que fora importado diretamente da p�gina de exemplos do Framework7 com classes CSS auxiliares para impor estilos extras na HTML (procure import�-lo logo ap�s o CSS do Framework7):


<link rel="stylesheet" href="css/kitchen-sink.css">

E o segundo � o kitchen-sink.js, dispon�vel na pasta www/js do mesmo download, que deve ser posicionado na parte inferior da p�gina logo ap�s o import dos js do Framework7:


<script type="text/javascript" src="js/kitchen-sink.js"></script>

Para deixar a tela pronta com o respectivo bot�o de envio das informa��es, podemos incluir o seguinte trecho de c�digo ap�s o fechamento da tag <ul>, na linha 96 da listagem anterior:


<div class="content-block">
       <input type="submit" class="button button-raised button-fill 
       color-indigo" value="Efetuar Pagamento" />
</div>

Para finalizar, inclua tamb�m o c�digo CSS representado na Listagem 3, que se encarregar� de sobrescrever algumas propriedades padr�o do estilo do Framework7. Tais propriedades incluem a cor e tamanho da fonte dos �cones que dever�o aparecer em tamanho maior nessa p�gina, al�m do peso da fonte (de negrito para normal) e do espa�amento interno do t�tulo da p�gina. Independente da regra, � importante declar�-las como regras filhas do formul�rio, j� que se aplicar�o somente ao mesmo e n�o desalinhar�o o restante do estilo. O resultado da p�gina pode ser visualizado na Figura 2.


<style>
   .form-mp .zmdi {
          font-size: 24px;
          color: #757575;
   }
   .form-mp .floating-label, .form-mp .item-input, 
   .form-mp .item-title {
          font-weight: normal;
   }
   .form-mp .content-block-title {
          height: 41px;
          padding-top: 26px;
   }
</style>

Listagem 3. C�digo CSS para ajustar �cones e fonte na p�gina

**Figura 2**. P�gina de solicita��o dos dados de pagamento.

Caso deseje exibir seus pr�prios placeholder�s, deixando as labels de cada campo fixas na tela, basta remover todas as classes CSS floating-label do c�digo, assim nossa mesma implementa��o ficar� igual � Figura 3.

P�gina de pagamento com sugest�o de dados via placeholder — **Figura 3**. P�gina de pagamento com sugest�o de dados via *placeholder*.

Nota: � importante que o leitor implemente algumas regras b�sicas de valida��o nos campos via JavaScript, como campos obrigat�rios (todos s�o), tamanho m�ximo dos valores, etc.

Pickers na p�gina de pagamento

Na mesma tela, devemos adicionar alguma l�gica de preenchimento para os campos que representam uma combobox. Por exemplo, os campos de M�s e Ano de expira��o do cart�o de cr�dito precisam disponibilizar alguns valores para o usu�rio selecionar, ou voc� pode disponibilizar os campos no tipo texto para digita��o livre pelo mesmo usu�rio. Em todo caso, fa�amos o c�digo que carrega uma lista de op��es via componente Picker do Framework7. Na Listagem 4 voc� encontra o c�digo que deve ser inserido numa tag <script> ao final das demais importa��es de arquivos js da index.html.

Veja que, como se trata de dois componentes distintos, precisamos criar um componente individual para cada um, logo isso resultar� em dois vetores: meses e anos. O processo de preenchimento dos meses pode ser feito via for que vai de 1 at� 12. J� em rela��o aos anos, precisamos estipular uma margem m�nima a partir do ano corrente e iterar sobre a mesma. Vamos considerar um intervalo de 20 anos, o suficiente para esse tipo de implementa��o. Na linha 7 criamos um objeto do tipo Date no JavaScript para que possamos recuperar a informa��o do ano corrente via fun��o getFullYear(), da� � s� somar com o valor 20 e iterar no loop preenchendo o vetor no final. Por fim, basta referenciar os rec�m-criados vetores �s propriedades cols > values de cada Picker. Lembre-se de configurar corretamente os seletores na propriedade input referentes aos valores dos campos que o MercadoPago sugeriu, sem alterar tais valores.

Com isso, nossos pickers resultar�o em algo semelhante ao que temos na Figura 4.


<script>
   var meses = new Array();
   var anos = new Array();
   for (i = 1; i <= 12; i++) {
          meses.push(i);
   }
   var date = new Date();
   for (i = date.getFullYear(); i < date.getFullYear() + 20; i++) {
          anos.push(i);
   }
   var pickerMeses = myApp.picker({
          input: '#cardExpirationMonth',
          toolbarCloseText: 'Selecione...',
          cols: [
                 {
                       textAlign: 'center',
                       values: meses
                 }
          ]
   });
   var pickerAno = myApp.picker({
          input: '#cardExpirationYear',
          toolbarCloseText: 'Selecione...',
          cols: [
                 {
                       textAlign: 'center',
                       values: anos
                 }
          ]
   });
</script>

Listagem 4. C�digo JavaScript para carregar pickers de data de vencimento do cart�o

**Figura 4**. Tela de checkout MP com pickers de data de vencimento.

MercadoPago: SDK JavaScript

O pr�ximo passo para trabalhar com a API � efetuar a importa��o do arquivo JavaScript da mesma. Portanto, na p�gina index.html inclua o seguinte trecho de import ap�s a importa��o do index.js:


<script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js">
</script>

Ap�s isso, obviamente, � preciso que voc� esteja logado na sua conta do MercadoPago, logo, se ainda n�o criou uma, efetue os passos clicando no bot�o �Cadastre-se� do topo da p�gina oficial (vide se��o Links). Uma vez logado, acesse a p�gina de obten��o das credenciais da sua conta via link disponibilizado na se��o Links, tal como vemos na Figura 5. Veja que a mesma apresenta dois modos: o modo sandbox, que usaremos sempre quando estivermos em desenvolvimento da aplica��o; e o modo produ��o, cujas credenciais voc� usar� quando for migrar seu aplicativo para o ambiente de produ��o. Observe que o pr�prio MercadoPago disponibiliza um link �O que eu preciso para ir a produ��o� que voc� deve ler quando for efetuar tal processo.

H� ainda uma segunda aba na p�gina com as credenciais que voc� pode usar se estiver usando o modelo de checkout b�sico que vimos.

**Figura 5**. P�gina de credenciais do MercadoPago.

Uma vez com as credenciais em m�os, podemos nos voltar para o c�digo JavaScript de acesso � API. Para isso, vamos criar um novo arquivo na pasta /js do projeto de nome mp.js, que conter� apenas os c�digos referentes ao acesso ao MercadoPago. E a primeira linha de c�digo do mesmo ser� a inicializa��o da API:


Mercadopago.setPublishableKey("SUA_PUBLIC_KEY_AQUI");

Isso ser� o suficiente para carregar os objetos e fun��es importantes da API na nossa p�gina. Nela, temos um outro campo que precisa ter seus valores carregados atrav�s do SDK do MercadoPago: trata-se do campo docType. Dependendo do pa�s onde esteja executando o c�digo, o MercadoPago exige que informa��es referentes � identifica��o do comprador sejam informadas. No caso do Brasil, o CPF do usu�rio � solicitado para garantir uma maior seguran�a. Por�m, deixaremos a cargo do pr�prio MercadoPago a tarefa de nos informar que documento � esse, deixando a l�gica adaptada o suficiente para futuras possibilidades em outros pa�ses. Portanto, insira mais uma linha de c�digo no arquivo:


Mercadopago.getIdentificationTypes();

Isso � tudo que precisaremos fazer para ter o campo de �Tipo de Documento� carregado na p�gina, isso porque a API do MercadoPago efetua uma consulta via Ajax em seus servidores e retorna a lista compat�vel com o pa�s de execu��o do aplicativo, preenchendo automaticamente o campo em quest�o, desde que o mesmo, obviamente, esteja com o mesmo id que a plataforma sugeriu inicialmente. Veja na Figura 6 um exemplo de como o campo fica quando a p�gina for recarregada.

**Figura 6**. Campo Tipo do Documento preenchido automaticamente.

Note que o mesmo apresenta o texto sobrescrito ao valor do placeholder e isso � um problema. Uma solu��o bem simples � criar um elemento <option> vazio dentro do <select> apenas para que o Framework7 entenda que tem conte�do a ser carregado ali imediatamente ap�s a renderiza��o da p�gina como um todo e o Ajax do MercadoPago, por sua vez, se encarregar� de popular o campo corretamente (Figura 7).

**Figura 7**. Campo Tipo do Documento previamente selecionado.

Buscando dados da bandeira

O pr�ximo passo � verificar quais s�o o tipo e a bandeira do cart�o que o usu�rio usar� no aplicativo para processar o pagamento, pois precisaremos desses dados para exibir a bandeira do cart�o do usu�rio na p�gina assim que o usu�rio terminar de digit�-lo, bem como na valida��o dos dados enviados. Acrescente, portanto, o c�digo da Listagem 5 ao final do arquivo mp.js. Vejamos alguns detalhes sobre as fun��es da mesma:

Fun��o addEvent(): fun��o utilit�ria que usaremos para adicionar um determinado evento (focus, blur, mousein/out, etc.) enviado por par�metro a elementos HTML espec�ficos, configurando tamb�m uma fun��o de callback para processar o retorno no fim;
Fun��o getBin(): essa fun��o se encarrega de recuperar a informa��o dos seis primeiros d�gitos (o suficiente para identificar o tipo do cart�o) do n�mero do cart�o no respectivo campo, removendo tamb�m caracteres especiais, como pontos e hifens, que o usu�rio venha eventualmente a digitar;
Fun��o guessingPayment(): recupera o n�mero do cart�o digitado via fun��o getBin() (linha 17) e verifica se o tipo do evento que a disparou foi o keyup. Caso positivo analisa se o tamanho do texto � maior que 6 (isso porque executaremos essa fun��o sempre que o usu�rio soltar a tecla � onkeyup � e na API do MercadoPago s�o necess�rios apenas os 6 primeiros d�gitos de um cart�o para identificar seu tipo/bandeira) chamando o m�todo de recupera��o do pagamento como consequ�ncia (getPaymentMethodInfo); caso contr�rio (evento onchange) executamos a mesma valida��o por�m somente ap�s o tempo de 100 milissegundos, dando uma lacuna suficiente para o usu�rio terminar de informar o valor (para os casos em que o usu�rio colar o texto no campo, por exemplo);
Fun��o setPaymentMethodInfo(): logo no in�cio da fun��o usamos a fun��o de log() do Console para analisar a resposta (response) que a API nos dar� quando digitarmos um cart�o de teste no campo. Caso a resposta HTTP retorne com sucesso (Status 200, na linha 38) procedemos da seguinte maneira:

o Buscamos o elemento de formul�rio para inserir um campo escondido referente ao id do m�todo de pagamento. Esse campo dever� ser criado como um elemento do tipo input hidden na pr�pria p�gina via JavaScript com suas propriedades name, type e value devidamente informadas (linhas 49 a 52). Note que essa inclus�o deve ocorrer apenas se o mesmo elemento j� n�o existir no formul�rio, por isso realizamos o teste da linha 48, caso contr�rio ter�amos muitas repeti��es desse campo no mesmo;
o Caso o elemento j� exista no formul�rio, apenas modificamos seu valor pelo poss�vel novo id do tipo de pagamento (linha 56);
o Buscamos o elemento de classe CSS bandeira (linha 41) para que possamos modificar o �cone padr�o de cart�o de cr�dito com a imagem da bandeira do cart�o informado pelo usu�rio, dando um efeito interessante ao app, al�m de assegurar ao usu�rio que nosso sistema identifica suas informa��es correta e dinamicamente. Ap�s isso, criamos um novo elemento de imagem e definimos seu atributo src apontando para a respectiva URL retornada pelo servi�o do MercadoPago, via propriedade thumbnail do objeto de response (linha 44). Assim, basta adicionarmos o mesmo ao objeto de bandeira e a implementa��o estar� finalizada.

Por fim, adicionamos dois novos ouvintes da fun��o de guessingPaymentMethod ao final do c�digo para os eventos de keyup e change, conforme descrevemos antes.


function addEvent(el, eventName, handler) {
 if (el.addEventListener) {
        el.addEventListener(eventName, handler);
 } else {
        el.attachEvent('on' + eventName, function() {
               handler.call(el);
        });
 }
};

function getBin() {
 var ccNumber = document.querySelector('input[data-checkout="cardNumber"]');
 return ccNumber.value.replace(/[ .-]/g, '').slice(0, 6);
};

function guessingPaymentMethod(event) {
 var bin = getBin();

 if (event.type == "keyup") {
        if (bin.length >= 6) {
               Mercadopago.getPaymentMethod({
                     "bin": bin
               }, setPaymentMethodInfo);
        }
 } else {
        setTimeout(function() {
               if (bin.length >= 6) {
                     Mercadopago.getPaymentMethod({
                            "bin": bin
                     }, setPaymentMethodInfo);
               }
        }, 100);
 }
};

function setPaymentMethodInfo(status, response) {
 console.log(JSON.stringify(response));
 if (status == 200) {
        // fa�a algo ex: mostre a logo do m�todo de pagamento
        var form = document.querySelector('#pay');
        var bandeira = document.querySelector('.bandeira');
        
        var bandeiraImg = document.createElement('img');
        bandeiraImg.setAttribute('src', response[0].thumbnail);

        $(bandeira).html(bandeiraImg);

        if (document.querySelector("input[name=paymentMethodId]") == null) {
               var paymentMethod = document.createElement('input');
               paymentMethod.setAttribute('name', "paymentMethodId");
               paymentMethod.setAttribute('type', "hidden");
               paymentMethod.setAttribute('value', response[0].id);
               
               form.appendChild(paymentMethod);
        } else {
               document.querySelector("input[name=paymentMethodId]")
               .value = response[0].id;
        }
 }
};

addEvent(document.querySelector('input[data-checkout="cardNumber"]'), 
'keyup', guessingPaymentMethod);
addEvent(document.querySelector('input[data-checkout="cardNumber"]'), 
'change', guessingPaymentMethod);

Listagem 5. Identificando m�todo e informa��es de pagamento

Esse c�digo n�o trar� grandes mudan�as � aplica��o no momento, exceto pela mudan�a do �cone da bandeira do cart�o que poderemos verificar informando um cart�o qualquer no campo referido. O MercadoPago disponibiliza uma p�gina com v�rios cart�es de cr�dito para testes em sua documenta��o, desde brasileiros at� internacionais, de diversas marcas distintas. Na se��o Links voc� encontra a URL com tais dados de teste. Na mesma p�gina, no link �mais cart�es de teste� voc� encontrar� uma listagem de cart�es nacionais para testes com marcas como HiperCard, Elo, Diners, bem como marcas exclusivas de outros pa�ses, como Naranja (Argentina), Tarjeta MercadoPago (M�xico), etc.

Agora efetue um teste, copie um dos valores dispon�veis na p�gina e veja o comportamento do campo, tal como vemos na Figura 8. O leitor pode ainda implementar regras de valida��o pr�prias para os dados do cart�o, como tamanho m�nimo/m�ximo, tipo de dado digitado ou at� mesmo a inclus�o de uma m�scara no campo para formatar o valor � medida que o usu�rio o digita.

**Figura 8**. Exemplo de cart�o com identifica��o autom�tica de bandeira.

Em rela��o aos dados do cart�o estamos apenas fazendo uso dos valores de id (tipo de pagamento) e thumbnail (imagem da bandeira), mas existem outras informa��es que v�m junto da resposta HTTP ao servi�o do MercadoPago. Veja na Listagem 6 o c�digo JSON retornado pelo servi�o em fun��o da nossa chamada com os dados do cart�o em destaque. Entre as op��es mais importantes, destacam-se:

name: descri��o da bandeira;
status: define se o cart�o est� ativo ou n�o;
secure_thumbnail: URL da imagem da bandeira em ambiente seguro � HTTPS;
deferred_capture: suporte a estornos;
settings: configura��es importantes do cart�o, como o n�mero m�nimo de d�gitos para identificar o bin, o tamanho do n�mero do cart�o e as configura��es do c�digo de seguran�a;
additional_info_needed: informa��es sobre os dados necess�rios para concluir a compra naquele cart�o especificamente;
min_allowed_ammount, max_allowed_ammount: valores m�nimo/m�ximo permitidos para efetuar opera��es neste cart�o;


[
  {
    "id": "visa",
    "name": "Visa",
    "payment_type_id": "credit_card",
    "status": "active",
    "secure_thumbnail": "https://www.mercadopago.com/org-img/MP3/API/logos/visa.gif",
    "thumbnail": "http://img.mlstatic.com/org-img/MP3/API/logos/visa.gif",
    "deferred_capture": "supported",
    "settings": [
        {
            "bin": {
                "pattern": "^(4)",
                "exclusion_pattern": null,
                "installments_pattern": "^(4)"
            },
            "card_number": {
                "length": 16,
                "validation": "standard"
            },
            "security_code": {
                "mode": "mandatory",
                "length": 3,
                "card_location": "back"
            }
        }
    ],
    "additional_info_needed": [
        "cardholder_name",
        "cardholder_identification_type",
        "cardholder_identification_number"
    ],
    "min_allowed_amount": 0.5,
    "max_allowed_amount": 50000,
    "accreditation_time": 2880
  }
]

Listagem 6. JSON retornado pelo servi�o de tipo de pagamento do MercadoPago

Enviando os dados ao MercadoPago

O pr�ximo passo consiste em capturar o evento de submit do nosso formul�rio, definindo todas as informa��es de que precisamos para enviar ao nosso Web Service, que � quem de fato ir� processar o pagamento no final. Lembre-se de que precisamos enviar ao servidor apenas os dados criptografados retornados pela API JavaScript do MercadoPago no cliente, assim evitamos qualquer falha de seguran�a no processo como um todo. Portanto, nada de enviar os dados do cart�o ou do usu�rio e muito menos salv�-los em nossa base de dados, ok?

Para isso, faremos uso da fun��o createToken() da classe MercadoPago no JavaScript, tal como definido na Listagem 7. Trata-se de uma fun��o relativamente simples que trata apenas da associa��o do evento de submit do formul�rio (de id pay) � fun��o doPay (linha 2) que de fato lidar� com o fluxo de pagamento. Essa fun��o, por sua vez, previne o click duplo no bot�o via fun��o preventDefault() do JavaScript (na linha 5) e, em seguida, chama a fun��o createToken() passando o seletor do formul�rio e a fun��o de callback que receber� os dados retornados pelo servi�o e os tratar�: sdkResponseHandler.


doSubmit = false;
addEvent(document.querySelector('#pay'), 'submit', doPay);

function doPay(event) {
   event.preventDefault();
   if (!doSubmit) {
          var $form = document.querySelector('#pay');

          Mercadopago.createToken($form, sdkResponseHandler); 
          // A fun��o "sdkResponseHandler" foi definida abaixo

          return false;
   }
};

Listagem 7. C�digo para criar token �nico para cart�o do usu�rio

A Listagem 8 traz o c�digo da fun��o sdkResponseHandler(), que lidar� com o processamento da resposta � gera��o do token de pagamento pela API do MercadoPago. Veja que ela recebe como primeiro par�metro a vari�vel status, que identifica o status HTTP da resposta � requisi��o. Mais uma vez testamos se est� ok (200 ou 201): em caso positivo, criamos um novo elemento de input hidden definindo como valor o id da resposta (o token em si) e adicionando-o ao formul�rio; caso contr�rio enviamos o response para a fun��o tratarErrosTokenCartao() (linha 3), que se encarregar� de verificar o que houve de errado e informar ao usu�rio.

Nesse momento definimos o valor da vari�vel doSubmit para true, isso porque ap�s essa execu��o n�o devemos reenviar os dados ao servidor, apenas quando o resultado retornar de l�.

Na linha 15 o leitor pode observar uma fun��o nova: formToJSON(). Trata-se de uma fun��o do Framework7 muito �til que mapeia o formul�rio enviado como par�metro e retorna todos os seus campos e respectivos valores organizados no formato JSON. Isso ser� muito �til para enviarmos os mesmos via fun��o postJSON (Ajax) para o nosso Web Service, sem que precisemos mapear cada um manualmente. Na linha 16 vemos que o valor retornado por essa fun��o para o objeto pagamento foi acrescido da propriedade payer e seu respectivo atributo email, isso para adequar o modelo de dados do nosso cliente-servidor ao do MercadoPago, j� que tal valor pertence ao objeto composto payer na sua API. Na linha 22 efetuamos a chamada explicitamente, recebendo como resultado um booleano informando se o processo aconteceu com sucesso.

Veja que, nessa execu��o toda, temos uma inspe��o a fazer (via console.log): o JSON gerado pelo Framework7 com os dados do formul�rio tal como temos exibido na Listagem 9.


function sdkResponseHandler(status, response) {
 if (status != 200 && status != 201) {
        tratarErrosTokenCartao(response);
 } else {
    var form = document.querySelector('#pay');

    var card = document.createElement('input');
    card.setAttribute('name', "token");
    card.setAttribute('type', "hidden");
    card.setAttribute('value', response.id);
    
    form.appendChild(card);
    doSubmit = true;

    var pagamento = myApp.formToJSON('#pay');
    pagamento.payer = {
           "email": pagamento.email
    };

    console.log(JSON.stringify(pagamento));

    $.postJSON(WS_HOME_WEB + 'rest/mp/pay', pagamento, function(resultado) {
           myApp.alert(resultado ? �Pagamento efetuado com sucesso� : �Erro�);
    });
 }
};

Listagem 8. C�digo que processa a resposta � gera��o do token de pagamento


  "valor": "23.00",
  "descricao": "teste",
  "email": "julio@gmail.com",
  "paymentMethodId": "visa",
  "token": "91000f1707afb99a2bbbaa8f8d54a5e7",
  "payer": {
      "email": "julio@gmail.com"
  }
}

Listagem 9. JSON criado pelo Framework7 com dados do formul�rio

Para finalizar a implementa��o dessa parte cliente, vejamos na Listagem 10 o c�digo de valida��o dos dados do formul�rio. Passamos o objeto response para a fun��o que se encarrega de iterar sobre o vetor cause que cont�m a lista de erros que o servi�o do MercadoPago retorna. Cada um dos c�digos representa um poss�vel erro que est� representado pelas respectivas mensagens de valida��o dentro da estrutura do switch/case. No final adicionamos a mensagem a uma notifica��o do Framework7. Os casos em que tivermos dois c�digos declarados um ap�s o outro (linhas 14 a 16, por exemplo), s�o poss�veis gra�as ao recurso de m�ltiplo case do JavaScript, assim evitamos a repeti��o de mensagens.


function tratarErrosTokenCartao(response) {
 var msg = "Campos inv�lidos: <br>";
 $(response.cause).each(function() {
    switch (this.code) {
    case "205":
       msg += "Digite o seu n�mero de cart�o!<br>";
       break;
    case "208":
       msg += "Escolha um m�s!<br>";
       break;
    case "209":
       msg += "Escolha um ano!<br>";
       break;
    case "212":
    case "213":
    case "214":
       msg += "Insira seu documento!<br>";
       break;
    case "220":
       msg += "Digite o seu banco emissor!<br>";
       break;
    case "221":
       msg += "Insira o nome e sobrenome!<br>";
       break;
    case "224":
       msg += "Digite o c�digo de seguran�a!<br>";
       break;
    case "316":
       msg += "Insira um nome v�lido!<br>";
       break;
    case "322":
    case "323":
    case "324":
       msg += "N�mero de documento inv�lido!<br>";
       break;
    case "325":
    case "326":
       msg += "Data de vencimento inv�lida!<br>";
       break;
    case "E301":
       msg += "H� algo errado com este n�mero. Volte a digit�-lo!<br>";
       break;
    case "E302":
       msg += "C�digo de Seguran�a inv�lido!<br>";
       break;
    default:
       // Caso n�o seja nenhum dos c�digos anteriores
       msg += "Favor revisar novamente os dados!<br>";
       break;
    }
 });
 myApp.addNotification({
        message: msg,
        button: {
               text: 'OK'
        }
 });
}

Listagem 10. Fun��o para validar os dados dos campos do formul�rio

Finalizando o back-end

Voltando nossa aten��o agora para o back-end da aplica��o, precisamos criar a estrutura no servi�o para receber os dados via Ajax. Para isso, a primeira coisa que temos de criar s�o as classes de entidades que representar�o os dados do formul�rio, entre outras informa��es. Veja na Listagem 11 o c�digo para criar as duas entidades: Pagamento e Pagador. Note que as mesmas apresentam agora algumas anota��es novas: @JsonRootName, que faz parte da API Restful do Jackson e serve para definir o nome raiz do nosso objeto; @JsonProperty mapeia o nome desse elemento a n�vel de JSON, nos possibilitando dar qualquer outro nome de neg�cio �s vari�veis no Java. Cada um desses valores representa j� a forma como devemos enviar os dados para o servi�o do MercadoPago.


@JsonRootName("payment")
public class Pagamento {

   @JsonProperty("token")
   private String token;

   @JsonProperty("transaction_amount")
   private BigDecimal valor;

   @JsonProperty("payment_method_id")
   private String paymentMethodId;

   @JsonProperty("description")
   private String descricao;

@JsonProperty("installments")
private int parcelas;

   @JsonProperty("payer")
   private Pagador payer;
   
   // getters e setters
   
}

@XmlRootElement
public class Pagador {

   private String email;
   
   // getters e setters
   
}

Listagem 11. Classes de entidade Pagamento e Pagador

Ap�s isso, crie uma nova classe de nome MercadoPagoService no pacote de servi�os e adicione o c�digo da Listagem 12. Veja que ela apenas simula o recebimento dos dados vindos do cliente JavaScript, pois precisamos antes testar o seu funcionamento. Para transformar o objeto de Pagamento recebido por par�metro em JSON fazemos uso da classe ObjectMapper (classe que encapsula os objetos JSON e os converte de String para objeto Java e vice-versa) que retorna um ObjectWriter (classe que escreve os valores em JSON ap�s as convers�es). No final imprimimos o valor no Console para analisar se tudo veio corretamente.


@Path("mp")
public class MercadoPagoService {

  @POST
  @Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
  @Produces(MediaType.TEXT_PLAIN)
  @Path("/pay")
  public boolean gerarPagamento(Pagamento pagamento) {
    try {
           ObjectWriter ow = new ObjectMapper().writer()
           .withDefaultPrettyPrinter();
           String json = ow.writeValueAsString(pagamento);
           System.out.println(json);
           
           return true;
    } catch (Exception e) {
           e.printStackTrace();
           return false;
    }
  }
}

Listagem 12. Classe de servi�o para o MercadoPago

Agora com o m�todo de servi�o pronto, podemos focar na API do MercadoPago para Java. O primeiro passo � adicionar as depend�ncias no pom.xml, logo abra o arquivo e adicione as instru��es exibidas na Listagem 13. A primeira instru��o diz ao Maven para considerar o reposit�rio informado na tag <url> como um local v�lido a se buscar libs, isso porque, por padr�o, o Maven busca bibliotecas apenas no seu reposit�rio oficial; caso precisemos referenciar libs hospedadas em outros sites (como o GitHub no caso do MercadoPago) � necess�rio informar a URL dos mesmos na referida tag. A segunda representa a instru��o de download das libs do MercadoPago em si.


// Adicione ap�s a tag <packaging>
  <repositories>
         <repository>
               <id>mercadopago</id>
               <url>https://github.com/mercadopago/sdk-java/raw/master/releases</url>
         </repository>
  </repositories>
   
  // Adicione dentro da tag <dependencies>
  <dependency>
         <groupId>com.mercadopago</groupId>
         <artifactId>sdk</artifactId>
         <version>0.3.4</version>
  </dependency>

Listagem 13. Instru��es para adicionar as libs do MercadoPago no projeto Java

Agora, nosso c�digo pode evoluir para o demonstrado na Listagem 14. Observe que na linha 11 instanciamos um objeto MP e passamos para ele o valor do nosso token de acesso. Esse mesmo valor est� na p�gina de credenciais da sua aplica��o no site de desenvolvedores. Ap�s isso, o resto � muito simples: basta chamar o m�todo post() da API passando a URL que se deseja processar (no caso um pagamento) e o JSON j� formatado. Para checar se o pagamento ocorreu com sucesso, basta verificar se o c�digo do status veio como 200 ou 201.


@POST
@Consumes(MediaType.APPLICATION_JSON + ";charset=utf-8")
@Produces(MediaType.TEXT_PLAIN)
@Path("/pay")
public boolean gerarPagamento(Pagamento pagamento) {
   boolean retorno = false;
   try {
      ObjectWriter ow = new ObjectMapper().writer().withDefaultPrettyPrinter();
      String jsonPagamento = ow.writeValueAsString(pagamento);

      MP mp = new MP("SEU_ACCESS_TOKEN_AQUI");

      JSONObject payment = mp.post("/v1/payments", jsonPagamento);
      
      if (payment.getInt("status") == 200 || payment.getInt("status") == 201) {
             retorno = true;
      }
   } catch (Exception e) {
      e.printStackTrace();
   }
   return retorno;
}

Listagem 14. C�digo da fun��o com chamada ao servi�o do MercadoPago

Para efetuar pagamentos parcelados, basta setar o atributo parcelas do objeto Pagamento com o valor selecionado pelo usu�rio no picker de parcelamento que criamos antes, isso ser� o suficiente para que o MercadoPago aplique as taxas de custeio em cima do valor total e credite tais dados do usu�rio final.

A API do MercadoPago apresenta muitas outras op��es para otimizar o seu desenvolvimento, portanto n�o esque�a de sempre ler atentamente a documenta��o oficial dessas plataformas. Voc� pode implementar recursos como o salvamento e recupera��o autom�tica dos cart�es do seu cliente, via API do MercadoPago para evitar ter de salvar tais dados no seu pr�prio aplicativo, assim como comunicar os recebimentos por e-mail, bem como gerenciar seus ganhos via painel do Sandbox. Mas lembre-se: � importante checar antes no site da companhia os custos de cada opera��o que a empresa certamente te cobrar�, cada uma tem suas pr�prias taxas. Bons estudos!

Links:

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

Por Julio Em 2016

Coment�rios nesta publica��o Escrever um coment�rio sobre conte�do

Cryptos Informa��o

N�vel 0

Boa noite, fiz toda a aplica��o conforme a aula. Segui os tutorias de homologa��o e j� fiz a instala��o do SSL em minha hospedagem, porem quando eu vou inicializar o app, o sdk do mercado pago me da esse erro:
Uncaught Error: Your payment cannot be processed because the website contains credit card data and is not using a secure connection.SSL certificate is required to operate.

At� onde procurei, isso me informa que o SSL n�o esta sendo encontrado na pagina em que se est� tentando usar os servi�os do mercado pago. Contudo, sei que para a pagina WEB estar com SSL, todos os links dentro da pagina tem que estar com o caminho de HTTPS. Com isso, eu comentei todos os links do meu app e essa mensagem parou de ser exibida. E essa � minha duvida, se eu realmente tiver que colocar os links com HTTPS(ou seja, externos ao app), como fa�o pra links de JS e CSS que est�o dentro do app? Tenho que colocar tudo na hospedagem? Isso n�o impactaria na performance do projeto? Uma vez que ele ter� que fazer a requisi��o de cada arquivo.

Obrigado

há +1 ano

Ver coment�rios anteriores (2)

Julio Sampaio

N�vel 0

Ol� Crypts,

Neste caso voc� tem que entrar em contato com o suporte do MercadoPago, j� que voc� n�o possui nenhum link inseguro (servido via http).

Abra�o!

há +1 ano

Cryptos Informa��o

N�vel 0

Ola equipe, em muitos casos acontece o erro de Access-Control-Allow-Origin conforme abaixo:

XMLHttpRequest cannot load http://caminho-do-servidor/pagamento.php. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "null" is therefore not allowed access.

Isso quando fazemos acesso via requisi��es ajax em outro servidor que n�o da uma "permiss�o". Como evitar esse erro?

há +1 ano

Ver coment�rios anteriores (3)

Moderacao Devmedia

N�vel 0

Obrigado pelo elogio :D

há +1 ano

Wibson Teixeira

N�vel 3

Bom dia! Gostaria de saber se vc pode me indicar um plugin cordova/phonegap para imprimir via impressora bluetooht? Achei algumas coisas no google, mas n�o tem documenta��o, sendo assim, n sei como usar e se vai servir na impressora que pretendo comprar p teste. Vc poderia me dar um help? E vcs tem planos de lan�ar um artigo com algo do g�nero? Vi que muita gente passa pelo mesmo problema que eu. Por fim, segue o link da impressora que eu pretendo comprar: http://produto.mercadolivre.com.br/MLB-779507675-mini-impressora-termica-thermical-bluetooth-58mm-capa-case-_JM ou http://produto.mercadolivre.com.br/MLB-728251086-mini-impressora-bluetooth-android-win-58mm-nota-fiscal-_JM .
Obrigado!

há +1 ano

Julio Sampaio

N�vel 0

Ol� Wibson,

No momento n�o h� nenhuma previs�o de artigo/aula sobre este assunto. O que posso te indicar agora s�o os seguintes links:

https://github.com/eddysby2000/Cordova-Bluetooth-Printer-Plugin
http://stackoverflow.com/questions/4656199/bluetooth-and-wifi-printing-for-android
http://stackoverflow.com/questions/14796422/how-to-send-data-to-bluetooth-printer-vai-android-app

Abra�o!

há +1 ano

Black November

Desconto exclusivo para as primeiras 200 matrículas!

Pagamento anual

12x no cartão

De: R$ 69,00

Por: R$ 54,90

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
12 meses de acesso

Pagamento recorrente

Cobrado mensalmente no cartão

De: R$ 79,00

Por: R$ 54,90 /mês

Total: R$ 658,80

Garanta o desconto

Formação FullStack Completa
Carreira Front-end I e II, Algoritmo e Javascript, Back-end e Mobile
+10.000 exercícios gamificados
+50 projetos reais
Comunidade com + 200 mil alunos
Estude pelo Aplicativo (Android e iOS)
Suporte online
Fidelidade de 12 meses
Não compromete o limite do seu cartão

<Perguntas frequentes>

Carreira

Metodologia

Assinatura e Pagamentos

Cadastro

Nossos casos de sucesso

Leonardo Carlos

Eu sabia pouqu�ssimas coisas de programa��o antes de come�ar a estudar com voc�s, fui me especializando em v�rias �reas e ferramentas que tinham na plataforma, e com essa bagagem consegui um est�gio logo no in�cio do meu primeiro per�odo na faculdade.

Lucas Rodrigues

Estudo aqui na Dev desde o meio do ano passado! Nesse per�odo a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta � continuar estudando e praticando para ser um Full-Stack Dev!

Her�clito J�nior

Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma � bem intuitiva e muuuuito did�tica a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!

Julio Cablen

Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda n�o tinha visto. A did�tica � do jeito que qualquer pessoa consegue aprender. S�rio, to apaixonado, adorando demais.

Joelberth Sena

Adquiri o curso de voc�s e logo percebi que s�o os melhores do Brasil. � um passo a passo incr�vel. S� n�o aprende quem n�o quer. Foi o melhor investimento da minha vida!

Felipe Nunes

Foi um dos melhores investimentos que j� fiz na vida e tenho aprendido bastante com a plataforma. Voc�s est�o fazendo parte da minha jornada nesse mundo da programa��o, irei assinar meu contrato como programador gra�as a plataforma.

Wanderson Oliveira

Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exerc�cios pr�ticos que n�o tem como n�o aprender, est�o de parab�ns!

Jos� Lucas

Obrigado DevMedia, nunca presenciei uma plataforma de ensino t�o presente na vida acad�mica de seus alunos, parab�ns!

Eduardo Dorneles

Aprendi React na plataforma da DevMedia h� cerca de 1 ano e meio... Hoje estou h� 1 ano empregado trabalhando 100% com React!

Adauto Junior

J� fiz alguns cursos na �rea e nenhum � t�o bom quanto o de voc�s. Estou aprendendo muito, muito obrigado por existirem. Est�o de parab�ns... Espero um dia conseguir um emprego na �rea.

Ver todos os casos de sucesso

Criando uma mini loja virtual com PhoneGap - Parte 5

O artigo explora v�rios conceitos acerca da constru��o de apps h�bridos usando PhoneGap, especificamente focado no m�dulo de pagamentos com cart�o de cr�dito implementado via API do MercadoPago.

Integrando a API do MercadoPago

Coletando os dados de pagamento

Pickers na p�gina de pagamento

MercadoPago: SDK JavaScript

Buscando dados da bandeira

Enviando os dados ao MercadoPago

Finalizando o back-end

Confira outros conte�dos:

Programador Mobile

Desenvolvimento de aplicativos para...

Conceitos b�sicos para programar para...

<Perguntas frequentes>

Nossos casos de sucesso