vue-test

├── .gitignore ├── .babelrc ├── js ├── main.js ├── dropIn.vue ├── App.vue ├── hostedFields.vue └── paypalPayment.vue ├── index.html ├── package.json ├── LICENSE.md ├── README.md └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }] 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-test 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-test", 3 | "description": "A Vue.js project", 4 | "version": "1.1.0", 5 | "author": "Kevin Sherman ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot", 9 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 10 | }, 11 | "dependencies": { 12 | "braintree-web": "^3.22.2", 13 | "braintree-web-drop-in": "^1.7.0" 14 | }, 15 | "devDependencies": { 16 | "babel-core": "^6.26.0", 17 | "babel-loader": "^6.4.1", 18 | "babel-preset-es2015": "^6.24.0", 19 | "cross-env": "^4.0.0", 20 | "css-loader": "^0.28.5", 21 | "file-loader": "^0.11.2", 22 | "vue": "^2.4.2", 23 | "vue-loader": "^11.3.2", 24 | "vue-template-compiler": "^2.4.2", 25 | "webpack": "^2.7.0", 26 | "webpack-dev-server": "^2.7.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2016 Kevin Sherman 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VueJS Braintree Integration Example 2 | 3 | Welcome! 4 | 5 | I'm working on example integrations powered by VueJS + Webpack. 6 | 7 | Currently, I have: 8 | 9 | * A Drop-in UI Integration that uses [the Braintree Web Drop-in](https://github.com/braintree/braintree-web-drop-in) 10 | * Hosted Fields integration that uses [v3 of the JS SDK](https://developers.braintreepayments.com/start/hello-client/javascript/v3) 11 | 12 | **NOTE:** This does _not_ include the [server-side component](https://developers.braintreepayments.com/start/hello-server/), which is need to a) obtaining a Client Token and b) make API requests. You will need to supply your own server-side integration. I recommend [Node](https://developers.braintreepayments.com/start/hello-server/node) or [PHP](https://developers.braintreepayments.com/start/hello-server/php), depending what you like! 13 | 14 | ### Install: 15 | * Clone the repo 16 | * Go into the drop-in directory and `npm install` and `npm run build` to build the new Braintree Web Drop-in beta 17 | * Back in the root of the cloned project, `npm install` 18 | * After install, you have several options to run the example: 19 | `npm run dev`: opens a browser window with hot module reload 20 | `npm run build`: builds the `/dist` directory with the built scripts 21 | 22 | Disclaimer: I work at Braintree as an Overnight Technical Support rep, but this is _not_ an official library or example integration. https://developers.braintreepayments.com/ 23 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './js/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 19 | // the "scss" and "sass" values for the lang attribute to the right configs here. 20 | // other preprocessors should work out of the box, no loader config like this nessessary. 21 | 'scss': 'vue-style-loader!css-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.common.js' 44 | } 45 | }, 46 | devServer: { 47 | historyApiFallback: true, 48 | noInfo: true 49 | }, 50 | performance: { 51 | hints: false 52 | }, 53 | devtool: '#eval-source-map' 54 | } 55 | 56 | if (process.env.NODE_ENV === 'production') { 57 | module.exports.devtool = '#source-map' 58 | // http://vue-loader.vuejs.org/en/workflow/production.html 59 | module.exports.plugins = (module.exports.plugins || []).concat([ 60 | new webpack.DefinePlugin({ 61 | 'process.env': { 62 | NODE_ENV: '"production"' 63 | } 64 | }), 65 | new webpack.optimize.UglifyJsPlugin({ 66 | sourceMap: true, 67 | compress: { 68 | warnings: false 69 | } 70 | }), 71 | new webpack.LoaderOptionsPlugin({ 72 | minimize: true 73 | }) 74 | ]) 75 | } 76 | -------------------------------------------------------------------------------- /js/dropIn.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 95 | -------------------------------------------------------------------------------- /js/App.vue: -------------------------------------------------------------------------------- 1 | 70 | 71 | 129 | 130 | 225 | -------------------------------------------------------------------------------- /js/hostedFields.vue: -------------------------------------------------------------------------------- 1 | 38 | 39 | 223 | 224 | -------------------------------------------------------------------------------- /js/paypalPayment.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 215 | 216 | --------------------------------------------------------------------------------

VueJS Braintree Integration

About Me