From c411971e782097771adc1f30cd79f931ea3931f9 Mon Sep 17 00:00:00 2001
From: "lyncas.david" <david.s@malwee.com.br>
Date: Thu, 3 Sep 2020 16:23:28 -0300
Subject: [PATCH] =?UTF-8?q?teste=20de=20integra=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json             |  85 +++++++++++-
 package.json                  |   1 +
 server.js                     |  65 +++++++++
 views/detail.handlebars       | 245 +++++++++++++++++++++++++++++++++-
 views/layouts/main.handlebars |   3 +-
 5 files changed, 392 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b14e0ad..d884973 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -121,6 +121,11 @@
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
       "dev": true
     },
+    "bluebird": {
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+      "integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM="
+    },
     "body-parser": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -232,6 +237,11 @@
       "integrity": "sha1-T6kXw+WclKAEzWH47lCdplFocUM=",
       "dev": true
     },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -883,11 +893,24 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "requires": {
+        "jsonify": "~0.0.0"
+      }
+    },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM="
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -908,6 +931,16 @@
         "package-json": "^4.0.0"
       }
     },
+    "lodash.assign": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+    },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lowercase-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
@@ -918,7 +951,6 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
       "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
       "requires": {
         "pseudomap": "^1.0.2",
         "yallist": "^2.1.2"
@@ -938,6 +970,35 @@
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
     },
+    "mercadopago": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mercadopago/-/mercadopago-1.3.2.tgz",
+      "integrity": "sha512-rQ8VQELbaKIic3s68KU6VTJFfsvc1EwtspaEqC1TSA78jeXAurpYtfSJbuVIymOl5I7U/wB7EYNk2LdO4tWi2Q==",
+      "requires": {
+        "ajv": "4.10.3",
+        "bluebird": "3.4.7",
+        "moment": "^2.24.0",
+        "request": "^2.88.0",
+        "request-etag": "2.0.3",
+        "uuid": "3.0.1"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "4.10.3",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.10.3.tgz",
+          "integrity": "sha1-Pk/qlnWxV954iLgN0O1zW4PyjhE=",
+          "requires": {
+            "co": "^4.6.0",
+            "json-stable-stringify": "^1.0.1"
+          }
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
+          "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE="
+        }
+      }
+    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -979,6 +1040,11 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -1178,8 +1244,7 @@
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
     "psl": {
       "version": "1.7.0",
@@ -1300,6 +1365,17 @@
         }
       }
     },
+    "request-etag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/request-etag/-/request-etag-2.0.3.tgz",
+      "integrity": "sha1-E8kjdhfWxYnrcYX29FC4MTBovBc=",
+      "requires": {
+        "lodash.assign": "^4.0.0",
+        "lodash.clonedeep": "^4.0.1",
+        "lru-cache": "^4.0.0",
+        "request": "^2.67.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -1674,8 +1750,7 @@
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     }
   }
 }
diff --git a/package.json b/package.json
index b8763f9..cff1c86 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "body-parser": "^1.19.0",
     "express": "^4.17.1",
     "express-handlebars": "^3.1.0",
+    "mercadopago": "^1.3.2",
     "request": "^2.88.0"
   },
   "devDependencies": {
diff --git a/server.js b/server.js
index 3112ecf..5f7ee20 100644
--- a/server.js
+++ b/server.js
@@ -20,5 +20,70 @@ app.post('/detail', function (req, res) {
     res.render('detail', req.body);
 });
 
+app.post('/process_payment', function (req, res) {
+    var mercadopago = require('mercadopago');
+    mercadopago.configurations.setAccessToken("TEST-249219817450644-111300-1ac6fc62fb47adf917a9b3da9bb907c8-141751821");
+
+    var payment_data = {
+    transaction_amount: Number(req.body.transactionAmount),
+    token: req.body.token,
+    description: req.body.description,
+    installments: Number(req.body.installments),
+    payment_method_id: req.body.paymentMethodId,
+    payer: {
+        email: req.body.email,
+        identification: {
+        type: req.body.docType,
+        number: req.body.docNumber
+        }
+    }
+    };
+
+    mercadopago.payment.save(payment_data)
+    .then(function(response) {
+        res.status(response.status).json({
+        status: response.body.status,
+        status_detail: response.body.status_detail,
+        id: response.body.id
+        });
+    })
+    .catch(function(error) {
+        res.status(response.status).send(error);
+    });
+});
+
+app.post('/process_payment_ticket', function (req, res) {
+    var mercadopago = require('mercadopago');
+    mercadopago.configurations.setAccessToken("TEST-249219817450644-111300-1ac6fc62fb47adf917a9b3da9bb907c8-141751821");
+
+    var payment_data = {
+    transaction_amount: 100,
+    description: 'Título do produto',
+    payment_method_id: 'bolbradesco',
+    payer: {
+        email: 'test@test.com',
+        first_name: 'Test',
+        last_name: 'User',
+        identification: {
+            type: 'CPF',
+            number: '19119119100'
+        },
+        address:  {
+            zip_code: '06233200',
+            street_name: 'Av. das Nações Unidas',
+            street_number: '3003',
+            neighborhood: 'Bonfim',
+            city: 'Osasco',
+            federal_unit: 'SP'
+        }
+    }
+    };
+
+    mercadopago.payment.create(payment_data).then(function (data) {
+        res.send(data);
+    }).catch(function (error) {
+
+    });
+})
 
 app.listen(process.env.PORT || 3000);
\ No newline at end of file
diff --git a/views/detail.handlebars b/views/detail.handlebars
index b8587ab..c7bfece 100644
--- a/views/detail.handlebars
+++ b/views/detail.handlebars
@@ -21,8 +21,251 @@
                     <hr class="p-0 m-0">
                     <br>
                     {{!-- ADD PAYMENT FORM HERE --}}
+
+                    <form action="/process_payment" method="post" id="paymentForm">
+                        <h3>Detalhe do comprador</h3>
+                        <div>
+                            <div>
+                                <label for="email">E-mail</label>
+                                <input id="email" name="email" type="text" value="test@test.com"></select>
+                            </div>
+                            <div>
+                                <label for="docType">Tipo de documento</label>
+                                <select id="docType" name="docType" data-checkout="docType" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="docNumber">Número do documento</label>
+                                <input id="docNumber" name="docNumber" data-checkout="docNumber" type="text"/>
+                            </div>
+                        </div>
+                        <h3>Detalhes do cartão</h3>
+                        <div>
+                            <div>
+                                <label for="cardholderName">Titular do cartão</label>
+                                <input id="cardholderName" data-checkout="cardholderName" type="text">
+                            </div>
+                            <div>
+                                <label for="">Data de vencimento</label>
+                                <div>
+                                <input type="text" placeholder="MM" id="cardExpirationMonth" data-checkout="cardExpirationMonth"
+                                    onselectstart="return false" onpaste="return false"
+                                    oncopy="return false" oncut="return false"
+                                    ondrag="return false" ondrop="return false" autocomplete=off>
+                                <span class="date-separator">/</span>
+                                <input type="text" placeholder="YY" id="cardExpirationYear" data-checkout="cardExpirationYear"
+                                    onselectstart="return false" onpaste="return false"
+                                    oncopy="return false" oncut="return false"
+                                    ondrag="return false" ondrop="return false" autocomplete=off>
+                            </div>
+                        </div>
+                        <div>
+                            <label for="cardNumber">Número do cartão</label>
+                            <input type="text" id="cardNumber" data-checkout="cardNumber"
+                            onselectstart="return false" onpaste="return false"
+                            oncopy="return false" oncut="return false"
+                            ondrag="return false" ondrop="return false" autocomplete=off>
+                        </div>
+                        <div>
+                            <label for="securityCode">Código de segurança</label>
+                            <input id="securityCode" data-checkout="securityCode" type="text"
+                            onselectstart="return false" onpaste="return false"
+                            oncopy="return false" oncut="return false"
+                            ondrag="return false" ondrop="return false" autocomplete=off>
+                        </div>
+                        <div id="issuerInput">
+                            <label for="issuer">Banco emissor</label>
+                            <select id="issuer" name="issuer" data-checkout="issuer"></select>
+                        </div>
+                        <div>
+                            <label for="installments">Parcelas</label>
+                            <select type="text" id="installments" name="installments"></select>
+                        </div>
+                        <div>
+                            <input type="hidden" name="transactionAmount" id="transactionAmount" value="100" />
+                            <input type="hidden" name="paymentMethodId" id="paymentMethodId" />
+                            <input type="hidden" name="description" id="description" />
+                            <br>
+                            <button type="submit" id="pay">Pagar</button>
+                            <br>
+                        </div>
+                    </form>
+
+
+                    <form action="/process_payment_ticket" method="post" id="paymentForm">
+                        <h3>Pagamento Boleto - Detalhes do Comprador</h3>
+                        <div>
+                            <div>
+                                <label for="name">Nome</label>
+                                <input id="name" name="name" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="email">E-mail</label>
+                                <input id="email" name="email" type="text" value="test@test.com"></select>
+                            </div>
+                            <div>
+                                <label for="docType">Tipo de documento</label>
+                                <select id="docType" name="docType" data-checkout="docType" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="docNumber">Número do documento</label>
+                                <input id="docNumber" name="docNumber" data-checkout="docNumber" type="text"/>
+                            </div>
+                        </div>
+
+                        <h3>Endereço</h3>
+                        <div>
+                            <div>
+                                <label for="street_name">Rua</label>
+                                <input id="street_name" name="street_name" type="text"></select>
+                            </div>
+
+                            <div>
+                                <label for="street_number">Número</label>
+                                <input id="street_number" name="street_number" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="neighborhood">Bairro</label>
+                                <input id="neighborhood" name="neighborhood" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="zip_code">CEP</label>
+                                <input id="zip_code" name="zip_code" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="city">Cidade</label>
+                                <input id="city" name="city" type="text"></select>
+                            </div>
+                            <div>
+                                <label for="federal_unit">Estado</label>
+                                <input id="federal_unit" name="federal_unit" type="text"></select>
+                            </div>
+                        </div>
+                        
+                        <div>
+                            <input type="hidden" name="transactionAmount" id="transactionAmount" value="100" />
+                            <input type="hidden" name="paymentMethodId" id="paymentMethodId" />
+                            <input type="hidden" name="description" id="description" />
+                            <br>
+                            <button type="submit" id="pay">Pagar</button>
+                            <br>
+                        </div>
+                    </form>
                 </div>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
+
+<script>
+    window.Mercadopago.setPublishableKey("TEST-faebd75e-b4ce-4884-b72d-e66e394fc207");
+    window.Mercadopago.getIdentificationTypes();
+
+    document.getElementById('cardNumber').addEventListener('change', guessPaymentMethod);
+
+    function guessPaymentMethod(event) {
+        let cardnumber = document.getElementById("cardNumber").value;
+        if (cardnumber.length >= 6) {
+            let bin = cardnumber.substring(0,6);
+            window.Mercadopago.getPaymentMethod({
+                "bin": bin
+            }, setPaymentMethod);
+        }
+    };
+
+    function setPaymentMethod(status, response) {
+        if (status == 200) {
+            let paymentMethod = response[0];
+            document.getElementById('paymentMethodId').value = paymentMethod.id;
+
+            if(paymentMethod.additional_info_needed.includes("issuer_id")){
+                getIssuers(paymentMethod.id);
+            } else {
+                getInstallments(
+                    paymentMethod.id,
+                    document.getElementById('transactionAmount').value
+                );
+            }
+        } else {
+            alert(`payment method info error: ${response}`);
+        }
+    }
+
+    function getIssuers(paymentMethodId) {
+        window.Mercadopago.getIssuers(
+            paymentMethodId,
+            setIssuers
+        );
+    }
+
+    function setIssuers(status, response) {
+        if (status == 200) {
+            let issuerSelect = document.getElementById('issuer');
+            response.forEach( issuer => {
+                let opt = document.createElement('option');
+                opt.text = issuer.name;
+                opt.value = issuer.id;
+                issuerSelect.appendChild(opt);
+            });
+
+            getInstallments(
+                document.getElementById('paymentMethodId').value,
+                document.getElementById('transactionAmount').value,
+                issuerSelect.value
+            );
+        } else {
+            alert(`issuers method info error: ${response}`);
+        }
+    }
+
+    function getInstallments(paymentMethodId, transactionAmount, issuerId){
+        window.Mercadopago.getInstallments({
+            "payment_method_id": paymentMethodId,
+            "amount": parseFloat(transactionAmount),
+            "issuer_id": issuerId ? parseInt(issuerId) : undefined
+        }, setInstallments);
+    }
+
+    function setInstallments(status, response){
+        if (status == 200) {
+            document.getElementById('installments').options.length = 0;
+            response[0].payer_costs.forEach( payerCost => {
+                let opt = document.createElement('option');
+                opt.text = payerCost.recommended_message;
+                opt.value = payerCost.installments;
+                document.getElementById('installments').appendChild(opt);
+            });
+        } else {
+            alert(`installments method info error: ${response}`);
+        }
+    }
+
+
+    doSubmit = false;
+    document.getElementById('paymentForm').addEventListener('submit', getCardToken);
+    function getCardToken(event){
+        event.preventDefault();
+        if(!doSubmit){
+            let $form = document.getElementById('paymentForm');
+            window.Mercadopago.createToken($form, setCardTokenAndPay);
+            return false;
+        }
+    };
+
+    function setCardTokenAndPay(status, response) {
+        if (status == 200 || status == 201) {
+            let form = document.getElementById('paymentForm');
+            let card = document.createElement('input');
+            card.setAttribute('name', 'token');
+            card.setAttribute('type', 'hidden');
+            card.setAttribute('value', response.id);
+            form.appendChild(card);
+            doSubmit=true;
+            form.submit();
+        } else {
+            alert("Verify filled data!\n"+JSON.stringify(response, null, 4));
+        }
+    };
+
+
+
+</script>
\ No newline at end of file
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars
index 28de648..1862a79 100644
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@@ -11,8 +11,9 @@
         <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
         <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
         <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-
         <link rel="stylesheet" href="/assets/custom.css" type="text/css">
+        <script src="https://secure.mlstatic.com/sdk/javascript/v1/mercadopago.js"></script>
+
     </head>
 
     <body>