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