├── .babelrc
├── .editorconfig
├── .env.example
├── .eslintrc.js
├── .firebaserc
├── .github
    ├── dependabot.yml
    ├── semantic.yml
    └── workflows
    │   └── production.yml
├── .gitignore
├── Procfile
├── README.md
├── assets
    ├── README.md
    ├── common-sense.jpeg
    ├── variables.scss
    └── vue-stripe-logo-variant-1-small.png
├── components
    ├── Logo.vue
    ├── README.md
    └── VuetifyLogo.vue
├── firebase.json
├── jsconfig.json
├── layouts
    ├── README.md
    ├── default.vue
    └── error.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package.json
├── pages
    ├── README.md
    ├── cancel.vue
    ├── index.vue
    └── success.vue
├── plugins
    ├── README.md
    └── vue-stripe.js
├── static
    ├── README.md
    ├── favicon.ico
    ├── v.png
    └── vuetify-logo.svg
├── store
    └── README.md
├── utils
    └── head-meta.js
├── vue-stripe-logo-variant-1-small.png
├── yarn-build.png
├── yarn-generate.png
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "test": {
 4 |       "presets": [
 5 |         [
 6 |           "@babel/preset-env",
 7 |           {
 8 |             "targets": {
 9 |               "node": "current"
10 |             }
11 |           }
12 |         ]
13 |       ],
14 |       "plugins": [
15 |         "@babel/plugin-proposal-optional-chaining"
16 |       ]
17 |     }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | SITE_NAME=
2 | STRIPE_PK=


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true,
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint',
 9 |   },
10 |   extends: [
11 |     '@nuxtjs',
12 |     'plugin:nuxt/recommended',
13 |   ],
14 |   // add your custom rules here
15 |   rules: {
16 |     'nuxt/no-cjs-in-config': 'off',
17 |     semi: [2, 'always'],
18 |     'space-before-function-paren': [2, 'always'],
19 |     'keyword-spacing': [2, { before: true, after: true }],
20 |     'space-before-blocks': [2, 'always'],
21 |     'comma-dangle': [2, 'always-multiline'],
22 |     'no-console': 'off',
23 |     'no-multi-str': 'off',
24 |     curly: ['error', 'multi-line'],
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/.firebaserc:
--------------------------------------------------------------------------------
1 | {
2 |   "projects": {
3 |     "default": "vue-stripe-checkout-nuxt-demo"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | - package-ecosystem: npm
 4 |   directory: "/"
 5 |   schedule:
 6 |     interval: daily
 7 |     time: '00:00'
 8 |   open-pull-requests-limit: 99
 9 |   reviewers:
10 |     - jofferson r tiquez
11 |   assignees:
12 |     - jofferson r tiquez
13 |   labels:
14 |     - dependencies
15 |   commit-message:
16 |     prefix: fix
17 |     prefix-development: chore
18 |     include: scope
19 | 


--------------------------------------------------------------------------------
/.github/semantic.yml:
--------------------------------------------------------------------------------
1 | # Always validate the PR title AND all the commits
2 | titleAndCommits: true
3 | # Allows use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
4 | # this is only relevant when using commitsOnly: true (or titleAndCommits: true)
5 | allowMergeCommits: true
6 | 


--------------------------------------------------------------------------------
/.github/workflows/production.yml:
--------------------------------------------------------------------------------
 1 | name: Deploy:Production
 2 | 
 3 | on: 
 4 |   push:
 5 |     branches:
 6 |       - master
 7 | 
 8 | jobs:
 9 |   deploy:
10 |     name: Deploy to production
11 |     runs-on: ubuntu-latest
12 |     strategy:
13 |       matrix:
14 |         node: [10]
15 |     steps: 
16 |       - uses: actions/checkout@master
17 |       - uses: actions/setup-node@v1
18 |         with:
19 |           node-version: ${{ matrix.node }}
20 |       - name: Install Yarn
21 |         run: npm install yarn@latest -g
22 |       - name: Install Firebase Tools
23 |         run: npm install firebase-tools -g
24 |       - name: Install dependencies
25 |         run: yarn
26 |       - name: Run build
27 |         env: 
28 |           SITE_NAME: ${{ secrets.SITE_NAME }}
29 |           STRIPE_PK: ${{ secrets.STRIPE_PK }}
30 |         run: yarn generate
31 |       - name: Run deploy
32 |         env: 
33 |           FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
34 |         run: |
35 |           firebase deploy --only hosting -P vue-stripe-checkout-nuxt-demo


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: nuxt start --host=0.0.0.0 --port=$PORT


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <p align="center">
  3 |   <img src="./vue-stripe-logo-variant-1-small.png" alt="drawing" width="250"/>
  4 |   <h1 align="center">Vue Stripe + Nuxt.js 💳</h1>
  5 | </p>
  6 | 
  7 | A demo on how to implement Vue Stripe in Nuxt.js. This guide is targeted to those who are already familiar with Nuxt.js. For further explanation of the Nuxt.js features, kindly visit their beautifully written documentation website.
  8 | 
  9 | ## Contents
 10 | 
 11 | - [Demo](#demo) - For most updated demo go to https://vuestripe.com
 12 | - [Installation](#installation)
 13 | - [Setup](#setup)
 14 | - [Usage](#usage)
 15 | - [Build & Generate Logs](build-logs)
 16 | 
 17 | ## Demo
 18 | 
 19 | - SPA Demo - https://vue-stripe-checkout-nuxt-demo.web.app
 20 | - SSR Demo - https://vue-stripe-checkout-nuxt-demo.herokuapp.com
 21 | 
 22 | ## Installation
 23 | 
 24 | **Yarn**
 25 | `yarn add @vue-stripe/vue-stripe`
 26 | 
 27 | **NPM**
 28 | `npm install @vue-stripe/vue-stripe -S`
 29 | 
 30 | ## Setup
 31 | 
 32 | ### Step 1
 33 | 
 34 | Add your publishable key to the `.env` file.
 35 | 
 36 | *.env*
 37 | ```bash
 38 | STRIPE_PK=<your-stripe-publishable-key>
 39 | ```
 40 | 
 41 | ### Step 2
 42 | 
 43 | Register the new env in your `nuxt.config.js` under the `env` object.
 44 | 
 45 | *nuxt.config.js*
 46 | ```javascript
 47 | export default {
 48 |   // ... other config
 49 |   env: {
 50 |     STRIPE_PK: process.env.STRIPE_PK,
 51 |   },
 52 |   // ... other config
 53 | };
 54 | ```
 55 | 
 56 | ### Step 3
 57 | 
 58 | Create a `vue-stripe.js` plugin in `plugins/` folder.
 59 | 
 60 | *plugins/vue-stripe.js*
 61 | ```javascript
 62 | import Vue from 'vue';
 63 | import { StripeCheckout } from '@vue-stripe/vue-stripe';
 64 | 
 65 | export default () => {
 66 |   Vue.component('StripeCheckout', StripeCheckout);
 67 | };
 68 | ```
 69 | 
 70 | So basically when this plugin is called, it just registers the `StripeCheckout` component globally.
 71 | 
 72 | Just inspect the `plugins/vue-stripe.js` file in this repository to see the additional implementation of Stripe Elements.
 73 | 
 74 | ### Step 4
 75 | 
 76 | Register the new plugin in your `nuxt.config.js` under the `plugins` array.
 77 | 
 78 | *nuxt.config.js*
 79 | ```javascript
 80 | export default {
 81 |   // ... other config
 82 |   plugins: [
 83 |     { src: '~/plugins/vue-stripe.js', ssr: false },
 84 |   ],
 85 |   // ... other config
 86 | };
 87 | ```
 88 | 
 89 | The most important part here is the `ssr` property. This will tell nuxt that this plugin will only be used in client side. Thus, eliminating the error `window is not defined`. See [VueStripeCheckout#issue#72](https://github.com/jofftiquez/vue-stripe-checkout/issues/72).
 90 | 
 91 | ## Usage
 92 | 
 93 | After successfully setting up the env, and the plugin, you can now use `StripeCheckout` like a normal Vue component. Like so:
 94 | 
 95 | ```html
 96 | <template>
 97 |   <div>
 98 |     <stripe-checkout
 99 |       ref="checkoutRef"
100 |       :pk="pk"
101 |       :items="items"
102 |       :successUrl="successUrl"
103 |       :cancelUrl="cancelUrl"
104 |     />
105 |     <button @click="checkout">Checkout</button>
106 |   </div>
107 | </template>
108 | 
109 | <script>
110 | export default {
111 |   data () {
112 |     this.pk = process.env.STRIPE_PK;
113 |     return {
114 |       items: [
115 |         {
116 |           sku: 'sku_FdQKocNoVzznpJ',
117 |           quantity: 1,
118 |         },
119 |       ],
120 |       successUrl: 'http://localhost:3000',
121 |       cancelUrl: 'http://localhost:3000',
122 |     };
123 |   },
124 |   methods: {
125 |     checkout () {
126 |       this.$refs.checkoutRef.redirectToCheckout();
127 |     },
128 |   },
129 | };
130 | </script>
131 | ```
132 | 
133 | ## Build logs
134 | 
135 | **nuxt build**
136 | 
137 | <img src="./yarn-build.png" width="500">
138 | 
139 | **nuxt generate**
140 | 
141 | <img src="./yarn-generate.png" width="500">
142 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).
8 | 


--------------------------------------------------------------------------------
/assets/common-sense.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/assets/common-sense.jpeg


--------------------------------------------------------------------------------
/assets/variables.scss:
--------------------------------------------------------------------------------
1 | // Ref: https://github.com/nuxt-community/vuetify-module#customvariables
2 | //
3 | // The variables you want to modify
4 | // $font-size-root: 20px;
5 | 


--------------------------------------------------------------------------------
/assets/vue-stripe-logo-variant-1-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/assets/vue-stripe-logo-variant-1-small.png


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="VueToNuxtLogo">
 3 |     <div class="Triangle Triangle--two" />
 4 |     <div class="Triangle Triangle--one" />
 5 |     <div class="Triangle Triangle--three" />
 6 |     <div class="Triangle Triangle--four" />
 7 |   </div>
 8 | </template>
 9 | 
10 | <style>
11 | .VueToNuxtLogo {
12 |   display: inline-block;
13 |   animation: turn 2s linear forwards 1s;
14 |   transform: rotateX(180deg);
15 |   position: relative;
16 |   overflow: hidden;
17 |   height: 180px;
18 |   width: 245px;
19 | }
20 | 
21 | .Triangle {
22 |   position: absolute;
23 |   top: 0;
24 |   left: 0;
25 |   width: 0;
26 |   height: 0;
27 | }
28 | 
29 | .Triangle--one {
30 |   border-left: 105px solid transparent;
31 |   border-right: 105px solid transparent;
32 |   border-bottom: 180px solid #41b883;
33 | }
34 | 
35 | .Triangle--two {
36 |   top: 30px;
37 |   left: 35px;
38 |   animation: goright 0.5s linear forwards 3.5s;
39 |   border-left: 87.5px solid transparent;
40 |   border-right: 87.5px solid transparent;
41 |   border-bottom: 150px solid #3b8070;
42 | }
43 | 
44 | .Triangle--three {
45 |   top: 60px;
46 |   left: 35px;
47 |   animation: goright 0.5s linear forwards 3.5s;
48 |   border-left: 70px solid transparent;
49 |   border-right: 70px solid transparent;
50 |   border-bottom: 120px solid #35495e;
51 | }
52 | 
53 | .Triangle--four {
54 |   top: 120px;
55 |   left: 70px;
56 |   animation: godown 0.5s linear forwards 3s;
57 |   border-left: 35px solid transparent;
58 |   border-right: 35px solid transparent;
59 |   border-bottom: 60px solid #fff;
60 | }
61 | 
62 | @keyframes turn {
63 |   100% {
64 |     transform: rotateX(0deg);
65 |   }
66 | }
67 | 
68 | @keyframes godown {
69 |   100% {
70 |     top: 180px;
71 |   }
72 | }
73 | 
74 | @keyframes goright {
75 |   100% {
76 |     left: 70px;
77 |   }
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/components/VuetifyLogo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img
 3 |     class="VuetifyLogo"
 4 |     alt="Vuetify Logo"
 5 |     src="/vuetify-logo.svg"
 6 |   >
 7 | </template>
 8 | 
 9 | <style>
10 | .VuetifyLogo {
11 |   height: 180px;
12 |   width: 180px;
13 |   transform: rotateY(560deg);
14 |   animation: turn 3.5s ease-out forwards 1s;
15 | }
16 | 
17 | @keyframes turn {
18 |   100% {
19 |     transform: rotateY(0deg);
20 |   }
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "dist",
 4 |     "ignore": [
 5 |       "firebase.json",
 6 |       "**/.*",
 7 |       "**/node_modules/**"
 8 |     ],
 9 |     "rewrites": [
10 |       {
11 |         "source": "**",
12 |         "destination": "/index.html"
13 |       }
14 |     ]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your Application Layouts.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   v-app#app
 3 |     v-app-bar(
 4 |       color="white"
 5 |       flat
 6 |       absolute
 7 |       app
 8 |     )
 9 |       img(width="50" src="../assets/vue-stripe-logo-variant-1-small.png")
10 |       h2 Vue Stripe | Nuxt Demo
11 |       v-spacer
12 |       v-btn(
13 |         depressed
14 |         color="primary"
15 |         href="https://github.com/vue-stripe/vue-stripe"
16 |       ).text-none.mr-2 Vue Stripe
17 |       v-btn(
18 |         depressed
19 |         href="https://github.com/vue-stripe/vue-stripe-checkout-nuxt-demo"
20 |       ).text-none GitHub
21 |     nuxt
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   data () {
27 |     return {};
28 |   },
29 | };
30 | </script>
31 | 


--------------------------------------------------------------------------------
/layouts/error.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app dark>
 3 |     <h1 v-if="error.statusCode === 404">
 4 |       {{ pageNotFound }}
 5 |     </h1>
 6 |     <h1 v-else>
 7 |       {{ otherError }}
 8 |     </h1>
 9 |     <NuxtLink to="/">
10 |       Home page
11 |     </NuxtLink>
12 |   </v-app>
13 | </template>
14 | 
15 | <script>
16 | export default {
17 |   layout: 'empty',
18 |   props: {
19 |     error: {
20 |       type: Object,
21 |       default: null,
22 |     },
23 |   },
24 |   data () {
25 |     return {
26 |       pageNotFound: '404 Not Found',
27 |       otherError: 'An error occurred',
28 |     };
29 |   },
30 |   head () {
31 |     const title =
32 |       this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
33 |     return {
34 |       title,
35 |     };
36 |   },
37 | };
38 | </script>
39 | 
40 | <style scoped>
41 | h1 {
42 |   font-size: 20px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
1 | # MIDDLEWARE
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains your application middleware.
6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
7 | 
8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).
9 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Global page headers (https://go.nuxtjs.dev/config-head)
 3 |   head: {
 4 |     titleTemplate: '%s - vue-stripe-checkout-nuxt-demo',
 5 |     title: 'vue-stripe-checkout-nuxt-demo',
 6 |     meta: [
 7 |       { charset: 'utf-8' },
 8 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 9 |       { hid: 'description', name: 'description', content: '' },
10 |     ],
11 |     link: [
12 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
13 |     ],
14 |     script: [
15 |       { src: 'https://js.stripe.com/v3' },
16 |     ],
17 |   },
18 | 
19 |   env: {
20 |     SITE_NAME: process.env.SITE_NAME,
21 |     STRIPE_PK: process.env.STRIPE_PK,
22 |   },
23 | 
24 |   // Global CSS (https://go.nuxtjs.dev/config-css)
25 |   css: [
26 |   ],
27 | 
28 |   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
29 |   plugins: [{ src: '~/plugins/vue-stripe.js', ssr: false }],
30 | 
31 |   // Auto import components (https://go.nuxtjs.dev/config-components)
32 |   components: true,
33 | 
34 |   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
35 |   buildModules: [
36 |     // https://go.nuxtjs.dev/eslint
37 |     '@nuxtjs/eslint-module',
38 |     // https://go.nuxtjs.dev/vuetify
39 |     '@nuxtjs/vuetify',
40 |   ],
41 | 
42 |   // Modules (https://go.nuxtjs.dev/config-modules)
43 |   modules: [
44 |     // https://go.nuxtjs.dev/axios
45 |     '@nuxtjs/axios',
46 |   ],
47 | 
48 |   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
49 |   axios: {},
50 | 
51 |   // Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
52 |   vuetify: {
53 |     customVariables: ['~/assets/variables.scss'],
54 |     theme: {
55 |       themes: {
56 |         light: {
57 |           primary: '#635BFF',
58 |           accent: '#E49F48',
59 |           secondary: '#3297D3',
60 |           info: '#45B2E8',
61 |           warning: '#E37C4C',
62 |           error: '#C23D4B',
63 |           success: '#24B47E',
64 |         },
65 |         dark: {
66 |           primary: '#635BFF',
67 |           accent: '#E49F48',
68 |           secondary: '#3297D3',
69 |           info: '#45B2E8',
70 |           warning: '#E37C4C',
71 |           error: '#C23D4B',
72 |           success: '#24B47E',
73 |         },
74 |       },
75 |     },
76 |   },
77 | 
78 |   // Build Configuration (https://go.nuxtjs.dev/config-build)
79 |   build: {
80 |   },
81 | };
82 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-stripe-checkout-nuxt-demo",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "cross-env NODE_ENV=production nuxt start",
 9 |     "generate": "nuxt generate",
10 |     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
11 |     "lint": "yarn lint:js --fix"
12 |   },
13 |   "lint-staged": {
14 |     "*.{js,vue}": "eslint"
15 |   },
16 |   "husky": {
17 |     "hooks": {
18 |       "pre-commit": "lint-staged"
19 |     }
20 |   },
21 |   "dependencies": {
22 |     "@nuxtjs/axios": "^5.12.2",
23 |     "@vue-stripe/vue-stripe": "^4.2.5",
24 |     "core-js": "^3.6.5",
25 |     "cross-env": "^7.0.2",
26 |     "nuxt": "^2.14.7",
27 |     "pug": "^3.0.0",
28 |     "pug-plain-loader": "^1.0.0"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/plugin-proposal-optional-chaining": "^7.12.1",
32 |     "@nuxtjs/eslint-config": "^3.1.0",
33 |     "@nuxtjs/eslint-module": "^3.0.0",
34 |     "@nuxtjs/vuetify": "^2.0.0-beta.2",
35 |     "babel-eslint": "^10.1.0",
36 |     "eslint": "^7.12.1",
37 |     "eslint-plugin-nuxt": "^1.0.0",
38 |     "husky": "^4.3.0",
39 |     "lint-staged": "^10.5.0"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing).
7 | 


--------------------------------------------------------------------------------
/pages/cancel.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   v-container(fill-height)
 3 |     v-row(justify="center" align="center")
 4 |       v-col(cols="12" md="10")
 5 |         v-card(outlined)
 6 |           v-card-text.text-center
 7 |             h1 Cancel/Error Page
 8 |           v-card-actions
 9 |             v-spacer
10 |             v-btn(
11 |               depressed
12 |               large
13 |               color="primary"
14 |               to="/"
15 |             ).text-none Back to home
16 | </template>
17 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   v-container
  3 |     //- v-row(justify="center")
  4 |       v-col(cols="12" md="12").text-center
  5 |     v-row(justify="center").mt-16
  6 |       v-col(cols="12" md="12").text-center
  7 |         img(width="150" src="../assets/vue-stripe-logo-variant-1-small.png")
  8 |       v-col(cols="12" md="6")
  9 |         v-card(outlined)
 10 |           v-toolbar(flat color="#f7f7f7")
 11 |             h2 Stripe Checkout - One-time Payment
 12 |             v-spacer
 13 |             a(href="https://vuestripe.com/stripe-checkout/one-time-payment"  target="_blank") See Docs
 14 |           v-card-text.text-center
 15 |             img(width="200" src="../assets/common-sense.jpeg")
 16 |             h2 Buy common sense for $10.00
 17 |             stripe-checkout(
 18 |               ref="checkoutRef"
 19 |               mode="payment"
 20 |               :pk="pk"
 21 |               :line-items="lineItems"
 22 |               :success-url="successURL"
 23 |               :cancel-url="cancelURL"
 24 |               @loading="v => loading = v"
 25 |             )
 26 |             br
 27 |             v-alert(
 28 |               dark
 29 |               v-if="redirectState"
 30 |               :color="redirectState"
 31 |               dismissible
 32 |             ) Payment {{redirectState}}
 33 |           v-card-actions
 34 |             v-spacer
 35 |             v-btn(
 36 |               depressed
 37 |               large
 38 |               color="primary"
 39 |               :loading="loading"
 40 |               :disabled="loading"
 41 |               @click="checkout"
 42 |             ).text-none Pay $10
 43 |       v-col(cols="12" md="6")
 44 |         v-card(outlined)
 45 |           v-toolbar(flat color="#f7f7f7")
 46 |             h2 Stripe Elements - Card
 47 |             v-spacer
 48 |             a(href="https://vuestripe.com/stripe-elements/card"  target="_blank") See Docs
 49 |           v-card-text.pt-10
 50 |             stripe-element-card(
 51 |               ref="cardRef"
 52 |               :pk="pk"
 53 |               hide-postal-code
 54 |               @token="tokenCreated"
 55 |               @loading="v => loading = v"
 56 |             )
 57 |             pre {{token}}
 58 |           v-card-actions
 59 |             v-spacer
 60 |             v-btn(
 61 |               depressed
 62 |               large
 63 |               color="primary"
 64 |               :loading="loading"
 65 |               :disabled="loading"
 66 |               @click="$refs.cardRef.submit()"
 67 |             ).text-none Generate token
 68 | </template>
 69 | 
 70 | <script>
 71 | import headMeta from '~/utils/head-meta';
 72 | 
 73 | export default {
 74 |   data () {
 75 |     this.pk = process.env.STRIPE_PK;
 76 |     return {
 77 |       loading: false,
 78 |       lineItems: [
 79 |         {
 80 |           price: 'sku_FdQKocNoVzznpJ', // The id of the one-time price you created in your Stripe dashboard
 81 |           quantity: 1,
 82 |         },
 83 |       ],
 84 |       token: null,
 85 |       successURL: process.client && `${window.location.origin}${window.location.pathname}?state=success`,
 86 |       cancelURL: process.client && `${window.location.origin}${window.location.pathname}?state=error`,
 87 |       // Misc
 88 |       redirectState: '',
 89 |     };
 90 |   },
 91 |   computed: {
 92 |     queryState () {
 93 |       return process.client && (new URLSearchParams(window.location.search).get('state') || '');
 94 |     },
 95 |   },
 96 |   mounted () {
 97 |     if (this.queryState === 'success') {
 98 |       this.redirectState = 'success';
 99 |     }
100 |     if (this.queryState === 'error') {
101 |       this.redirectState = 'error';
102 |     }
103 |   },
104 |   methods: {
105 |     checkout () {
106 |       this.loading = true;
107 |       this.$refs.checkoutRef.redirectToCheckout();
108 |     },
109 |     tokenCreated (token) {
110 |       this.token = token;
111 |     },
112 |   },
113 |   head () {
114 |     return headMeta({
115 |       title: 'Vue Stripe + Nuxt.js Demo',
116 |       description: 'A demo on how to implement Vue Stripe in Nuxt.js',
117 |       socialBanner: require('../assets/vue-stripe-logo-variant-1-small.png'),
118 |     });
119 |   },
120 | };
121 | </script>
122 | 


--------------------------------------------------------------------------------
/pages/success.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   v-container(fill-height)
 3 |     v-row(justify="center" align="center")
 4 |       v-col(cols="12" md="10")
 5 |         v-card(outlined)
 6 |           v-card-text.text-center
 7 |             h1 Success Page
 8 |           v-card-actions
 9 |             v-spacer
10 |             v-btn(
11 |               depressed
12 |               large
13 |               color="primary"
14 |               to="/"
15 |             ).text-none Back to home
16 | </template>
17 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
6 | 
7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).
8 | 


--------------------------------------------------------------------------------
/plugins/vue-stripe.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import {
 3 |   StripePlugin,
 4 |   StripeCheckout,
 5 |   StripeElementCard,
 6 | } from '@vue-stripe/vue-stripe';
 7 | 
 8 | export default () => {
 9 |   Vue.component('StripeCheckout', StripeCheckout);
10 |   Vue.component('StripeElementCard', StripeElementCard);
11 |   Vue.use(StripePlugin, { pk: process.env.STRIPE_PK });
12 | };
13 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your static files.
 6 | Each file inside this directory is mapped to `/`.
 7 | Thus you'd want to delete this README.md before deploying to production.
 8 | 
 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
10 | 
11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).
12 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/static/favicon.ico


--------------------------------------------------------------------------------
/static/v.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/static/v.png


--------------------------------------------------------------------------------
/static/vuetify-logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------
/utils/head-meta.js:
--------------------------------------------------------------------------------
 1 | const LANG = 'en_US';
 2 | const TYPE = 'website';
 3 | // TODO: Replace this
 4 | const SITE_NAME = process.env.SITE_NAME;
 5 | const URL = `https://${SITE_NAME}`;
 6 | 
 7 | export default ({ title, description, socialBanner }) => {
 8 |   return {
 9 |     title,
10 |     description,
11 |     meta: [
12 |       // normal meta
13 |       {
14 |         hid: 'description',
15 |         name: 'description',
16 |         content: description,
17 |       },
18 |       // facebook meta
19 |       {
20 |         hid: 'og:locale',
21 |         name: 'og:locale',
22 |         content: LANG,
23 |       },
24 |       {
25 |         hid: 'og:type',
26 |         name: 'og:type',
27 |         content: TYPE,
28 |       },
29 |       {
30 |         hid: 'og:url',
31 |         name: 'og:url',
32 |         content: URL,
33 |       },
34 |       {
35 |         hid: 'og:title',
36 |         name: 'og:title',
37 |         content: title,
38 |       },
39 |       {
40 |         hid: 'og:site_name',
41 |         name: 'og:site_name',
42 |         content: SITE_NAME,
43 |       },
44 |       {
45 |         hid: 'og:description',
46 |         name: 'og:description',
47 |         content: description,
48 |       },
49 |       {
50 |         hid: 'image',
51 |         name: 'og:image',
52 |         content: socialBanner,
53 |       },
54 |       // twitter meta
55 |     ],
56 |   };
57 | };
58 | 


--------------------------------------------------------------------------------
/vue-stripe-logo-variant-1-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/vue-stripe-logo-variant-1-small.png


--------------------------------------------------------------------------------
/yarn-build.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/yarn-build.png


--------------------------------------------------------------------------------
/yarn-generate.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vue-stripe/vue-stripe-checkout-nuxt-demo/4bfc9a8bd3ba8805c9bd9bf4d79877894213658c/yarn-generate.png


--------------------------------------------------------------------------------