├── .gitignore ├── LICENSE.txt ├── README.md ├── client ├── bower.json ├── customintegration.html ├── customintegration.js ├── customintegration.png ├── dropin.html ├── dropin.js ├── dropin.png ├── index.html ├── index.js └── styles.css └── server ├── app.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | .idea 3 | .DS_Store 4 | server/node_modules 5 | client/bower_components -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | 2 | Apache License 3 | Version 2.0, January 2004 4 | http://www.apache.org/licenses/ 5 | 6 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 7 | 8 | 1. Definitions. 9 | 10 | "License" shall mean the terms and conditions for use, reproduction, 11 | and distribution as defined by Sections 1 through 9 of this document. 12 | 13 | "Licensor" shall mean the copyright owner or entity authorized by 14 | the copyright owner that is granting the License. 15 | 16 | "Legal Entity" shall mean the union of the acting entity and all 17 | other entities that control, are controlled by, or are under common 18 | control with that entity. For the purposes of this definition, 19 | "control" means (i) the power, direct or indirect, to cause the 20 | direction or management of such entity, whether by contract or 21 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 22 | outstanding shares, or (iii) beneficial ownership of such entity. 23 | 24 | "You" (or "Your") shall mean an individual or Legal Entity 25 | exercising permissions granted by this License. 26 | 27 | "Source" form shall mean the preferred form for making modifications, 28 | including but not limited to software source code, documentation 29 | source, and configuration files. 30 | 31 | "Object" form shall mean any form resulting from mechanical 32 | transformation or translation of a Source form, including but 33 | not limited to compiled object code, generated documentation, 34 | and conversions to other media types. 35 | 36 | "Work" shall mean the work of authorship, whether in Source or 37 | Object form, made available under the License, as indicated by a 38 | copyright notice that is included in or attached to the work 39 | (an example is provided in the Appendix below). 40 | 41 | "Derivative Works" shall mean any work, whether in Source or Object 42 | form, that is based on (or derived from) the Work and for which the 43 | editorial revisions, annotations, elaborations, or other modifications 44 | represent, as a whole, an original work of authorship. For the purposes 45 | of this License, Derivative Works shall not include works that remain 46 | separable from, or merely link (or bind by name) to the interfaces of, 47 | the Work and Derivative Works thereof. 48 | 49 | "Contribution" shall mean any work of authorship, including 50 | the original version of the Work and any modifications or additions 51 | to that Work or Derivative Works thereof, that is intentionally 52 | submitted to Licensor for inclusion in the Work by the copyright owner 53 | or by an individual or Legal Entity authorized to submit on behalf of 54 | the copyright owner. For the purposes of this definition, "submitted" 55 | means any form of electronic, verbal, or written communication sent 56 | to the Licensor or its representatives, including but not limited to 57 | communication on electronic mailing lists, source code control systems, 58 | and issue tracking systems that are managed by, or on behalf of, the 59 | Licensor for the purpose of discussing and improving the Work, but 60 | excluding communication that is conspicuously marked or otherwise 61 | designated in writing by the copyright owner as "Not a Contribution." 62 | 63 | "Contributor" shall mean Licensor and any individual or Legal Entity 64 | on behalf of whom a Contribution has been received by Licensor and 65 | subsequently incorporated within the Work. 66 | 67 | 2. Grant of Copyright License. Subject to the terms and conditions of 68 | this License, each Contributor hereby grants to You a perpetual, 69 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 70 | copyright license to reproduce, prepare Derivative Works of, 71 | publicly display, publicly perform, sublicense, and distribute the 72 | Work and such Derivative Works in Source or Object form. 73 | 74 | 3. Grant of Patent License. Subject to the terms and conditions of 75 | this License, each Contributor hereby grants to You a perpetual, 76 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 77 | (except as stated in this section) patent license to make, have made, 78 | use, offer to sell, sell, import, and otherwise transfer the Work, 79 | where such license applies only to those patent claims licensable 80 | by such Contributor that are necessarily infringed by their 81 | Contribution(s) alone or by combination of their Contribution(s) 82 | with the Work to which such Contribution(s) was submitted. If You 83 | institute patent litigation against any entity (including a 84 | cross-claim or counterclaim in a lawsuit) alleging that the Work 85 | or a Contribution incorporated within the Work constitutes direct 86 | or contributory patent infringement, then any patent licenses 87 | granted to You under this License for that Work shall terminate 88 | as of the date such litigation is filed. 89 | 90 | 4. Redistribution. You may reproduce and distribute copies of the 91 | Work or Derivative Works thereof in any medium, with or without 92 | modifications, and in Source or Object form, provided that You 93 | meet the following conditions: 94 | 95 | (a) You must give any other recipients of the Work or 96 | Derivative Works a copy of this License; and 97 | 98 | (b) You must cause any modified files to carry prominent notices 99 | stating that You changed the files; and 100 | 101 | (c) You must retain, in the Source form of any Derivative Works 102 | that You distribute, all copyright, patent, trademark, and 103 | attribution notices from the Source form of the Work, 104 | excluding those notices that do not pertain to any part of 105 | the Derivative Works; and 106 | 107 | (d) If the Work includes a "NOTICE" text file as part of its 108 | distribution, then any Derivative Works that You distribute must 109 | include a readable copy of the attribution notices contained 110 | within such NOTICE file, excluding those notices that do not 111 | pertain to any part of the Derivative Works, in at least one 112 | of the following places: within a NOTICE text file distributed 113 | as part of the Derivative Works; within the Source form or 114 | documentation, if provided along with the Derivative Works; or, 115 | within a display generated by the Derivative Works, if and 116 | wherever such third-party notices normally appear. The contents 117 | of the NOTICE file are for informational purposes only and 118 | do not modify the License. You may add Your own attribution 119 | notices within Derivative Works that You distribute, alongside 120 | or as an addendum to the NOTICE text from the Work, provided 121 | that such additional attribution notices cannot be construed 122 | as modifying the License. 123 | 124 | You may add Your own copyright statement to Your modifications and 125 | may provide additional or different license terms and conditions 126 | for use, reproduction, or distribution of Your modifications, or 127 | for any such Derivative Works as a whole, provided Your use, 128 | reproduction, and distribution of the Work otherwise complies with 129 | the conditions stated in this License. 130 | 131 | 5. Submission of Contributions. Unless You explicitly state otherwise, 132 | any Contribution intentionally submitted for inclusion in the Work 133 | by You to the Licensor shall be under the terms and conditions of 134 | this License, without any additional terms or conditions. 135 | Notwithstanding the above, nothing herein shall supersede or modify 136 | the terms of any separate license agreement you may have executed 137 | with Licensor regarding such Contributions. 138 | 139 | 6. Trademarks. This License does not grant permission to use the trade 140 | names, trademarks, service marks, or product names of the Licensor, 141 | except as required for reasonable and customary use in describing the 142 | origin of the Work and reproducing the content of the NOTICE file. 143 | 144 | 7. Disclaimer of Warranty. Unless required by applicable law or 145 | agreed to in writing, Licensor provides the Work (and each 146 | Contributor provides its Contributions) on an "AS IS" BASIS, 147 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 148 | implied, including, without limitation, any warranties or conditions 149 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 150 | PARTICULAR PURPOSE. You are solely responsible for determining the 151 | appropriateness of using or redistributing the Work and assume any 152 | risks associated with Your exercise of permissions under this License. 153 | 154 | 8. Limitation of Liability. In no event and under no legal theory, 155 | whether in tort (including negligence), contract, or otherwise, 156 | unless required by applicable law (such as deliberate and grossly 157 | negligent acts) or agreed to in writing, shall any Contributor be 158 | liable to You for damages, including any direct, indirect, special, 159 | incidental, or consequential damages of any character arising as a 160 | result of this License or out of the use or inability to use the 161 | Work (including but not limited to damages for loss of goodwill, 162 | work stoppage, computer failure or malfunction, or any and all 163 | other commercial damages or losses), even if such Contributor 164 | has been advised of the possibility of such damages. 165 | 166 | 9. Accepting Warranty or Additional Liability. While redistributing 167 | the Work or Derivative Works thereof, You may choose to offer, 168 | and charge a fee for, acceptance of support, warranty, indemnity, 169 | or other liability obligations and/or rights consistent with this 170 | License. However, in accepting such obligations, You may act only 171 | on Your own behalf and on Your sole responsibility, not on behalf 172 | of any other Contributor, and only if You agree to indemnify, 173 | defend, and hold each Contributor harmless for any liability 174 | incurred by, or claims asserted against, such Contributor by reason 175 | of your accepting any such warranty or additional liability. 176 | 177 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # demo-braintree-angular-node 2 | Transaction sale with Angular Material (server in Node, client with Angular using dropin and custom integration) 3 | 4 | ### 1. Setup a Braintree Sandbox Account 5 | - Visit [https://www.braintreepayments.com/v.zero](https://www.braintreepayments.com/v.zero) 6 | - Click on `log in` then choose `sandbox` 7 | - Click on `sign up` 8 | - Fill out the form and click on `sign up` 9 | - Check your inbox, open the *Braintree Sandbox Account Creation* message 10 | - Click on the link in the email to finish the sign up process 11 | - Fill out the form and then you will be prompted to provide your phone number 12 | - You will get a *Braintree verification code* via text message 13 | - Type the verification code and click on `confirm` 14 | - Done! Now you have Braintree Sandbox Account up and running. 15 | - To get your credentials, click on `account` then `my user`, scroll down and click on `api keys` 16 | - Under *Private*, click on `view` 17 | - You are now able to get your credentials (the default code sample is shown in *Java*, but you can switch to view it in *.NET*, *Node*, *Perl*, *PHP*, *Python* or *Ruby*) 18 | 19 | Sample credentials in Node: 20 | 21 | ```javascript 22 | var gateway = braintree.connect({ 23 | environment: braintree.Environment.Sandbox, 24 | merchantId: 'ffdqc9fyffn7yn2j', 25 | publicKey: 'qj65nndbnn6qyjkp', 26 | privateKey: 'a3de3bb7dddf68ed3c33f4eb6d9579ca' 27 | }); 28 | ``` 29 | 30 | ### Before moving forward 31 | - Make sure you have **Node** installed, if not download+install: [nodejs.org/download](http://nodejs.org/download) *(we need Node.js to write and run our server)* 32 | - Make sure you have **Bower** installed, if not download+install by running `npm install bower -g` *(we need Bower to manage our UI packages such as Angular, Angular-Material and Braintree-web)* 33 | - To check if Node is installed correctly, in terminal, type `node -v` 34 | - To check if Bower is installed correctly, in terminal, type `bower -v` 35 | 36 | ### 2. Setup a server (sample using Node) 37 | - In your project folder, create a folder called `server` 38 | - Navigate to */server* and type `npm init` to create our project *package.json* 39 | - For this project we will need to install some packages using *npm*, do it with: `npm install body-parser braintree express util --save` 40 | - Your *package.json* will look similar to: 41 | 42 | ```javascript 43 | { 44 | "name": "server", 45 | "version": "1.0.0", 46 | "description": "A server to process a sale transaction with Braintree", 47 | "main": "app.js", 48 | "scripts": { 49 | "start": "node app", 50 | "test": "echo \"Error: no test specified\" && exit 1" 51 | }, 52 | "author": "Demian Borba (dborba@paypal.com)", 53 | "license": "Apache", 54 | "dependencies": { 55 | "body-parser": "^1.12.0", 56 | "braintree": "^1.23.0", 57 | "express": "^4.12.0", 58 | "util": "^0.10.3" 59 | } 60 | } 61 | ``` 62 | 63 | - Create a file named `app.js` and write the code for your server: 64 | 65 | ```javascript 66 | 'use strict'; 67 | 68 | var util = require('util'); 69 | var express = require('express'); 70 | var braintree = require('braintree'); 71 | var bodyParser = require('body-parser'); 72 | 73 | /** 74 | * Instantiate your server and a JSON parser to parse all incoming requests 75 | */ 76 | var app = express(); 77 | var jsonParser = bodyParser.json(); 78 | 79 | /** 80 | * Instantiate your gateway (update here with your Braintree API Keys) 81 | */ 82 | var gateway = braintree.connect({ 83 | environment: braintree.Environment.Sandbox, 84 | merchantId: '6dr2nwjy8f56mqyt', 85 | publicKey: 'yxhwjftm8t34rcmg', 86 | privateKey: '21fa3101d6721f02312a2503985db88c' 87 | }); 88 | 89 | /** 90 | * Enable CORS (http://enable-cors.org/server_expressjs.html) 91 | * to allow different clients to request data from your server 92 | */ 93 | app.use(function(req, res, next) { 94 | res.header("Access-Control-Allow-Origin", "*"); 95 | res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 96 | next(); 97 | }); 98 | 99 | /** 100 | * Route that returns a token to be used on the client side to tokenize payment details 101 | */ 102 | app.post('/api/v1/token', function (request, response) { 103 | gateway.clientToken.generate({}, function (err, res) { 104 | if (err) throw err; 105 | response.json({ 106 | "client_token": res.clientToken 107 | }); 108 | }); 109 | }); 110 | 111 | /** 112 | * Route to process a sale transaction 113 | */ 114 | app.post('/api/v1/process', jsonParser, function (request, response) { 115 | var transaction = request.body; 116 | gateway.transaction.sale({ 117 | amount: transaction.amount, 118 | paymentMethodNonce: transaction.payment_method_nonce 119 | }, function (err, result) { 120 | if (err) throw err; 121 | console.log(util.inspect(result)); 122 | response.json(result); 123 | }); 124 | }); 125 | 126 | app.listen(3000, function () { 127 | console.log('Listening on port 3000'); 128 | }); 129 | ``` 130 | 131 | - Start your server with `node app` 132 | - Make a test request to check if token in being returned, by opening a new terminal window and typing `curl -X POST http://localhost:3000/api/v1/token` 133 | 134 | ### 3. Setup a client app (sample using Angular) 135 | - In your project folder, create a folder called `client` 136 | - Navigate to */client* and type `bower init` to create our project *bower.json* 137 | - For this project we will need to install some UI packages using *Bower*, do it with: `bower install angular angular-material braintree-web --save` 138 | - Your *bower.json* will look similar to: 139 | 140 | ```javascript 141 | { 142 | "name": "client", 143 | "version": "1.0.0", 144 | "authors": [ 145 | "Demian Borba " 146 | ], 147 | "description": "A client to request a sale transaction with Braintree", 148 | "main": "index.html", 149 | "license": "Apache", 150 | "ignore": [ 151 | "**/.*", 152 | "node_modules", 153 | "bower_components", 154 | "test", 155 | "tests" 156 | ], 157 | "dependencies": { 158 | "angular": "~1.3.14", 159 | "angular-material": "~0.8.1", 160 | "angular-animate": "~1.3.5", 161 | "angular-aria": "~1.3.5", 162 | "hammerjs": "~2.0.4", 163 | "braintree-web": "~2.5.1" 164 | } 165 | } 166 | ``` 167 | 168 | - In your page, create 3 html files: `index.html`, `dropin.html` and `customintegration.html` 169 | - Open `index.html` and write a simple page to have links to `dropin.html` and `customintegration.html`: 170 | 171 | ```html 172 | 173 | 174 | 175 | 176 | 177 | Braintree with Angular and Node 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 |
186 | Braintree Samples with Angular and Node 187 |
188 | 189 | 190 | 191 | 192 | 193 | 194 |
195 | {{sample.title}} 196 |
197 |
198 |

{{sample.title}}

199 |

{{sample.description}}

200 |

Tap to view this sample.

201 |
202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | ``` 218 | 219 | - Then write the Angular code for your `index.html` page in a file called `index.js`: 220 | 221 | ```javascript 222 | angular.module('IndexApp', ['ngMaterial']) 223 | .config(function ($mdThemingProvider) { 224 | $mdThemingProvider.theme('default') 225 | .primaryPalette('blue-grey'); 226 | }) 227 | .controller('IndexController', ['$scope', function ($scope) { 228 | $scope.samples = [ 229 | { 230 | icon: 'dropin.png', 231 | title: 'Dropin Sample', 232 | description: 'A client to request a sale transaction with Braintree using Dropin', 233 | link: 'dropin.html' 234 | }, 235 | { 236 | icon: 'customintegration.png', 237 | title: 'Custom Integration Sample', 238 | description: 'A client to request a sale transaction with Braintree using Custom Integration', 239 | link: 'customintegration.html' 240 | } 241 | ]; 242 | $scope.openPage = function (page) { 243 | window.location.href = page; 244 | }; 245 | }]); 246 | ``` 247 | 248 | - To make things prettier, create a file called `styles.css` with some css: 249 | 250 | ```css 251 | md-content { height: 100%; } 252 | md-item-content { cursor: pointer; } 253 | img { padding: 15px; height: 100px; } 254 | md-content { height: 100%; } 255 | md-whiteframe { padding: 5px 20px; } 256 | .dropin-container { width: 100%; } 257 | form { width: 100%; padding: 0 10px 35px 10px; } 258 | .md-button { margin: 30px 0 0 0; width: 100%; padding: 15px; } 259 | md-input-container { width: 100%; } 260 | md-progress-linear { padding: 10px; } 261 | .error { background: #e03b3b; color: #fff; } 262 | .success { background: #2db441; color: #fff; } 263 | ``` 264 | 265 | #### 3.1 Setting up a client app using v.zero's Dropin 266 | - The code for `dropin.html` is: 267 | 268 | ```html 269 | 270 | 271 | 272 | 273 | 274 | 275 | Braintree Sample with Dropin 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 |
285 | Braintree Sample with Dropin 286 |
287 | 288 | 289 | 290 | 291 | 292 | 293 |

294 | 295 |
296 | 297 |
298 | 299 | 300 | 301 | 302 | 303 | 304 |
305 | 306 | Pay Now 307 |
308 |
309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | ``` 327 | 328 | - The code for `dropin.js` is: 329 | 330 | ```javascript 331 | angular.module('DropinApp', ['ngMaterial']) 332 | .config(function ($mdThemingProvider) { 333 | $mdThemingProvider.theme('default') 334 | .primaryPalette('blue-grey'); 335 | }) 336 | .controller('DropinController', ['$scope', '$http', function ($scope, $http) { 337 | 338 | $scope.message = 'Please use the form below to pay:'; 339 | $scope.showDropinContainer = true; 340 | $scope.isError = false; 341 | $scope.isPaid = false; 342 | 343 | $scope.getToken = function () { 344 | 345 | $http({ 346 | method: 'POST', 347 | url: 'http://localhost:3000/api/v1/token' 348 | }).success(function (data) { 349 | 350 | console.log(data.client_token); 351 | 352 | braintree.setup(data.client_token, 'dropin', { 353 | container: 'checkout', 354 | // Form is not submitted by default when paymentMethodNonceReceived is implemented 355 | paymentMethodNonceReceived: function (event, nonce) { 356 | 357 | $scope.message = 'Processing your payment...'; 358 | $scope.showDropinContainer = false; 359 | 360 | $http({ 361 | method: 'POST', 362 | url: 'http://localhost:3000/api/v1/process', 363 | data: { 364 | amount: $scope.amount, 365 | payment_method_nonce: nonce 366 | } 367 | }).success(function (data) { 368 | 369 | console.log(data.success); 370 | 371 | if (data.success) { 372 | $scope.message = 'Payment authorized, thanks.'; 373 | $scope.showDropinContainer = false; 374 | $scope.isError = false; 375 | $scope.isPaid = true; 376 | 377 | } else { 378 | // implement your solution to handle payment failures 379 | $scope.message = 'Payment failed: ' + data.message + ' Please refresh the page and try again.'; 380 | $scope.isError = true; 381 | } 382 | 383 | }).error(function (error) { 384 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 385 | $scope.showDropinContainer = false; 386 | $scope.isError = true; 387 | }); 388 | 389 | } 390 | }); 391 | 392 | }).error(function (error) { 393 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 394 | $scope.showDropinContainer = false; 395 | $scope.isError = true; 396 | }); 397 | 398 | }; 399 | 400 | $scope.getToken(); 401 | 402 | }]); 403 | ``` 404 | 405 | #### 3.2 Setting up a client app using v.zero's Custom Integration 406 | - The code for `customintegration.html` is: 407 | 408 | ```html 409 | 410 | 411 | 412 | 413 | 414 | 415 | Braintree Sample with Custom Integration 416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 |
425 | Braintree Sample with Custom Integration 426 |
427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 |

436 | 437 |
438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | Pay Now 451 |
452 | 453 | 454 | 455 | 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | ``` 470 | 471 | - The code for `customintegration.js` is: 472 | 473 | ```javascript 474 | angular.module('CustomIntegrationApp', ['ngMaterial']) 475 | .config(function ($mdThemingProvider) { 476 | $mdThemingProvider.theme('default') 477 | .primaryPalette('blue-grey'); 478 | }) 479 | .controller('CustomIntegrationController', ['$scope', '$http', function ($scope, $http) { 480 | 481 | $scope.message = 'Please use the form below to pay:'; 482 | 483 | $scope.message = 'Please use the form below to pay:'; 484 | $scope.isError = false; 485 | $scope.isPaid = false; 486 | $scope.showForm = true; 487 | 488 | $scope.processPayment = function () { 489 | 490 | $scope.message = 'Processing payment...'; 491 | $scope.showForm = false; 492 | 493 | // send request to get token, then use the token to tokenize credit card info and process a transaction 494 | $http({ 495 | method: 'POST', 496 | url: 'http://localhost:3000/api/v1/token' 497 | }).success(function (data) { 498 | 499 | // create new client and tokenize card 500 | var client = new braintree.api.Client({clientToken: data.client_token}); 501 | client.tokenizeCard({ 502 | number: $scope.creditCardNumber, 503 | expirationDate: $scope.expirationDate 504 | }, function (err, nonce) { 505 | 506 | $http({ 507 | method: 'POST', 508 | url: 'http://localhost:3000/api/v1/process', 509 | data: { 510 | amount: $scope.amount, 511 | payment_method_nonce: nonce 512 | } 513 | }).success(function (data) { 514 | 515 | console.log(data.success); 516 | $scope.showForm = false; 517 | 518 | if (data.success) { 519 | $scope.message = 'Payment authorized, thanks.'; 520 | $scope.isError = false; 521 | $scope.isPaid = true; 522 | 523 | } else { 524 | // implement your solution to handle payment failures 525 | $scope.message = 'Payment failed: ' + data.message + ' Please refresh the page and try again.'; 526 | $scope.isError = true; 527 | } 528 | 529 | }).error(function (error) { 530 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 531 | $scope.isError = true; 532 | $scope.showForm = false; 533 | }); 534 | 535 | }); 536 | 537 | }).error(function (error) { 538 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 539 | $scope.isError = true; 540 | $scope.showForm = false; 541 | }); 542 | 543 | }; 544 | 545 | }]); 546 | ``` -------------------------------------------------------------------------------- /client/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "1.0.0", 4 | "authors": [ 5 | "Demian Borba " 6 | ], 7 | "description": "A client to request a sale transaction with Braintree", 8 | "main": "index.html", 9 | "license": "Apache", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "angular": "~1.3.14", 19 | "angular-material": "~0.8.1", 20 | "angular-animate": "~1.3.5", 21 | "angular-aria": "~1.3.5", 22 | "hammerjs": "~2.0.4", 23 | "braintree-web": "~2.5.1" 24 | } 25 | } -------------------------------------------------------------------------------- /client/customintegration.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Braintree Sample with Custom Integration 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Braintree Sample with Custom Integration 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |

28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | Pay Now 43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /client/customintegration.js: -------------------------------------------------------------------------------- 1 | angular.module('CustomIntegrationApp', ['ngMaterial']) 2 | .config(function ($mdThemingProvider) { 3 | $mdThemingProvider.theme('default') 4 | .primaryPalette('blue-grey'); 5 | }) 6 | .controller('CustomIntegrationController', ['$scope', '$http', function ($scope, $http) { 7 | 8 | $scope.message = 'Please use the form below to pay:'; 9 | 10 | $scope.message = 'Please use the form below to pay:'; 11 | $scope.isError = false; 12 | $scope.isPaid = false; 13 | $scope.showForm = true; 14 | 15 | $scope.processPayment = function () { 16 | 17 | $scope.message = 'Processing payment...'; 18 | $scope.showForm = false; 19 | 20 | // send request to get token, then use the token to tokenize credit card info and process a transaction 21 | $http({ 22 | method: 'POST', 23 | url: 'http://localhost:3000/api/v1/token' 24 | }).success(function (data) { 25 | 26 | // create new client and tokenize card 27 | var client = new braintree.api.Client({clientToken: data.client_token}); 28 | client.tokenizeCard({ 29 | number: $scope.creditCardNumber, 30 | expirationDate: $scope.expirationDate 31 | }, function (err, nonce) { 32 | 33 | $http({ 34 | method: 'POST', 35 | url: 'http://localhost:3000/api/v1/process', 36 | data: { 37 | amount: $scope.amount, 38 | payment_method_nonce: nonce 39 | } 40 | }).success(function (data) { 41 | 42 | console.log(data.success); 43 | $scope.showForm = false; 44 | 45 | if (data.success) { 46 | $scope.message = 'Payment authorized, thanks.'; 47 | $scope.isError = false; 48 | $scope.isPaid = true; 49 | 50 | } else { 51 | // implement your solution to handle payment failures 52 | $scope.message = 'Payment failed: ' + data.message + ' Please refresh the page and try again.'; 53 | $scope.isError = true; 54 | } 55 | 56 | }).error(function (error) { 57 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 58 | $scope.isError = true; 59 | $scope.showForm = false; 60 | }); 61 | 62 | }); 63 | 64 | }).error(function (error) { 65 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 66 | $scope.isError = true; 67 | $scope.showForm = false; 68 | }); 69 | 70 | }; 71 | 72 | }]); -------------------------------------------------------------------------------- /client/customintegration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demianborba/demo-braintree-angular-node/87cb7062489363b5a03f754b27f020940687bf47/client/customintegration.png -------------------------------------------------------------------------------- /client/dropin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Braintree Sample with Dropin 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | Braintree Sample with Dropin 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | Pay Now 39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /client/dropin.js: -------------------------------------------------------------------------------- 1 | angular.module('DropinApp', ['ngMaterial']) 2 | .config(function ($mdThemingProvider) { 3 | $mdThemingProvider.theme('default') 4 | .primaryPalette('blue-grey'); 5 | }) 6 | .controller('DropinController', ['$scope', '$http', function ($scope, $http) { 7 | 8 | $scope.message = 'Please use the form below to pay:'; 9 | $scope.showDropinContainer = true; 10 | $scope.isError = false; 11 | $scope.isPaid = false; 12 | 13 | $scope.getToken = function () { 14 | 15 | $http({ 16 | method: 'POST', 17 | url: 'http://localhost:3000/api/v1/token' 18 | }).success(function (data) { 19 | 20 | console.log(data.client_token); 21 | 22 | braintree.setup(data.client_token, 'dropin', { 23 | container: 'checkout', 24 | // Form is not submitted by default when paymentMethodNonceReceived is implemented 25 | paymentMethodNonceReceived: function (event, nonce) { 26 | 27 | $scope.message = 'Processing your payment...'; 28 | $scope.showDropinContainer = false; 29 | 30 | $http({ 31 | method: 'POST', 32 | url: 'http://localhost:3000/api/v1/process', 33 | data: { 34 | amount: $scope.amount, 35 | payment_method_nonce: nonce 36 | } 37 | }).success(function (data) { 38 | 39 | console.log(data.success); 40 | 41 | if (data.success) { 42 | $scope.message = 'Payment authorized, thanks.'; 43 | $scope.showDropinContainer = false; 44 | $scope.isError = false; 45 | $scope.isPaid = true; 46 | 47 | } else { 48 | // implement your solution to handle payment failures 49 | $scope.message = 'Payment failed: ' + data.message + ' Please refresh the page and try again.'; 50 | $scope.isError = true; 51 | } 52 | 53 | }).error(function (error) { 54 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 55 | $scope.showDropinContainer = false; 56 | $scope.isError = true; 57 | }); 58 | 59 | } 60 | }); 61 | 62 | }).error(function (error) { 63 | $scope.message = 'Error: cannot connect to server. Please make sure your server is running.'; 64 | $scope.showDropinContainer = false; 65 | $scope.isError = true; 66 | }); 67 | 68 | }; 69 | 70 | $scope.getToken(); 71 | 72 | }]); -------------------------------------------------------------------------------- /client/dropin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/demianborba/demo-braintree-angular-node/87cb7062489363b5a03f754b27f020940687bf47/client/dropin.png -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Braintree with Angular and Node 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | Braintree Samples with Angular and Node 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | {{sample.title}} 25 |
26 |
27 |

{{sample.title}}

28 |

{{sample.description}}

29 |

Tap to view this sample.

30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /client/index.js: -------------------------------------------------------------------------------- 1 | angular.module('IndexApp', ['ngMaterial']) 2 | .config(function ($mdThemingProvider) { 3 | $mdThemingProvider.theme('default') 4 | .primaryPalette('blue-grey'); 5 | }) 6 | .controller('IndexController', ['$scope', function ($scope) { 7 | $scope.samples = [ 8 | { 9 | icon: 'dropin.png', 10 | title: 'Dropin Sample', 11 | description: 'A client to request a sale transaction with Braintree using Dropin', 12 | link: 'dropin.html' 13 | }, 14 | { 15 | icon: 'customintegration.png', 16 | title: 'Custom Integration Sample', 17 | description: 'A client to request a sale transaction with Braintree using Custom Integration', 18 | link: 'customintegration.html' 19 | } 20 | ]; 21 | $scope.openPage = function (page) { 22 | window.location.href = page; 23 | }; 24 | }]); -------------------------------------------------------------------------------- /client/styles.css: -------------------------------------------------------------------------------- 1 | md-content { height: 100%; } 2 | md-item-content { cursor: pointer; } 3 | img { padding: 15px; height: 100px; } 4 | md-content { height: 100%; } 5 | md-whiteframe { padding: 5px 20px; } 6 | .dropin-container { width: 100%; } 7 | form { width: 100%; padding: 0 10px 35px 10px; } 8 | .md-button { margin: 30px 0 0 0; width: 100%; padding: 15px; } 9 | md-input-container { width: 100%; } 10 | md-progress-linear { padding: 10px; } 11 | .error { background: #e03b3b; color: #fff; } 12 | .success { background: #2db441; color: #fff; } -------------------------------------------------------------------------------- /server/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var util = require('util'); 4 | var express = require('express'); 5 | var braintree = require('braintree'); 6 | var bodyParser = require('body-parser'); 7 | 8 | /** 9 | * Instantiate your server and a JSON parser to parse all incoming requests 10 | */ 11 | var app = express(); 12 | var jsonParser = bodyParser.json(); 13 | 14 | /** 15 | * Instantiate your gateway (update here with your Braintree API Keys) 16 | */ 17 | var gateway = braintree.connect({ 18 | environment: braintree.Environment.Sandbox, 19 | merchantId: '6dr2nwjy8f56mqyt', 20 | publicKey: 'yxhwjftm8t34rcmg', 21 | privateKey: '21fa3101d6721f02312a2503985db88c' 22 | }); 23 | 24 | /** 25 | * Enable CORS (http://enable-cors.org/server_expressjs.html) 26 | * to allow different clients to request data from your server 27 | */ 28 | app.use(function(req, res, next) { 29 | res.header("Access-Control-Allow-Origin", "*"); 30 | res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 31 | next(); 32 | }); 33 | 34 | /** 35 | * Route that returns a token to be used on the client side to tokenize payment details 36 | */ 37 | app.post('/api/v1/token', function (request, response) { 38 | gateway.clientToken.generate({}, function (err, res) { 39 | if (err) throw err; 40 | response.json({ 41 | "client_token": res.clientToken 42 | }); 43 | }); 44 | }); 45 | 46 | /** 47 | * Route to process a sale transaction 48 | */ 49 | app.post('/api/v1/process', jsonParser, function (request, response) { 50 | var transaction = request.body; 51 | gateway.transaction.sale({ 52 | amount: transaction.amount, 53 | paymentMethodNonce: transaction.payment_method_nonce 54 | }, function (err, result) { 55 | if (err) throw err; 56 | console.log(util.inspect(result)); 57 | response.json(result); 58 | }); 59 | }); 60 | 61 | app.listen(3000, function () { 62 | console.log('Listening on port 3000'); 63 | }); -------------------------------------------------------------------------------- /server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "A server to process a sale transaction with Braintree", 5 | "main": "app.js", 6 | "scripts": { 7 | "start": "node app", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "Demian Borba (dborba@paypal.com)", 11 | "license": "Apache", 12 | "dependencies": { 13 | "body-parser": "^1.12.0", 14 | "braintree": "^1.23.0", 15 | "express": "^4.12.0", 16 | "util": "^0.10.3" 17 | } 18 | } 19 | --------------------------------------------------------------------------------