with a known ID. This
\n * gets replaced by Stripe with an IFrame with their custom inputs.\n * see: {@link|https://stripe.com/docs/stripe-js/reference#element-mount}\n */\n genInput (): VNode {\n return this.$createElement('div', { attrs: { id: this.computedId, tabindex: -1 } })\n },\n /**\n * Maintains the ability for users of the component to control the\n * loading/progress indicator of the component, but also shows the\n * progress bar while the Stripe library is being loaded.\n */\n genProgress (): VNode | VNode[] | null {\n if (this.loading === false && this.isReady) return null\n return this.$slots.progress || this.$createElement(VProgressLinear, {\n props: {\n absolute: true,\n color: (this.loading === true || this.loading === '')\n ? (this.color || 'primary')\n : (this.loading || 'primary'),\n height: this.loaderHeight,\n indeterminate: true,\n },\n })\n },\n /**\n * Generate styles for Stripe elements\n *\n * @param {string} font\n */\n genStyle: (customStyle: ElementStyles, fontName: string, isDark: boolean, theme: VuetifyThemeVariant): ElementStyles => {\n const defaults: ElementStyles = {\n base: {\n color: isDark ? '#ffffff' : '#000000',\n fontFamily: `'${fontName}', sans-serif`,\n fontSize: '16px',\n fontSmoothing: 'antialiased',\n iconColor: isDark ? '#eceff1' : '#455a64',\n '::placeholder': {\n color: isDark ? 'rgb(255,255,255,0.7)' : 'rgb(0,0,0,0.54)',\n },\n },\n invalid: {\n color: theme.error as string || '#ff5252',\n iconColor: theme.error as string || '#ff5252',\n },\n }\n return merge(defaults, customStyle)\n },\n /**\n * Loosely validates a URL\n * Based on: {@link|https://github.com/segmentio/is-url}\n *\n * @param {string} url The string to be tested\n * @returns {boolean} True if the url string passes the test\n */\n isURL: (url: string): boolean => {\n const protocolAndDomainRegex = /^(?:\\w+:)?\\/\\/(\\S+)$/\n const localhostDomainRegex = /^localhost[:?\\d]*(?:[^:?\\d]\\S*)?$/\n const nonLocalhostDomainRegex = /^[^\\s.]+\\.\\S{2,}$/\n if (typeof url !== 'string') return false\n const match = url.match(protocolAndDomainRegex)\n if (!match) return false\n const everythingAfterProtocol = match[1]\n if (!everythingAfterProtocol) return false\n if (\n localhostDomainRegex.test(everythingAfterProtocol) ||\n nonLocalhostDomainRegex.test(everythingAfterProtocol)\n ) {\n return true\n }\n return false\n },\n /**\n * Check to see if the Stripe.js library has been loaded into the\n * browser. If it has not, try to load it. If Stripe cannot be\n * loaded or there was a problem with loading, an error is thrown.\n *\n * @throws {Error} Could not load Stripe because `vue-plugin-load-script` is not available\n * @throws {Error} Could not load Stripe because of a network (or other) error\n */\n loadStripe () {\n // Is Stripe already loaded?\n if (typeof Stripe === 'function') {\n // Yes. Generate the card.\n this.genCard()\n } else {\n // No. Set the Stripe URL.\n const src = 'https://js.stripe.com/v3/'\n // Is it already being loaded by another component?\n if (document.querySelector(`script[src=\"${src}\"]`)) {\n // Yes, it's being loaded, so listen for it.\n this.$root.$once('stripe-loaded', () => {\n // instantiate the card\n this.genCard()\n })\n } else {\n // No. Is the script loader installed?\n if (typeof this.$loadScript === 'undefined') {\n // No.\n this.loading = false\n this.errorBucket.push('Stripe could not be loaded')\n throw new Error('[VStripeCard Error]: Stripe is not available and could not be loaded. Please make sure that you have installed and configured all of the necessary dependencies to use this component.')\n } else {\n // Yes, so try to load it.\n this.$loadScript(src).then(() => {\n // Let other potential components know...\n this.$root.$emit('stripe-loaded')\n // and generate the card\n this.genCard()\n }).catch((error: Error) => {\n this.loading = false\n this.errorBucket.push('Error loading stripe')\n throw new Error('[VStripeCard Error] There was a problem loading Stripe: ' + error.message)\n })\n }\n }\n }\n },\n /**\n * Handles card blur events. Propagates (emits) a blur event to\n * allow other components to register event handlers that can\n * respond to the card being blurred.\n *\n * @param {ElementChangeResponse} e Event data from the card element\n */\n onCardBlur (e: stripe.elements.ElementChangeResponse) {\n this.isFocused = false\n // if we have enough info, process the card\n if (this.okToSubmit) {\n this.processCard()\n }\n this.$emit('blur', e)\n },\n /**\n * Handles card change events. Clears or sets errors in the\n * `errorBucket`. If the card is empty, sets `lazyValue` to false.\n *\n * @param {ElementChangeResponse} e Event data from the card element\n */\n onCardChange (e: stripe.elements.ElementChangeResponse) {\n if (e.error) {\n // handle card errors\n this.okToSubmit = false\n e.error.message && this.errorBucket.push(e.error.message)\n }\n if (e.complete) {\n // handle card input is complete\n this.okToSubmit = true\n this.errorBucket = []\n }\n if (e.empty) {\n this.okToSubmit = false\n this.lazyValue = !e.empty\n }\n },\n /**\n * TODO: Should this function emit? Does it emit the right value?\n * Handles card focus events. Propagates (emits) a focus event to\n * allow other components to register event handlers that can\n * respond to the card being focused.\n *\n * @param {ElementChangeResponse} e Event data from the card element\n */\n onCardFocus (e: stripe.elements.ElementChangeResponse) {\n this.isFocused = true\n this.$emit('focus', true)\n },\n /**\n * Handles card initialization events. Propagates (emits) a ready event to\n * allow other components to register event handlers that can\n * respond to the card being ready. Will also focus the card input\n * if `autofocus` is true.\n *\n * @param {ElementChangeResponse} e Event data from the card element\n */\n onCardReady (e: stripe.elements.ElementChangeResponse) {\n this.isReady = true\n this.autofocus && this.card !== null && this.card.focus()\n this.$emit('ready', e)\n },\n /**\n * Converts the collected payment information into a single-use token\n * or a multi-use source that can safely be passed to your backend\n * API server where a payment request can be processed.\n *\n * See {@link|https://stripe.com/docs/stripe-js/reference#stripe-create-token}\n */\n async processCard () {\n if (this.stripe && this.card) {\n if (this.create === 'token') {\n const { token, error } = await this.stripe.createToken(this.card, this.options)\n if (!error) {\n this.errorBucket = []\n this.$emit('input', token)\n } else {\n // handle error\n error.message && this.errorBucket.push(error.message)\n }\n } else {\n const { source, error } = await this.stripe.createSource(this.card, this.options)\n if (!error) {\n this.errorBucket = []\n this.$emit('input', source)\n } else {\n // handle error\n error.message && this.errorBucket.push(error.message)\n }\n }\n }\n },\n },\n})\n","import { VueConstructor } from 'vue'\nimport VStripeCard from './VStripeCard'\n\nconst VStripeElements = {\n install (Vue: VueConstructor, options?: any) {\n Vue.component('v-stripe-card', VStripeCard)\n },\n}\n\nexport { VStripeCard }\nexport default VStripeElements\n\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(VStripeElements)\n}\n"],"sourceRoot":""}