4 |
5 |
6 | 
| Descrição | 11 |Valor | 12 |desc; ?> 16 | | R$ valor; ?> 17 | | 18 |
|---|
.png){kind=spacer}
',
31 | )
32 | );
33 |
34 | } else if ($id == '1406385621000') {
35 | return json_encode(
36 | array(
37 | 'id' => '1406385621000',
38 | 'desc' => 'Apostila Digital de Redação (PDF)',
39 | 'valor' => '29,90',
40 | 'img' => 'https://www.infoenem.com.br/wp-content/uploads/2014/08/arteredacao.png',
41 | )
42 | );
43 |
44 | } else if ($id == '0110') {
45 | return json_encode(
46 | array(
47 | 'id' => '11',
48 | 'desc' => 'Promoção! Apostila Digital de Redação (PDF)',
49 | 'valor' => '19,90',
50 | 'img' => 'https://www.infoenem.com.br/wp-content/uploads/2014/08/arteredacao.png',
51 | )
52 | );
53 |
54 | } else if ($id == '0007') {
55 | return json_encode(
56 | array(
57 | 'id' => '0007',
58 | 'desc' => 'Promoção! Kit 4 Apostilas (PDF)',
59 | 'valor' => '29,80',
60 | 'img' => 'https://www.infoenem.com.br/wp-content/uploads/2013/02/EcoversDigital300x300.png',
61 | )
62 | );
63 |
64 | } else if ($id == '11') {
65 | return json_encode(
66 | array(
67 | 'id' => '11',
68 | 'desc' => 'Promoção! Apostila Digital de Redação (PDF)',
69 | 'valor' => '9,80',
70 | 'img' => 'https://www.infoenem.com.br/wp-content/uploads/2014/08/arteredacao.png',
71 | )
72 | );
73 | }
74 |
75 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Checkout Transparente PagSeguro ##
2 |
3 | Exemplo de Checkout Transparente do PagSeguro feito em **PHP**.
4 |
5 | O desenvolvimento deste foi feito utilizando a **API** do PagSeguro, e **não** a SDK PHP.
6 |
7 | Este projeto foi desenvolvido para sanar necessidades específicas do [Portal infoEnem](http://www.infoenem.com.br/), tenha em mente que sua implementação não é trivial e este projeto não dispensa um contato técnico para efetuar a instalação, configuração e personalização conforme as próprias necessidades.
8 |
9 | 
10 |
11 | ### Projeto efetua: ###
12 | - Transação inteiramente em Checkout Transparente;
13 | - Fácil mudança entre os ambientes do PagSeguro (sandbox/produção);
14 | - Responsivo usando o [Bootstrap](http://getbootstrap.com) (versão 3.3.7, via Content Delivery Network do [MaxCDN](https://www.maxcdn.com/))
15 | - Pesquisa de cep no [República Virtual](http://www.republicavirtual.com.br/) para rápido preenchimento de campos;
16 | - Campos com máscara de entrada (CPF, CEP, Data de Nascimento) para melhor visualização;
17 | - Segundo nova exigência de informar ao cliente o país no qual a transação está sendo processada;
18 | - Em casos de erros, retornados pelo PagSeguro, é exibido um modal e o campo com erro recebe destaque;
19 | - Quando Dados do Comprador são os mesmos do Titular do Cartão de Crédito, ocorre preenchimento automático;
20 | - Pega informações de parcelamento disponíveis pelo PagSeguro, para o valor da transação;
21 | - Exibe o campo data de validade e/ou código de segurança conforme necessário para o cartão informado;
22 | - Recebe e mostra a bandeira do cartão de crédito inserido;
23 | - Em caso de pagamento com boleto, a pessoa será redirecionada para o boleto ao final da transação.
24 |
25 | ### Projeto não efetua: ###
26 | - Venda de mais que um produto;
27 | - Pagamento via eft (transferência eletrônica).
28 |
29 | ### Como utilizar: ###
30 | 1. Executar um git clone no repositório: *git clone https://github.com/lubuzzo/Checkout-Transparente-PagSeguro.git*;
31 | 2. Renomei o arquivo **env-example.php** para **env.php**;
32 | 3. Altere os valores dentro do arquivo, renomeado no passo anterior, para os dados próprios (e-mail, token - obtido nas [configurações do PagSeguro](https://pagseguro.uol.com.br/preferencias/integracoes.jhtml), url de notificação;
33 | 4. Altere o **favicon.ico** conforme o seu;
34 | 5. Dentro da pasta images, altere o arquivo **logo.png** para o seu;
35 | 6. Modifique o arquivo templates/dadosProduto.php conforme os seus próprios produtos.
36 |
--------------------------------------------------------------------------------
/css/styles.css:
--------------------------------------------------------------------------------
1 | body{
2 | font-size:10px;
3 | color:#555;
4 | overflow-x: hidden;
5 | }
6 |
7 | div, p, ul, ol, li, a, img, h1, h2, h3, h4{
8 | margin:0;
9 | padding:0;
10 | border:0;
11 | }
12 |
13 | h1{
14 | margin:0.5em 0 1em 0;
15 | font-size:2em;
16 | }
17 |
18 | h2{
19 | margin:2em 0 1em 0;
20 | font-size:1.4em;
21 | }
22 |
23 |
24 |
25 | .groupData{
26 | padding:2%;
27 | border:solid 1px #DDD;
28 | margin:0 2% 0 0;
29 | background:#EFEFEF;
30 | }
31 |
32 | .field{
33 | margin:1.5em 0 1em 0;
34 | font-size:1.4em;
35 | }
36 |
37 | .field input[type='text']{
38 | padding:0.3em;
39 | border:solid 1px #999;
40 | width: 100%;
41 | }
42 |
43 | .field input:focus{
44 | background:#D6D8E0;
45 | color:#000;
46 | border:solid 1px #000;
47 | }
48 |
49 |
50 |
51 | .field label{
52 | display:block;
53 | margin:0 0 0.2em 0;
54 | }
55 |
56 | .areaCode{ width:3em!important; }
57 | .phone{ width:13em!important; }
58 | .month, .addressState{ width:3em!important; }
59 | .year{ width:5em!important; }
60 |
61 |
62 |
63 | #cartData{
64 | overflow:hidden;
65 | border:solid 5px #555;
66 | border-radius:0.5em;
67 | background:#EEE;
68 | padding:0 0 5em 0;
69 | position:relative;
70 | }
71 |
72 | #cartData h4{
73 | font-size:2em;
74 | padding:0.5em;
75 | background:#555;
76 | color:#FFF;
77 | }
78 |
79 | #cartData table{
80 | margin:0 0 1em 0;
81 | padding:0;
82 | border-collapse:collapse;
83 | width:100%;
84 | }
85 |
86 | #cartData th{
87 | font-weight:bold;
88 | color:#FFF;
89 | background:#555;
90 | font-size:1.3em !important;
91 | padding:0.5em;
92 | border:solid 1px #999;
93 | }
94 |
95 | #cartData td{
96 | padding:0.5em;
97 | font-size:1.7em !important;
98 | border:solid 1px #999;
99 | text-align:center;
100 | }
101 |
102 |
103 | #cartTotal{
104 | position:absolute;
105 | bottom:0;
106 | left:0;
107 | width:100%;
108 | background:#555;
109 | color:#FFF;
110 | padding:1em;
111 | font-size:1.5em;
112 | }
113 |
114 |
115 |
116 | #installmentsWrapper{
117 | display:none;
118 | }
119 |
120 | #boletoData{
121 | background:url('../images/boleto.png') no-repeat 0 0;
122 | padding:70px 0 0 0;
123 | background-position-x: center;
124 | }
125 |
126 |
127 | .errors{
128 | font-size:1.5em;
129 | color:red;
130 | padding:2em;
131 | }
132 | .success{
133 | color:green;
134 | }
135 |
136 |
137 | .paymentMethodGroup, .dadosOtherPagador {
138 | display: none;
139 | }
140 |
141 | #paymentMethodsOptions, #holderDataChoice {
142 | margin-left: 20px;
143 | }
144 |
145 | .produtoTabela {
146 | color: #000 !important;
147 | background: #fff !important;
148 | }
149 |
150 | #cardNumber {
151 | width: 85% !important;
152 | }
153 |
154 | .bandeiraCartao {
155 | width: 10%;
156 | }
157 |
158 | #cvvCartao, #expiraCartao {
159 | display: none;
160 | }
--------------------------------------------------------------------------------
/templates/comprador.php:
--------------------------------------------------------------------------------
1 | Esta compra está sendo feita no Brasil 
157 |