├── .eslintignore ├── vue-stripe-logo-variant-1.png ├── vue-stripe-logo-variant-2.png ├── vue-stripe-logo-variant-1-small.png ├── stripe_partner_badge_verified_blurple.png ├── .editorconfig ├── src ├── utils.js ├── index.js ├── load-stripe-sdk.js ├── elements │ ├── index.js │ ├── Card.vue │ └── Payment.vue ├── stripe │ └── index.js ├── checkout │ ├── props.js │ └── index.js └── constants.js ├── .gitignore ├── .npmignore ├── babel.config.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── workflows │ ├── main.yml │ └── codeql-analysis.yml ├── .eslintrc ├── rollup.config.js ├── LICENSE ├── typings └── index.d.ts ├── package.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | dist -------------------------------------------------------------------------------- /vue-stripe-logo-variant-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Incredidev9285/vue-stripe/HEAD/vue-stripe-logo-variant-1.png -------------------------------------------------------------------------------- /vue-stripe-logo-variant-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Incredidev9285/vue-stripe/HEAD/vue-stripe-logo-variant-2.png -------------------------------------------------------------------------------- /vue-stripe-logo-variant-1-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Incredidev9285/vue-stripe/HEAD/vue-stripe-logo-variant-1-small.png -------------------------------------------------------------------------------- /stripe_partner_badge_verified_blurple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Incredidev9285/vue-stripe/HEAD/stripe_partner_badge_verified_blurple.png -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | export const isSecureHost = (testMode) => { 2 | if (testMode) return true; 3 | return window.location.hostname === 'localhost' || window.location.protocol === 'https:'; 4 | }; 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | demo/ 3 | dist/ 4 | node_modules/ 5 | npm-debug.log 6 | yarn-error.log 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | test/ 2 | src/ 3 | node_modules/ 4 | .github/ 5 | .editorconfig 6 | .eslintignore 7 | .eslintrc 8 | .babel.config.js 9 | .rollup.config.js 10 | vue-stripe-logo-* 11 | stripe_partner_badge_verified_blurple.png 12 | CODE_OF_CONDUCT.md 13 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import StripePlugin from './stripe'; 2 | import StripeCheckout from './checkout'; 3 | import StripeElementCard from './elements/Card.vue'; 4 | import StripeElementPayment from './elements/Payment.vue'; 5 | import StripeElementsPlugin from './elements'; 6 | 7 | export { 8 | StripePlugin, 9 | StripeCheckout, 10 | StripeElementCard, 11 | StripeElementPayment, 12 | StripeElementsPlugin, 13 | }; 14 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function (api) { 2 | api.cache(true); 3 | 4 | const presets = [ 5 | '@babel/preset-env', 6 | // 'minify' 7 | ]; 8 | const plugins = [ 9 | '@babel/transform-runtime', 10 | '@babel/plugin-proposal-export-default-from', 11 | '@babel/plugin-proposal-optional-chaining', 12 | ]; 13 | // const ignore = [ 14 | // '**/*.test.js', 15 | // ]; 16 | 17 | return { 18 | presets, 19 | plugins, 20 | // ignore 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /src/load-stripe-sdk.js: -------------------------------------------------------------------------------- 1 | import { STRIPE_JS_SDK_URL } from './constants'; 2 | 3 | export const loadStripeSdk = ({ version = 'v3', disableAdvancedFraudDetection }, callback) => { 4 | if (window.Stripe) { 5 | callback(); 6 | return; 7 | } 8 | let url = `${STRIPE_JS_SDK_URL}/${version}`; 9 | if (disableAdvancedFraudDetection) url += '?advancedFraudSignals=false'; 10 | const e = document.createElement('script'); 11 | e.src = url; 12 | e.type = 'text/javascript'; 13 | document.getElementsByTagName('head')[0].appendChild(e); 14 | e.addEventListener('load', callback); 15 | }; 16 | -------------------------------------------------------------------------------- /src/elements/index.js: -------------------------------------------------------------------------------- 1 | import { STRIPE_PARTNER_DETAILS } from '../constants'; 2 | /** 3 | * @deprecated - This can be achieved by using the Stripe plugin. 4 | */ 5 | export default { 6 | async install (Vue, options) { 7 | const { 8 | pk, 9 | stripeAccount, 10 | apiVersion, 11 | locale, 12 | elementsOptions, 13 | } = options; 14 | const stripe = window.Stripe(pk, { stripeAccount, apiVersion, locale }); 15 | stripe.registerAppInfo(STRIPE_PARTNER_DETAILS); 16 | const elements = stripe.elements(elementsOptions); 17 | Vue.prototype.$stripe = stripe; 18 | Vue.prototype.$stripeElements = elements; 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /src/stripe/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | STRIPE_PARTNER_DETAILS, 3 | // INSECURE_HOST_ERROR_MESSAGE, 4 | } from '../constants'; 5 | // import { isSecureHost } from '../utils'; 6 | export default { 7 | install (Vue, options) { 8 | // FIXME: temporarily remove to avoid problems with remote non-production deployments 9 | // if (!isSecureHost(options.testMode)) console.warn(INSECURE_HOST_ERROR_MESSAGE); 10 | const { 11 | pk, 12 | stripeAccount, 13 | apiVersion, 14 | locale, 15 | } = options; 16 | const stripe = window.Stripe(pk, { stripeAccount, apiVersion, locale }); 17 | stripe.registerAppInfo(STRIPE_PARTNER_DETAILS); 18 | Vue.prototype.$stripe = stripe; 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [OSSPhilippines, jofftiquez] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # vue-stripe-checkout 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username" 12 | custom: ['https://paypal.me/jofftiquez'] 13 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "semi": [ 4 | 2, 5 | "always" 6 | ], 7 | "space-before-function-paren": [ 8 | 2, 9 | "always" 10 | ], 11 | "keyword-spacing": [ 12 | 2, 13 | { 14 | "before": true, 15 | "after": true 16 | } 17 | ], 18 | "space-before-blocks": [ 19 | 2, 20 | "always" 21 | ], 22 | "comma-dangle": [ 23 | 2, 24 | "always-multiline" 25 | ] 26 | }, 27 | "parser": "vue-eslint-parser", 28 | "root": true, 29 | "env": { 30 | "node": true 31 | }, 32 | "extends": [ 33 | "plugin:vue/essential", 34 | "plugin:vue/strongly-recommended", 35 | "plugin:vue/recommended", 36 | "@vue/standard" 37 | ], 38 | "parserOptions": { 39 | "ecmaVersion": 2020 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## NOTE: Moving forward, issues that does not conform with this format will be closed automatically. (You can delete this part) 11 | 12 | **Is your feature request related to a problem? Please describe.** 13 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 14 | 15 | **Describe the solution you'd like** 16 | A clear and concise description of what you want to happen. 17 | 18 | **Describe alternatives you've considered** 19 | A clear and concise description of any alternative solutions or features you've considered. 20 | 21 | **Additional context** 22 | Add any other context or screenshots about the feature request here. 23 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import vue from 'rollup-plugin-vue'; 3 | import postcss from 'rollup-plugin-postcss'; 4 | import { terser } from 'rollup-plugin-terser'; 5 | import resolve from '@rollup/plugin-node-resolve'; 6 | import commonjs from 'rollup-plugin-commonjs'; 7 | 8 | export default { 9 | input: 'src/index.js', 10 | output: [ 11 | { 12 | exports: 'named', 13 | name: 'vue-stripe', 14 | file: 'dist/index.js', 15 | format: 'cjs', 16 | }, 17 | { 18 | exports: 'named', 19 | name: 'VueStripe', 20 | file: 'dist/vue-stripe.js', 21 | format: 'umd', 22 | }, 23 | ], 24 | plugins: [ 25 | terser(), 26 | vue(), 27 | resolve(), 28 | babel({ 29 | runtimeHelpers: true, 30 | exclude: /node_modules/, 31 | }), 32 | postcss({ 33 | plugins: [], 34 | }), 35 | commonjs(), 36 | ], 37 | }; 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Jofferson Ramirez Tiquez 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## NOTE: Moving forward, issues that does not conform with this format will be closed automatically. (You can delete this part) 11 | 12 | **Describe the bug** 13 | A clear and concise description of what the bug is. 14 | 15 | **To Reproduce** 16 | Steps to reproduce the behavior: 17 | 1. Go to '...' 18 | 2. Click on '....' 19 | 3. Scroll down to '....' 20 | 4. See error 21 | 22 | **Expected behavior** 23 | A clear and concise description of what you expected to happen. 24 | 25 | **Screenshots** 26 | If applicable, add screenshots to help explain your problem. 27 | 28 | **Desktop (please complete the following information):** 29 | - OS: [e.g. iOS] 30 | - Browser [e.g. chrome, safari] 31 | - Version [e.g. 22] 32 | 33 | **Smartphone (please complete the following information):** 34 | - Device: [e.g. iPhone6] 35 | - OS: [e.g. iOS8.1] 36 | - Browser [e.g. stock browser, safari] 37 | - Version [e.g. 22] 38 | 39 | **Additional context** 40 | Add any other context about the problem here. 41 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Deploy 2 | 3 | on: 4 | push: 5 | tags: 6 | - 'v*' 7 | 8 | jobs: 9 | build-test-publish: 10 | name: Lint, Test, Build, and Publish to NPM 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 | registry-url: https://registry.npmjs.org/ 21 | - name: Install yarn 22 | run: npm install yarn@latest -g 23 | - name: Install dependencies 24 | run: yarn 25 | - name: Run lint, build 26 | env: 27 | VUE_STRIPE_WEBSITE: https://vuestripe.com 28 | VUE_STRIPE_PARTNER_ID: ${{ secrets.VUE_STRIPE_PARTNER_ID }} 29 | run: | 30 | echo ${{ secrets.VUE_STRIPE_PARTNER_ID }} 31 | yarn lint 32 | yarn build 33 | - name: Ensure package-lock.json 34 | run: | 35 | rm -rf node_modules 36 | npm install 37 | - name: Publish 38 | run: | 39 | npm ci 40 | npm publish --access public 41 | env: 42 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 43 | -------------------------------------------------------------------------------- /src/checkout/props.js: -------------------------------------------------------------------------------- 1 | import { 2 | BILLING_ADDRESS_COLLECTION_TYPES, 3 | DEFAULT_LOCALE, 4 | SUPPORTED_LOCALES, 5 | SUPPORTED_SUBMIT_TYPES, 6 | } from '../constants'; 7 | 8 | export default { 9 | pk: { 10 | type: String, 11 | required: true, 12 | }, 13 | mode: { 14 | type: String, 15 | validator: value => ['payment', 'subscription'].includes(value), 16 | }, 17 | lineItems: { 18 | type: Array, 19 | default: undefined, 20 | }, 21 | items: { 22 | type: Array, 23 | }, 24 | successUrl: { 25 | type: String, 26 | default: window.location.href, 27 | }, 28 | cancelUrl: { 29 | type: String, 30 | default: window.location.href, 31 | }, 32 | submitType: { 33 | type: String, 34 | validator: (value) => SUPPORTED_SUBMIT_TYPES.includes(value), 35 | }, 36 | billingAddressCollection: { 37 | type: String, 38 | default: 'auto', 39 | validator: (value) => BILLING_ADDRESS_COLLECTION_TYPES.includes(value), 40 | }, 41 | clientReferenceId: { 42 | type: String, 43 | }, 44 | customerEmail: { 45 | type: String, 46 | }, 47 | sessionId: { 48 | type: String, 49 | }, 50 | stripeAccount: { 51 | type: String, 52 | default: undefined, 53 | }, 54 | apiVersion: { 55 | type: String, 56 | default: undefined, 57 | }, 58 | locale: { 59 | type: String, 60 | default: DEFAULT_LOCALE, 61 | coerce: (locale) => { 62 | if (SUPPORTED_LOCALES.includes(locale)) return locale; 63 | console.warn(`VueStripe Warning: '${locale}' is not supported by Stripe yet. Falling back to default '${DEFAULT_LOCALE}'.`); 64 | return DEFAULT_LOCALE; 65 | }, 66 | }, 67 | shippingAddressCollection: { 68 | type: Object, 69 | validator: value => Object.prototype.hasOwnProperty.call(value, 'allowedCountries'), 70 | }, 71 | disableAdvancedFraudDetection: { 72 | type: Boolean, 73 | }, 74 | stripeOptions: { 75 | type: Object, 76 | default: null, 77 | }, 78 | }; 79 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { PluginObject, PluginFunction } from "vue"; 2 | 3 | export type StripePluginOptions = { 4 | pk: string; 5 | stripeAccount: string; 6 | apiVersion: string; 7 | locale: string; 8 | } 9 | 10 | export interface StripePluginObject extends PluginObject { 11 | install: PluginFunction; 12 | } 13 | 14 | export declare const StripePlugin: StripePluginObject; 15 | 16 | export class StripeCheckout extends Vue { 17 | pk: string; 18 | mode?: string; 19 | lineItems: Array | null; 20 | items: Array | null; 21 | successUrl: string; 22 | cancelUrl: string; 23 | submitType?: string; 24 | billingAddressCollection: string; 25 | clientReferenceId: string; 26 | customerEmail?: string; 27 | sessionId?: string; 28 | locale: string; 29 | shippingAddressCollection?: any; 30 | disableAdvancedFraudDetection: boolean; 31 | 32 | redirectToCheckout(): void; 33 | } 34 | 35 | export type StripeElementsPluginOptions = { 36 | pk: string; 37 | stripeAccount: string; 38 | apiVersion: string; 39 | locale: string; 40 | elementsOptions: any; 41 | } 42 | 43 | export interface StripeElementsPluginObject extends PluginObject { 44 | install: PluginFunction; 45 | } 46 | 47 | export declare const StripeElementsPlugin: StripePluginObject; 48 | 49 | export class StripeElementCard extends Vue { 50 | pk: string; 51 | stripeAccount: string; 52 | apiVersion: string; 53 | locale: string; 54 | elementsOptions: any; 55 | tokenData: any; 56 | disableAdvancedFraudDetection: boolean; 57 | classes: any; 58 | elementStyle: any; 59 | value?: string; 60 | hidePostalCode: boolean; 61 | } 62 | 63 | export class StripeElementPayment extends Vue { 64 | pk: string; 65 | elementsOptions: any; 66 | confirmParams: any; 67 | createOptions: any; 68 | redirect?: string; 69 | stripeAccount?: string; 70 | apiVersion?: string; 71 | locale?: string; 72 | disableAdvancedFraudDetection?: boolean; 73 | } 74 | -------------------------------------------------------------------------------- /src/constants.js: -------------------------------------------------------------------------------- 1 | export const STRIPE_JS_SDK_URL = 'https://js.stripe.com'; 2 | 3 | export const SUPPORTED_ELEMENT_TYPE = [ 4 | 'card', 5 | 'cardNumber', 6 | 'cardExpiry', 7 | 'cardCvc', 8 | 'fpxBank', 9 | 'iban', 10 | 'idealBank', 11 | 'p24Bank', 12 | 'epsBank', 13 | 'paymentRequestButton', 14 | 'auBankAccount', 15 | ]; 16 | 17 | export const DEFAULT_LOCALE = 'auto'; 18 | 19 | export const SUPPORTED_LOCALES = [ 20 | 'auto', 21 | 'bg', 22 | 'cs', 23 | 'da', 24 | 'de', 25 | 'el', 26 | 'en', 27 | 'en-GB', 28 | 'es', 29 | 'es-419', 30 | 'et', 31 | 'fi', 32 | 'fr', 33 | 'fr-CA', 34 | 'hu', 35 | 'id', 36 | 'it', 37 | 'ja', 38 | 'lt', 39 | 'lv', 40 | 'ms', 41 | 'mt', 42 | 'nb', 43 | 'nl', 44 | 'pl', 45 | 'pt', 46 | 'pt-BR', 47 | 'ro', 48 | 'ru', 49 | 'sk', 50 | 'sl', 51 | 'sv', 52 | 'tr', 53 | 'zh', 54 | 'zh-HK', 55 | 'zh-TW', 56 | ]; 57 | 58 | export const SUPPORTED_SUBMIT_TYPES = [ 59 | 'auto', 60 | 'book', 61 | 'donate', 62 | 'pay', 63 | ]; 64 | 65 | export const BILLING_ADDRESS_COLLECTION_TYPES = [ 66 | 'required', 67 | 'auto', 68 | ]; 69 | 70 | export const SHIPPING_ADDRESS_COLLECTION_UNSUPPORTED_COUNTRIES = [ 71 | 'AS', 72 | 'CX', 73 | 'CC', 74 | 'CU', 75 | 'HM', 76 | 'IR', 77 | 'KP', 78 | 'MH', 79 | 'FM', 80 | 'NF', 81 | 'MP', 82 | 'PW', 83 | 'SD', 84 | 'SY', 85 | 'UM', 86 | 'VI', 87 | ]; 88 | 89 | export const DEFAULT_ELEMENT_STYLE = { 90 | base: { 91 | color: '#32325d', 92 | fontFamily: '"Helvetica Neue", Helvetica, sans-serif', 93 | fontSmoothing: 'antialiased', 94 | fontSize: '16px', 95 | '::placeholder': { 96 | color: '#aab7c4', 97 | }, 98 | }, 99 | invalid: { 100 | color: '#fa755a', 101 | iconColor: '#fa755a', 102 | }, 103 | }; 104 | 105 | export const VUE_STRIPE_VERSION = require('../package.json').version; 106 | 107 | export const STRIPE_PARTNER_DETAILS = { 108 | name: 'vue-stripe', 109 | version: VUE_STRIPE_VERSION, 110 | url: 'https://vuestripe.com', 111 | partner_id: 'pp_partner_IqtOXpBSuz0IE2', 112 | }; 113 | 114 | export const INSECURE_HOST_ERROR_MESSAGE = 'Vue Stripe will not work on an insecure host. Make sure that your site is using TCP/SSL.'; 115 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@vue-stripe/vue-stripe", 3 | "version": "4.5.0", 4 | "description": "Stripe Checkout & Elements for Vue.js", 5 | "author": "jofftiquez@gmail.com", 6 | "scripts": { 7 | "build": "rollup -c", 8 | "lint": "vue-cli-service lint --fix", 9 | "prebuild": "rimraf dist", 10 | "test": "jest" 11 | }, 12 | "main": "dist/index.js", 13 | "module": "dist", 14 | "dependencies": { 15 | "@stripe/stripe-js": "^1.13.2", 16 | "vue-coerce-props": "^1.0.0" 17 | }, 18 | "devDependencies": { 19 | "@babel/cli": "^7.7.5", 20 | "@babel/core": "^7.7.5", 21 | "@babel/plugin-proposal-export-default-from": "^7.7.4", 22 | "@babel/plugin-proposal-optional-chaining": "^7.10.4", 23 | "@babel/plugin-transform-runtime": "^7.7.5", 24 | "@babel/preset-env": "^7.7.5", 25 | "@babel/preset-es2015": "^7.0.0-beta.53", 26 | "@babel/runtime": "^7.7.5", 27 | "@rollup/plugin-node-resolve": "^6.0.0", 28 | "@vue/cli-plugin-eslint": "~4.5.0", 29 | "@vue/cli-service": "^4.5.10", 30 | "@vue/eslint-config-standard": "^5.1.2", 31 | "babel-eslint": "^10.1.0", 32 | "babel-minify": "^0.5.1", 33 | "cross-env": "^6.0.3", 34 | "eslint": "^6.8.0", 35 | "eslint-plugin-import": "^2.20.2", 36 | "eslint-plugin-node": "^11.1.0", 37 | "eslint-plugin-promise": "^4.2.1", 38 | "eslint-plugin-standard": "^4.0.0", 39 | "eslint-plugin-vue": "^6.2.2", 40 | "jest": "^24.9.0", 41 | "lint-staged": "^9.5.0", 42 | "rimraf": "^3.0.0", 43 | "rollup": "^1.27.9", 44 | "rollup-plugin-babel": "^4.3.3", 45 | "rollup-plugin-commonjs": "^10.1.0", 46 | "rollup-plugin-postcss": "^2.0.3", 47 | "rollup-plugin-terser": "^5.1.3", 48 | "rollup-plugin-uglify": "^6.0.3", 49 | "rollup-plugin-vue": "^5.1.4", 50 | "vue-template-compiler": "^2.6.11" 51 | }, 52 | "bugs": { 53 | "url": "https://github.com/vue-stripe/vue-stripe/issues" 54 | }, 55 | "gitHooks": { 56 | "pre-commit": "lint-staged" 57 | }, 58 | "homepage": "https://github.com/vue-stripe/vue-stripe#readme", 59 | "keywords": [ 60 | "vue", 61 | "vuejs", 62 | "stripe", 63 | "checkout", 64 | "payment" 65 | ], 66 | "license": "MIT", 67 | "lint-staged": { 68 | "*.{js,jsx,vue}": [ 69 | "vue-cli-service lint", 70 | "git add" 71 | ] 72 | }, 73 | "repository": { 74 | "type": "git", 75 | "url": "git@github.com:vue-stripe/vue-stripe.git" 76 | }, 77 | "typings": "typings/index.d.ts" 78 | } 79 | -------------------------------------------------------------------------------- /src/checkout/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | STRIPE_PARTNER_DETAILS, 3 | // INSECURE_HOST_ERROR_MESSAGE, 4 | } from '../constants'; 5 | import { loadStripe } from '@stripe/stripe-js/dist/pure.esm.js'; 6 | // import { isSecureHost } from '../utils'; 7 | import CoercePropsMixin from 'vue-coerce-props'; 8 | import props from './props'; 9 | export default { 10 | props, 11 | mixins: [CoercePropsMixin], 12 | render (element) { 13 | return element; 14 | }, 15 | // FIXME: temporarily remove to avoid problems with remote non-production deployments 16 | // mounted () { 17 | // if (!isSecureHost()) console.warn(INSECURE_HOST_ERROR_MESSAGE); 18 | // }, 19 | methods: { 20 | async redirectToCheckout () { 21 | try { 22 | // FIXME: temporarily remove to avoid problems with remote non-production deployments 23 | // if (!isSecureHost()) { 24 | // throw Error(INSECURE_HOST_ERROR_MESSAGE); 25 | // } 26 | 27 | this.$emit('loading', true); 28 | 29 | if (this.disableAdvancedFraudDetection) loadStripe.setLoadParameters({ advancedFraudSignals: false }); 30 | 31 | const stripeOptions = { 32 | stripeAccount: this.stripeAccount, 33 | apiVersion: this.apiVersion, 34 | locale: this.locale, 35 | }; 36 | 37 | const stripe = await loadStripe(this.pk, stripeOptions); 38 | stripe.registerAppInfo(STRIPE_PARTNER_DETAILS); 39 | 40 | if (this.sessionId) { 41 | stripe.redirectToCheckout({ 42 | sessionId: this.sessionId, 43 | }); 44 | return; 45 | } 46 | 47 | if (this.lineItems && this.lineItems.length && !this.mode) { 48 | console.error('Error: Property \'mode\' is required when using \'lineItems\'. See https://stripe.com/docs/js/checkout/redirect_to_checkout#stripe_checkout_redirect_to_checkout-options-mode'); 49 | return; 50 | } 51 | 52 | const options = { 53 | billingAddressCollection: this.billingAddressCollection, 54 | cancelUrl: this.cancelUrl, 55 | clientReferenceId: this.clientReferenceId, 56 | customerEmail: this.customerEmail, 57 | items: this.items, 58 | lineItems: this.lineItems, 59 | locale: this.$coerced.locale, 60 | mode: this.mode, 61 | shippingAddressCollection: this.shippingAddressCollection, 62 | submitType: this.submitType, 63 | successUrl: this.successUrl, 64 | }; 65 | 66 | return stripe.redirectToCheckout(options); 67 | } catch (e) { 68 | console.error(e); 69 | this.$emit('error', e); 70 | } 71 | }, 72 | }, 73 | }; 74 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '26 19 * * 0' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at jofftiquez@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Request for contributions 2 | 3 | Please contribute to this repository if any of the following is true: 4 | - You have expertise in community development, communication, or education 5 | - You want open source communities to be more collaborative and inclusive 6 | - You want to help lower the burden to first time contributors 7 | 8 | # How to contribute 9 | 10 | Prerequisites: 11 | 12 | - Familiarity with [pull requests](https://help.github.com/articles/using-pull-requests) and [issues](https://guides.github.com/features/issues/). 13 | - Knowledge of [Markdown](https://help.github.com/articles/markdown-basics/) for editing `.md` documents. 14 | 15 | In particular, this community seeks the following types of contributions: 16 | 17 | - **Ideas**: participate in an issue thread or start your own to have your voice 18 | heard. 19 | - **Resources**: submit a pull request to add to RESOURCES.md with links to related content. 20 | - **Outline sections**: help us ensure that this repository is comprehensive. if 21 | there is a topic that is overlooked, please add it, even if it is just a stub 22 | in the form of a header and single sentence. Initially, most things fall into 23 | this category. 24 | - **Writing**: contribute your expertise in an area by helping us expand the included 25 | content. 26 | - **Copy editing**: fix typos, clarify language, and generally improve the quality 27 | of the content. 28 | - **Formatting**: help keep content easy to read with consistent formatting. 29 | 30 | # Conduct 31 | 32 | We are committed to providing a friendly, safe and welcoming environment for 33 | all, regardless of gender, sexual orientation, disability, ethnicity, religion, 34 | or similar personal characteristic. 35 | 36 | On IRC, please avoid using overtly sexual nicknames or other nicknames that 37 | might detract from a friendly, safe and welcoming environment for all. 38 | 39 | Please be kind and courteous. There's no need to be mean or rude. 40 | Respect that people have differences of opinion and that every design or 41 | implementation choice carries a trade-off and numerous costs. There is seldom 42 | a right answer, merely an optimal answer given a set of values and 43 | circumstances. 44 | 45 | Please keep unstructured critique to a minimum. If you have solid ideas you 46 | want to experiment with, make a fork and see how it works. 47 | 48 | We will exclude you from interaction if you insult, demean or harass anyone. 49 | That is not welcome behaviour. We interpret the term "harassment" as 50 | including the definition in the 51 | [Citizen Code of Conduct](http://citizencodeofconduct.org/); 52 | if you have any lack of clarity about what might be included in that concept, 53 | please read their definition. In particular, we don't tolerate behavior that 54 | excludes people in socially marginalized groups. 55 | 56 | Private harassment is also unacceptable. No matter who you are, if you feel 57 | you have been or are being harassed or made uncomfortable by a community 58 | member, please contact one of the channel ops or any of the 59 | [CONTRIBUTING.md](https://github.com/jden/CONTRIBUTING.md) core team 60 | immediately. Whether you're a regular contributor or a newcomer, we care about 61 | making this community a safe place for you and we've got your back. 62 | 63 | Likewise any spamming, trolling, flaming, baiting or other attention-stealing 64 | behaviour is not welcome. 65 | 66 | # Communication 67 | 68 | There is an IRC channel on irc.freenode.net, channel `#CONTRIBUTING.md`. You're 69 | welcome to drop in and ask questions, discuss bugs and such. The channel is 70 | not currently logged. 71 | 72 | GitHub issues are the primary way for communicating about specific proposed 73 | changes to this project. 74 | 75 | In both contexts, please follow the conduct guidelines above. Language issues 76 | are often contentious and we'd like to keep discussion brief, civil and focused 77 | on what we're actually doing, not wandering off into too much imaginary stuff. 78 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jan 23, 2024 - See major updates [here](https://github.com/vue-stripe/vue-stripe/tree/refactor/next) 2 | 3 | # Discussion here - https://github.com/vue-stripe/vue-stripe/discussions/236 4 | 5 |

6 | drawing 7 |

Vue Stripe 💳

8 |

9 | 10 | drawing [![Financial Contributors on Open Collective](https://opencollective.com/vue-stripe-checkout/all/badge.svg?label=financial+contributors)](https://opencollective.com/vue-stripe-checkout) ![npm bundle size](https://img.shields.io/bundlephobia/min/@vue-stripe/vue-stripe?style=flat-square) ![npm](https://img.shields.io/npm/dw/@vue-stripe/vue-stripe?style=flat-square) ![GitHub Workflow Status](https://img.shields.io/github/workflow/status/vue-stripe/vue-stripe/Deploy?style=flat-square) [![saythanks](https://img.shields.io/badge/say-thanks-ff69b4.svg)](https://opencollective.com/vue-stripe-checkout) 11 | 12 | > [Vue Stripe](https://vuestripe.com) is now an official [Stripe partner](https://stripe.com/partners/vue-stripe) 🎉 13 | 14 | Stripe Checkout & Elements for Vue.js (support for Vue3 is currently in development) 15 | 16 | You can support this project by giving it a star, or following the author. You can also send your love through [Open Collective](https://opencollective.com/vue-stripe-checkout#section-contribute) :heart:. 17 | 18 | ## Documentation 19 | 20 | - [Website (https://vuestripe.com)](https://vuestripe.com) 21 | - [Documentation](https://docs.vuestripe.com/vue-stripe/) 22 | - [Stripe Checkout](https://docs.vuestripe.com/vue-stripe/stripe-checkout) 23 | - [Stripe Elements](https://docs.vuestripe.com/vue-stripe/stripe-elements) 24 | - [Stripe Plugin](https://docs.vuestripe.com/vue-stripe/vue-stripe-plugin) 25 | 26 | ## Contributors 27 | 28 | ### Code Contributors 29 | 30 | This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)]. 31 | 32 | 33 | ### Financial Contributors 34 | 35 | Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/vue-stripe-checkout/contribute)] 36 | 37 | #### Individuals 38 | 39 | 40 | 41 | #### Organizations 42 | 43 | Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/vue-stripe-checkout/contribute)] 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | **SPECIAL THANKS TO:** 58 | 59 | [](https://mightyminds.org) 60 | [](https://mycure.md) 61 | [](http://myteamops.com) 62 | 63 | **Vue Stripe is now powered by GitBook** 64 | 65 | [](https://gitbook.com) 66 | 67 | Made with :heart: by [Joff Tiquez](https://twitter.com/jrtiquez) 68 | -------------------------------------------------------------------------------- /src/elements/Card.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 245 | 246 | 283 | -------------------------------------------------------------------------------- /src/elements/Payment.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 270 | 271 | 280 | --------------------------------------------------------------------------------