//
//
//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
/* harmony default export */ __webpack_exports__["default"] = ({
name: "StripeModal",
data: function data() {
return {
stripe: null,
- _elementsModal_HOST_URL: '/pay',
amount: '-'
};
},
+ mounted: function mounted() {
+ if (location.search.indexOf('?pay=now') >= 0) {
+ this.toggleElementsModalVisibility();
+ }
+ },
methods: {
createIntent: function createIntent() {
var _this = this;
});
},
getPublicKey: function getPublicKey() {
- return Promise.resolve("pk_test_51HcBp3KZBXuYePomhVUc9RxbsZbSfuoiu0NKiotBW4ZKwCbM6sLlPMLSyPDQeB0MUXoQD3qbk23eJ41NVpM1z1oT00lg84Ywcq");
- return fetch(this._elementsModal_HOST_URL + "/public-key", {
+ // return Promise.resolve("pk_test_51HcBp3KZBXuYePomhVUc9RxbsZbSfuoiu0NKiotBW4ZKwCbM6sLlPMLSyPDQeB0MUXoQD3qbk23eJ41NVpM1z1oT00lg84Ywcq");
+ return fetch("/pay/public-key", {
method: "get",
headers: {
"Content-Type": "application/json"
if (modal && modal.classList) {
modal.classList.toggle("ElementsModal--show-modal");
+ this.createIntent();
}
},
createPaymentIntent: function createPaymentIntent(content) {
- return fetch("/pay/payment_intents", {
+ return fetch("/pay/payment-intents", {
method: "post",
headers: {
"Content-Type": "application/json",
props: ['content'],
methods: {
toggleElementsModalVisibility: function toggleElementsModalVisibility() {
- var modal = document.querySelector(".ElementsModal--modal");
-
- if (modal && modal.classList) {
- modal.classList.toggle("ElementsModal--show-modal");
- this.$refs.stripeModal.createIntent();
- }
+ this.$refs.stripeModal.toggleElementsModalVisibility();
}
}
});
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(false);
// Module
-exports.push([module.i, "\n.ElementsModal--modal[data-v-728fb3ae] {\n all: initial;\n box-sizing: border-box;\n position: fixed;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n visibility: hidden;\n transform: scale(1.1);\n transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\n z-index: 100001 !important;\n}\n.ElementsModal--modal-content[data-v-728fb3ae] {\n position: absolute;\n top: 42%;\n left: 50%;\n /* make media query for this :) */\n transform: translate(-50%, -50%);\n border-radius: 10px;\n background: rgb(255, 255, 255);\n overflow: hidden;\n width: 385px;\n border-radius: 0.5rem;\n}\n@media screen and (max-width: 600px) {\n.ElementsModal--modal-content[data-v-728fb3ae] {\n height: 100vh;\n width: 100%;\n border-radius: 0;\n}\n.ElementsModal--top[data-v-728fb3ae] {\n padding-top: 4em;\n}\n.ElementsModal--close[data-v-728fb3ae] {\n padding-top: 4em;\n}\n}\n.ElementsModal--top[data-v-728fb3ae] {\n display: flex;\n justify-content: flex-end;\n position: relative;\n}\n.ElementsModal--close[data-v-728fb3ae] {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n outline: inherit;\n color: rgb(255, 255, 255);\n cursor: pointer;\n position: absolute;\n top: 0;\n right: 0;\n border: none;\n}\n.ElementsModal--show-modal[data-v-728fb3ae] {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\n}\n.ElementsModal--details[data-v-728fb3ae] {\n margin-bottom: 2px;\n}\n.ElementsModal--price[data-v-728fb3ae] {\n color: rgb(255, 255, 255);\n font-size: 36px;\n font-weight: 600;\n}\n.ElementsModal--top-banner[data-v-728fb3ae] {\n background-color: #044e9c;\n text-align: center;\n padding: 20px 1em 2em;\n}\n.ElementsModal--email[data-v-728fb3ae] {\n color: rgba(255, 255, 255, 0.5);\n font-size: 16px;\n font-weight: 500;\n}\n.ElementsModal--product[data-v-728fb3ae] {\n color: rgba(255, 255, 255, 0.5);\n font-size: 16px;\n font-weight: 500;\n}\n.ElementsModal--company[data-v-728fb3ae] {\n color: rgb(255, 255, 255);\n font-size: 18px;\n font-weight: bold;\n margin: auto;\n margin-bottom: 32px;\n}\n.ElementsModal--footer-text[data-v-728fb3ae] {\n color: rgba(0, 0, 0, 0.4);\n font-size: 12px;\n font-weight: normal;\n text-align: center;\n line-height: 16px;\n}\n.ElementsModal--error-message[data-v-728fb3ae] {\n margin-top: 5px;\n color: rgb(220, 39, 39);\n font-size: 13px;\n line-height: 17px;\n}\n.ElementsModal--pay-button-wrapper[data-v-728fb3ae] {\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n margin: 25px;\n width: 350px;\n height: 40px;\n}\n.ElementsModal--pay-button[data-v-728fb3ae] {\n cursor: pointer;\n border: 0;\n width: 100%;\n text-align: center;\n height: 40px;\n box-shadow: inset 0 0 0 1px rgba(50, 50, 93, 0.1),\n 0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n border-radius: 6px 6px 6px 6px;\n font-size: 16px;\n font-weight: 600;\n\n background-color: rgb(0, 116, 212);\n color: rgb(255, 255, 255);\n}\n.ElementsModal--pay-button[data-v-728fb3ae]:focus {\n outline: none;\n box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),\n 0 0 0 4px rgba(50, 151, 211, 0.3);\n}\n.ElementsModal--dropdowns[data-v-728fb3ae] {\n margin: 10px;\n -webkit-appearance: none;\n background: rgb(255, 255, 255);\n box-shadow: 0px 0px 0px 1px rgb(224, 224, 224),\n 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);\n border-radius: 4px 4px 4px 4px;\n}\n\n/* Form */\n.ElementsModal--payment-form[data-v-728fb3ae] {\n margin-bottom: 0;\n}\n.ElementsModal--label[data-v-728fb3ae] {\n color: rgba(0, 0, 0, 0.6);\n font-size: 14px;\n font-weight: 500;\n}\n.ElementsModal--forms[data-v-728fb3ae] {\n padding: 5%;\n}\n.ElementsModal--form[data-v-728fb3ae] {\n margin-bottom: 14px;\n}\n.ElementsModal--form-label[data-v-728fb3ae] {\n font-size: 13px;\n margin-bottom: 4px;\n display: block;\n color: rgba(0, 0, 0, 0.6);\n}\n.ElementsModal--form-select select[data-v-728fb3ae] {\n padding: 10px 12px;\n width: 100%;\n border: 1px solid transparent;\n outline: none;\n box-shadow: 0px 0px 0px 1px rgb(224, 224, 224),\n 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);\n transition: box-shadow 150ms ease;\n border-radius: 5px 5px 5px 5px;\n\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.193 3.97a.75.75 0 0 1 1.062 1.062L6.53 9.756a.75.75 0 0 1-1.06 0L.745 5.032A.75.75 0 0 1 1.807 3.97L6 8.163l4.193-4.193z' fill='%23000' fill-rule='evenodd' fill-opacity='.4'/%3E%3C/svg%3E\");\n background-size: 12px;\n background-position: calc(100% - 16px) center;\n background-repeat: no-repeat;\n color: rgb(40, 40, 40);\n font-size: 16px;\n font-weight: normal;\n}\n.ElementsModal--form-select select[data-v-728fb3ae]:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 rgb(0, 0, 0);\n}\n.ElementsModal--form > label[data-v-728fb3ae] {\n width: 100%;\n}\n.ElementsModal--form-select select[data-v-728fb3ae]:focus {\n box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),\n 0 0 0 4px rgba(50, 151, 211, 0.3);\n}\n.ElementsModal--form-select select[data-v-728fb3ae]::-ms-expand {\n display: none; /* hide the default arrow in ie10 and ie11 */\n}\n.ElementsModal--form-divider[data-v-728fb3ae] {\n margin-top: 14px;\n margin-bottom: 25px;\n text-align: center;\n border-bottom: 1px solid rgb(231, 231, 231);\n height: 20px;\n width: 100%;\n}\n.ElementsModal--form-divider-text[data-v-728fb3ae] {\n position: relative;\n bottom: -10px; /* half of line-height */\n padding: 0 10px;\n background: rgb(255, 255, 255);\n color: rgb(144, 144, 144);\n font-size: 14px;\n font-weight: 400;\n}\n.StripeElement--payment-request[data-v-728fb3ae] {\n display: none;\n margin-bottom: 14px;\n}\n.StripeElement--payment-request-button[data-v-728fb3ae] {\n margin-bottom: 12px;\n}\n.StripeElement--card[data-v-728fb3ae] {\n box-sizing: border-box;\n height: 40px;\n padding: 10px 12px;\n border: 1px solid transparent;\n border-radius: 5px 5px 5px 5px;\n background-color: white;\n\n box-shadow: 0px 0px 0px 1px rgb(224, 224, 224),\n 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);\n transition: box-shadow 150ms ease;\n}\n.StripeElement--card--focus[data-v-728fb3ae] {\n box-shadow: 0 1px 3px 0 rgb(207, 215, 223);\n}\n.StripeElement--card--invalid[data-v-728fb3ae] {\n border-color: rgb(239, 152, 150);\n}\n.StripeElement--card--webkit-autofill[data-v-728fb3ae] {\n background-color: rgb(254, 253, 229) !important;\n}\n\n", ""]);
+exports.push([module.i, "\ninput[data-v-728fb3ae]{\n height: 40px;\n padding: 10px 12px;\n width: 100%;\n color: #32325d;\n background-color: white;\n border: 1px solid transparent;\n border-radius: 4px;\n\n box-shadow: 0 1px 3px 0 #e6ebf1;\n transition: box-shadow 150ms ease;\n}\ninput[data-v-728fb3ae]:focus {\n box-shadow: 0 1px 3px 0 #cfd7df;\n}\n.ElementsModal--modal[data-v-728fb3ae] {\n all: initial;\n box-sizing: border-box;\n position: fixed;\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n opacity: 0;\n visibility: hidden;\n transform: scale(1.1);\n transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;\n z-index: 100001 !important;\n}\n.ElementsModal--modal-content[data-v-728fb3ae] {\n position: absolute;\n top: 42%;\n left: 50%;\n /* make media query for this :) */\n transform: translate(-50%, -50%);\n border-radius: 10px;\n background: rgb(255, 255, 255);\n overflow: hidden;\n width: 385px;\n border-radius: 0.5rem;\n}\n@media screen and (max-width: 600px) {\n.ElementsModal--modal-content[data-v-728fb3ae] {\n height: 100vh;\n width: 100%;\n border-radius: 0;\n}\n.ElementsModal--top[data-v-728fb3ae] {\n padding-top: 4em;\n}\n.ElementsModal--close[data-v-728fb3ae] {\n padding-top: 4em;\n}\n}\n.ElementsModal--top[data-v-728fb3ae] {\n display: flex;\n justify-content: flex-end;\n position: relative;\n}\n.ElementsModal--close[data-v-728fb3ae] {\n background: none;\n color: inherit;\n border: none;\n padding: 0;\n font: inherit;\n outline: inherit;\n color: rgb(255, 255, 255);\n cursor: pointer;\n position: absolute;\n top: 0;\n right: 0;\n border: none;\n}\n.ElementsModal--show-modal[data-v-728fb3ae] {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;\n}\n.ElementsModal--details[data-v-728fb3ae] {\n margin-bottom: 2px;\n}\n.ElementsModal--price[data-v-728fb3ae] {\n color: rgb(255, 255, 255);\n font-size: 36px;\n font-weight: 600;\n}\n.ElementsModal--top-banner[data-v-728fb3ae] {\n background-color: #044e9c;\n text-align: center;\n padding: 20px 1em 2em;\n}\n.ElementsModal--email[data-v-728fb3ae] {\n color: rgba(255, 255, 255, 0.5);\n font-size: 16px;\n font-weight: 500;\n}\n.ElementsModal--product[data-v-728fb3ae] {\n color: rgba(255, 255, 255, 0.5);\n font-size: 16px;\n font-weight: 500;\n}\n.ElementsModal--company[data-v-728fb3ae] {\n color: rgb(255, 255, 255);\n font-size: 18px;\n font-weight: bold;\n margin: auto;\n margin-bottom: 32px;\n}\n.ElementsModal--footer-text[data-v-728fb3ae] {\n color: rgba(0, 0, 0, 0.4);\n font-size: 12px;\n font-weight: normal;\n text-align: center;\n line-height: 16px;\n}\n.ElementsModal--error-message[data-v-728fb3ae] {\n margin-top: 5px;\n color: rgb(220, 39, 39);\n font-size: 13px;\n line-height: 17px;\n}\n.ElementsModal--pay-button-wrapper[data-v-728fb3ae] {\n font-family: -apple-system, BlinkMacSystemFont, sans-serif;\n margin: 25px;\n width: 350px;\n height: 40px;\n}\n.ElementsModal--pay-button[data-v-728fb3ae] {\n cursor: pointer;\n border: 0;\n width: 100%;\n text-align: center;\n height: 40px;\n box-shadow: inset 0 0 0 1px rgba(50, 50, 93, 0.1),\n 0 2px 5px 0 rgba(50, 50, 93, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n border-radius: 6px 6px 6px 6px;\n font-size: 16px;\n font-weight: 600;\n\n background-color: rgb(0, 116, 212);\n color: rgb(255, 255, 255);\n}\n.ElementsModal--pay-button[data-v-728fb3ae]:focus {\n outline: none;\n box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),\n 0 0 0 4px rgba(50, 151, 211, 0.3);\n}\n.ElementsModal--dropdowns[data-v-728fb3ae] {\n margin: 10px;\n -webkit-appearance: none;\n background: rgb(255, 255, 255);\n box-shadow: 0px 0px 0px 1px rgb(224, 224, 224),\n 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);\n border-radius: 4px 4px 4px 4px;\n}\n\n/* Form */\n.ElementsModal--payment-form[data-v-728fb3ae] {\n margin-bottom: 0;\n}\n.ElementsModal--label[data-v-728fb3ae] {\n color: rgba(0, 0, 0, 0.6);\n font-size: 14px;\n font-weight: 500;\n}\n.ElementsModal--forms[data-v-728fb3ae] {\n padding: 5%;\n}\n.ElementsModal--form[data-v-728fb3ae] {\n margin-bottom: 14px;\n}\n.ElementsModal--form-label[data-v-728fb3ae] {\n font-size: 13px;\n margin-bottom: 4px;\n display: block;\n color: rgba(0, 0, 0, 0.6);\n}\n.ElementsModal--form-select select[data-v-728fb3ae] {\n padding: 10px 12px;\n width: 100%;\n border: 1px solid transparent;\n outline: none;\n box-shadow: 0px 0px 0px 1px rgb(224, 224, 224),\n 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);\n transition: box-shadow 150ms ease;\n border-radius: 5px 5px 5px 5px;\n\n background-color: white;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.193 3.97a.75.75 0 0 1 1.062 1.062L6.53 9.756a.75.75 0 0 1-1.06 0L.745 5.032A.75.75 0 0 1 1.807 3.97L6 8.163l4.193-4.193z' fill='%23000' fill-rule='evenodd' fill-opacity='.4'/%3E%3C/svg%3E\");\n background-size: 12px;\n background-position: calc(100% - 16px) center;\n background-repeat: no-repeat;\n color: rgb(40, 40, 40);\n font-size: 16px;\n font-weight: normal;\n}\n.ElementsModal--form-select select[data-v-728fb3ae]:-moz-focusring {\n color: transparent;\n text-shadow: 0 0 0 rgb(0, 0, 0);\n}\n.ElementsModal--form > label[data-v-728fb3ae] {\n width: 100%;\n}\n.ElementsModal--form-select select[data-v-728fb3ae]:focus {\n box-shadow: 0 0 0 1px rgba(50, 151, 211, 0.3), 0 1px 1px 0 rgba(0, 0, 0, 0.07),\n 0 0 0 4px rgba(50, 151, 211, 0.3);\n}\n.ElementsModal--form-select select[data-v-728fb3ae]::-ms-expand {\n display: none; /* hide the default arrow in ie10 and ie11 */\n}\n.ElementsModal--form-divider[data-v-728fb3ae] {\n margin-top: 14px;\n margin-bottom: 25px;\n text-align: center;\n border-bottom: 1px solid rgb(231, 231, 231);\n height: 20px;\n width: 100%;\n}\n.ElementsModal--form-divider-text[data-v-728fb3ae] {\n position: relative;\n bottom: -10px; /* half of line-height */\n padding: 0 10px;\n background: rgb(255, 255, 255);\n color: rgb(144, 144, 144);\n font-size: 14px;\n font-weight: 400;\n}\n.StripeElement--payment-request[data-v-728fb3ae] {\n display: none;\n margin-bottom: 14px;\n}\n.StripeElement--payment-request-button[data-v-728fb3ae] {\n margin-bottom: 12px;\n}\n.StripeElement--card[data-v-728fb3ae], .stripeElement--input[data-v-728fb3ae] {\n box-sizing: border-box;\n height: 40px;\n padding: 10px 12px;\n border: 1px solid transparent;\n border-radius: 5px 5px 5px 5px;\n background-color: white;\n\n box-shadow: 0px 0px 0px 1px rgb(224, 224, 224),\n 0px 2px 4px 0px rgba(0, 0, 0, 0.07), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.05);\n transition: box-shadow 150ms ease;\n}\n.StripeElement--card--focus[data-v-728fb3ae] {\n box-shadow: 0 1px 3px 0 rgb(207, 215, 223);\n}\n.StripeElement--card--invalid[data-v-728fb3ae] {\n border-color: rgb(239, 152, 150);\n}\n.StripeElement--card--webkit-autofill[data-v-728fb3ae] {\n background-color: rgb(254, 253, 229) !important;\n}\n\n", ""]);
// Exports
module.exports = exports;