├── babel.config.js ├── public ├── favicon.ico └── index.html ├── src ├── assets │ └── book.png ├── main.js ├── App.vue └── components │ ├── Home.vue │ ├── Checkout.vue │ └── Modal.vue ├── .sample-env ├── .gitignore ├── netlify.toml ├── package.json └── README.md /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvesjtiago/vue-bitcoin-checkout/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /src/assets/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvesjtiago/vue-bitcoin-checkout/HEAD/src/assets/book.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /.sample-env: -------------------------------------------------------------------------------- 1 | VUE_APP_BITCOIN_NETWORK=test 2 | VUE_APP_BITCOIN_ADDRESS=mvnuXPHJz5kRbD5vEDeqfmoQpY9Hezbuer 3 | VUE_APP_CONTENT_URL=https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf 4 | VUE_APP_BITCOIN_AMOUNT=0.001 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | publish = "dist" 3 | command = "yarn run build" 4 | 5 | [template.environment] 6 | VUE_APP_TITLE = "Title for landing page" 7 | VUE_APP_SUBTITLE = "Subtitle for landing page" 8 | VUE_APP_IMAGE_URL = "Image URL for landing page" 9 | VUE_APP_BITCOIN_NETWORK = "Set to test or mainnet" 10 | VUE_APP_BITCOIN_ADDRESS = "The bitcoin address where you want to get paid" 11 | VUE_APP_CONTENT_URL = "The url of the content you want to give access to after paying" 12 | VUE_APP_BITCOIN_AMOUNT = "The amount in bitcoin you want to charge" -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Checkout demo 9 | 10 | 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-bitcoin-checkout", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@xkeshi/vue-qrcode": "^1.0.0", 12 | "socket.io-client": "^2.1.1", 13 | "vue": "^2.5.17" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^3.0.1", 17 | "@vue/cli-plugin-eslint": "^3.0.1", 18 | "@vue/cli-service": "^3.0.1", 19 | "vue-template-compiler": "^2.5.17" 20 | }, 21 | "eslintConfig": { 22 | "root": true, 23 | "env": { 24 | "node": true 25 | }, 26 | "extends": [ 27 | "plugin:vue/essential", 28 | "eslint:recommended" 29 | ], 30 | "rules": {}, 31 | "parserOptions": { 32 | "parser": "babel-eslint" 33 | } 34 | }, 35 | "postcss": { 36 | "plugins": { 37 | "autoprefixer": {} 38 | } 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions", 43 | "not ie <= 8" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /src/components/Home.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /src/components/Checkout.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 55 | 56 | 57 | 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Demo](https://user-images.githubusercontent.com/407470/47375163-8dd2ec00-d6e7-11e8-99ab-0b1381f404c6.gif) 2 | 3 | # Vue.js Bitcoin Checkout page 4 | 5 | If you sell digital products online and you're looking for an easy way to accept bitcoin this is a demo project that allows you to specify the address and amount you'd like to receive to automatically access your content. Think of it as an alternative to Gumroad or Stripe checkout button for crypto. 6 | 7 | It is built with Vue.js and the main component is `Checkout.vue` where QR code rendering, socket connections and callbacks are handled. 8 | It connects to Bitpay's servers to access real-time information about payments. 9 | 10 | Demo site - [https://checkout-demo.tiagoalves.me/](https://checkout-demo.tiagoalves.me/) 11 | 12 | *(This is a work in progress. Use at your own risk in production.)* 13 | 14 | ## One-click deployment 15 | 16 | 17 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/alvesjtiago/vue-bitcoin-checkout) 18 | 19 | ## Environment variables 20 | 21 | * `VUE_APP_TITLE`: Title for landing page 22 | * `VUE_APP_SUBTITLE`: Subtitle for landing page 23 | * `VUE_APP_IMAGE_URL`: Image URL for landing page 24 | * `VUE_APP_BITCOIN_NETWORK`: Set to test or mainnet 25 | * `VUE_APP_BITCOIN_ADDRESS`: The bitcoin address where you want to get paid 26 | * `VUE_APP_CONTENT_URL`: The url of the content you want to give access to after paying 27 | * `VUE_APP_BITCOIN_AMOUNT`: The amount in bitcoin you want to charge 28 | 29 | ## Development 30 | 31 | ### Project setup 32 | ``` 33 | yarn install 34 | ``` 35 | 36 | ### Compiles and hot-reloads for development 37 | ``` 38 | yarn run serve 39 | ``` 40 | 41 | ### Compiles and minifies for production 42 | ``` 43 | yarn run build 44 | ``` 45 | 46 | ### Lints and fixes files 47 | ``` 48 | yarn run lint 49 | ``` 50 | -------------------------------------------------------------------------------- /src/components/Modal.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 54 | 55 | --------------------------------------------------------------------------------