QUASAR WEBPAGO CLIENT

Pacote de instalação da api para webpago, nesta pacote contem login via modal, Pagamentos mas para isso você precisa do brothertech, c-brothertech e algumas vezes o Cod da empresa

Brothertech, C-Brothertech e Empresa

1 - clique no perfil de usuário

2 - Clique em API

3 - copie as credenciais

Install package

npm i quasar-webpago-client

Edit o quasar.conf.js
Em plugins adicione o Loading conforme a imagem abaixo:

adicione também a font fontawesome igual a imagem abaixo

Implementação WLogin

    <template>
        <q-btn @click='login.active = true'>VENDER</q-btn>
        <w-login v-model='login'
        :brothertech='brothertech' :cbrothertech='cbrothertech'
        :empresa='empresa'
        ></w-login>
    </template>
    <script>
    import {WLogin} from 'quasar-webpago-client'
    export default {
      components: {
        WLogin
      },
      data () {
        return {
          brothertech: 'seu codigo',
          cbrothertech: 'seu codigo',
          empresa: 'seu codigo'
          login: {
            active: true,
            user: {}
          }
        }
      }
    }
    </script>

Assim que o cliente realizar o login será retornado o usuário no login.user

Implementação WModal

É nossa tela de pagamento em modal que será apresentada via boleto ou cartão de credito podendo ser selecionado um ou outro somente

dataVencimento deve ser maior que a data atual

<template>
    <div>
      <q-btn @click='pagamento.active = true'>VENDER</q-btn>
      <w-modal v-model='pagamento'
      :brothertech='brothertech' :cbrothertech='cbrothertech'
      :empresa='empresa'
      />
    </div>
</template>

<script>
import {WModal} from 'quasar-webpago-client'
export default {
  components: {
    WModal
  },
  data () {
    return {
      brothertech: 'seu codigo',
      cbrothertech: 'seu codigo',
      empresa: 'seu codigo',
      pagamento: {
	dataVencimento: new Date(),
        active: true,
        formapagamento: 1, //define forma de pagamento padrao
        valor: 50,
        descricao: 'minha primeira venda',
        parcelas: [ { label: '1x', value: 1, vparcela: 50.00 }, { label: '2x', value: 2, vparcela: 65.35 } ],
        cliente: {
          nome: '222',
          sobrenome: '222',
          cpf: '2222',
          rua: '',
          bairro: '',
          cidade: '',
          uf: '',
          cep: ''
        }
      }
    }
  }
}
</script>

Caso queira desativar boleto apensas acrescente noboleto o mesmo serve para o cartão colocando nocartao

<w-modal v-model='pagamento' noboleto
  :brothertech='brothertech' :cbrothertech='cbrothertech'
  :empresa='empresa'
  />

boleto

Cartão