nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-21 01:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

- set payment card frontend

Browse Source
This commit is contained in:
Čarodej
2021-12-28 17:08:10 +01:00
parent 47e834c368
commit da69898051
2 changed files with 99 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/mix-manifest.json
View File

@@ -73,7 +73,7 @@
"/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=13d23c92a535d7c9a4ff", "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=13d23c92a535d7c9a4ff",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=76b45c336e8e12b23e81", "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=76b45c336e8e12b23e81",
"/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=cd797256cb819aac4d24", "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=cd797256cb819aac4d24",
"/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=367c011912c661f5d453", "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=cb677c4fe6b3313b88ba",
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=743bf9cb1e62af56c04e", "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=743bf9cb1e62af56c04e",
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5", "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
"/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87", "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
@@ -1109,5 +1109,43 @@
"/chunks/settings-subscription.7c0869adc3a0adf29289.hot-update.js": "/chunks/settings-subscription.7c0869adc3a0adf29289.hot-update.js", "/chunks/settings-subscription.7c0869adc3a0adf29289.hot-update.js": "/chunks/settings-subscription.7c0869adc3a0adf29289.hot-update.js",
"/chunks/settings-subscription.baa2697a96162fd73727.hot-update.js": "/chunks/settings-subscription.baa2697a96162fd73727.hot-update.js", "/chunks/settings-subscription.baa2697a96162fd73727.hot-update.js": "/chunks/settings-subscription.baa2697a96162fd73727.hot-update.js",
"/chunks/settings-subscription.39bf81b90a04893eeb65.hot-update.js": "/chunks/settings-subscription.39bf81b90a04893eeb65.hot-update.js", "/chunks/settings-subscription.39bf81b90a04893eeb65.hot-update.js": "/chunks/settings-subscription.39bf81b90a04893eeb65.hot-update.js",
"/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js": "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js" "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js": "/chunks/settings-subscription.70eba1d7c1835c99b4f7.hot-update.js",
"/chunks/settings-subscription.cc17d30bd3a375fca707.hot-update.js": "/chunks/settings-subscription.cc17d30bd3a375fca707.hot-update.js",
"/chunks/settings-subscription.1325aa8c630f944c24af.hot-update.js": "/chunks/settings-subscription.1325aa8c630f944c24af.hot-update.js",
"/chunks/settings-subscription.6ffd6bbaa09de65f6aa3.hot-update.js": "/chunks/settings-subscription.6ffd6bbaa09de65f6aa3.hot-update.js",
"/chunks/settings-subscription.3ba16418b796668eb361.hot-update.js": "/chunks/settings-subscription.3ba16418b796668eb361.hot-update.js",
"/chunks/settings-subscription.84fe73586cd8466783df.hot-update.js": "/chunks/settings-subscription.84fe73586cd8466783df.hot-update.js",
"/chunks/settings-subscription.3c942df3f26d2e602928.hot-update.js": "/chunks/settings-subscription.3c942df3f26d2e602928.hot-update.js",
"/chunks/settings-subscription.8632602e5c9e0d12d74d.hot-update.js": "/chunks/settings-subscription.8632602e5c9e0d12d74d.hot-update.js",
"/chunks/settings-subscription.35680b3be6ea0fe906cb.hot-update.js": "/chunks/settings-subscription.35680b3be6ea0fe906cb.hot-update.js",
"/chunks/settings-subscription.c730b71222d3fb43f796.hot-update.js": "/chunks/settings-subscription.c730b71222d3fb43f796.hot-update.js",
"/chunks/settings-subscription.a928b24f1a0c41b4d612.hot-update.js": "/chunks/settings-subscription.a928b24f1a0c41b4d612.hot-update.js",
"/chunks/settings-subscription.717617f819a9d33beda5.hot-update.js": "/chunks/settings-subscription.717617f819a9d33beda5.hot-update.js",
"/chunks/settings-subscription.471c8cca333f943128c7.hot-update.js": "/chunks/settings-subscription.471c8cca333f943128c7.hot-update.js",
"/chunks/settings-subscription.6d60e95b671a05527047.hot-update.js": "/chunks/settings-subscription.6d60e95b671a05527047.hot-update.js",
"/chunks/settings-subscription.7f48e2d47eb81d4714cc.hot-update.js": "/chunks/settings-subscription.7f48e2d47eb81d4714cc.hot-update.js",
"/chunks/settings-subscription.d90e002cbce339aaeff8.hot-update.js": "/chunks/settings-subscription.d90e002cbce339aaeff8.hot-update.js",
"/chunks/settings-subscription.9732435d9f75a684527b.hot-update.js": "/chunks/settings-subscription.9732435d9f75a684527b.hot-update.js",
"/chunks/settings-subscription.f10bc57ec968d9dbaf21.hot-update.js": "/chunks/settings-subscription.f10bc57ec968d9dbaf21.hot-update.js",
"/chunks/settings-subscription.fedffd4fa4124c4ca3f1.hot-update.js": "/chunks/settings-subscription.fedffd4fa4124c4ca3f1.hot-update.js",
"/chunks/settings-subscription.a497c046ddaecde724e3.hot-update.js": "/chunks/settings-subscription.a497c046ddaecde724e3.hot-update.js",
"/chunks/settings-subscription.57190e3556be0cdcaf50.hot-update.js": "/chunks/settings-subscription.57190e3556be0cdcaf50.hot-update.js",
"/chunks/settings-subscription.0f2ba1995ab0a84b27ac.hot-update.js": "/chunks/settings-subscription.0f2ba1995ab0a84b27ac.hot-update.js",
"/chunks/settings-subscription.a4226a99d4727b7fb896.hot-update.js": "/chunks/settings-subscription.a4226a99d4727b7fb896.hot-update.js",
"/chunks/settings-subscription.1ad5ba09169993755986.hot-update.js": "/chunks/settings-subscription.1ad5ba09169993755986.hot-update.js",
"/chunks/settings-subscription.3510d9394bdb093041a1.hot-update.js": "/chunks/settings-subscription.3510d9394bdb093041a1.hot-update.js",
"/chunks/settings-subscription.dd5473c2b0379612700b.hot-update.js": "/chunks/settings-subscription.dd5473c2b0379612700b.hot-update.js",
"/chunks/settings-subscription.e1962bbd1202ebb6d54b.hot-update.js": "/chunks/settings-subscription.e1962bbd1202ebb6d54b.hot-update.js",
"/chunks/settings-subscription.8d23e450d58552f9f107.hot-update.js": "/chunks/settings-subscription.8d23e450d58552f9f107.hot-update.js",
"/chunks/settings-subscription.b924bf36d51e786f95d7.hot-update.js": "/chunks/settings-subscription.b924bf36d51e786f95d7.hot-update.js",
"/chunks/settings-subscription.07c03ba41c50073b436b.hot-update.js": "/chunks/settings-subscription.07c03ba41c50073b436b.hot-update.js",
"/chunks/settings-subscription.a6fc82b81ce560ac9ec7.hot-update.js": "/chunks/settings-subscription.a6fc82b81ce560ac9ec7.hot-update.js",
"/chunks/settings-subscription.5392382a5fe0340ef1cc.hot-update.js": "/chunks/settings-subscription.5392382a5fe0340ef1cc.hot-update.js",
"/chunks/settings-subscription.2d3fb52c0d2a0c379689.hot-update.js": "/chunks/settings-subscription.2d3fb52c0d2a0c379689.hot-update.js",
"/chunks/settings-subscription.e0ea7642fca866da959d.hot-update.js": "/chunks/settings-subscription.e0ea7642fca866da959d.hot-update.js",
"/chunks/settings-subscription.f55ff72cc4cba8eac6cb.hot-update.js": "/chunks/settings-subscription.f55ff72cc4cba8eac6cb.hot-update.js",
"/chunks/settings-subscription.01357e424f8fc23085a3.hot-update.js": "/chunks/settings-subscription.01357e424f8fc23085a3.hot-update.js",
"/chunks/settings-subscription.1301f1fd880bc84f84d8.hot-update.js": "/chunks/settings-subscription.1301f1fd880bc84f84d8.hot-update.js",
"/chunks/settings-subscription.f9f65a0048969b859429.hot-update.js": "/chunks/settings-subscription.f9f65a0048969b859429.hot-update.js",
"/chunks/settings-subscription.368eb18f04eea5b19327.hot-update.js": "/chunks/settings-subscription.368eb18f04eea5b19327.hot-update.js"
} }

100
resources/js/views/User/MeteredSubscription.vue
View File

@@ -11,7 +11,7 @@
{{ user.data.relationships.balance.data.attributes.formatted }} {{ user.data.relationships.balance.data.attributes.formatted }}
</b> </b>
<div v-if="! storeCreditCardForm"> <div v-if="! isCreditCardForm">
<!-- Make payment form --> <!-- Make payment form -->
<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6"> <ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
@@ -44,16 +44,19 @@
</div> </div>
<!-- Store credit card form--> <!-- Store credit card form-->
<form v-if="storeCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6"> <form v-if="isCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6">
<div id="payment-element"> <div v-if="stripeData.isInitialization" class="h-10 relative mb-6">
<Spinner />
</div>
<div id="payment-element">
<!-- Elements will create form elements here --> <!-- Elements will create form elements here -->
</div> </div>
<ButtonBase type="submit" :loading="stripeData.storingStripePaymentMethod" button-style="theme" class="w-full mt-4"> <ButtonBase :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
{{ $t('Store Card') }} {{ $t('Store Credit Card') }}
</ButtonBase> </ButtonBase>
<div id="error-message"> <div id="error-message">
<!-- Display error message to your customers here --> <!-- Display error message to your customers here -->
</div> </div>
</form> </form>
</div> </div>
@@ -215,6 +218,7 @@
Trash2Icon, Trash2Icon,
Edit2Icon, Edit2Icon,
} from "vue-feather-icons"; } from "vue-feather-icons";
import Spinner from "../../components/FilesView/Spinner";
import ColorLabel from "../../components/Others/ColorLabel"; import ColorLabel from "../../components/Others/ColorLabel";
import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper"; import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
import AppInputText from "../../components/Admin/AppInputText"; import AppInputText from "../../components/Admin/AppInputText";
@@ -251,6 +255,7 @@
FormLabel, FormLabel,
InfoBox, InfoBox,
PageTab, PageTab,
Spinner,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
@@ -296,9 +301,10 @@
], ],
chargeAmount: undefined, chargeAmount: undefined,
storeCreditCardForm: false, isCreditCardForm: false,
stripeData: { stripeData: {
isInitialization: true,
storingStripePaymentMethod: false storingStripePaymentMethod: false
} }
} }
@@ -389,7 +395,7 @@
}, },
async storeStripePaymentMethod() { async storeStripePaymentMethod() {
this.storingStripePaymentMethod = true this.stripeData.storingStripePaymentMethod = true
const {error} = await stripe.confirmSetup({ const {error} = await stripe.confirmSetup({
//`Elements` instance that was used to create the Payment Element //`Elements` instance that was used to create the Payment Element
@@ -407,52 +413,64 @@
const messageContainer = document.querySelector('#error-message'); const messageContainer = document.querySelector('#error-message');
messageContainer.textContent = error.message; messageContainer.textContent = error.message;
} else { } else {
console.log('done!');
// Your customer will be redirected to your `return_url`. For some payment // Your customer will be redirected to your `return_url`. For some payment
// methods like iDEAL, your customer will be redirected to an intermediate // methods like iDEAL, your customer will be redirected to an intermediate
// site first to authorize the payment, then redirected to the `return_url`. // site first to authorize the payment, then redirected to the `return_url`.
events.$emit('toaster', {
type: 'success',
message: this.$t('Your credit card was stored successfully'),
})
} }
this.storingStripePaymentMethod = false this.stripeData.storingStripePaymentMethod = false
}, },
async stripeInit() { async stripeInit() {
// Init stripe js // Init stripe js
stripe = await loadStripe(this.config.stripe_public_key); stripe = await loadStripe(this.config.stripe_public_key);
const options = { await axios.get('/api/stripe/setup-intent')
clientSecret: 'seti_1KBfG8B9m4sTKy1q7mOlCzVF_secret_KrO282HxFZpgXK2XGw8Ctj4XEMqizaG', .then(response => {
appearance: { // Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
theme: 'stripe', elements = stripe.elements({
variables: { clientSecret: response.data,
colorPrimary: this.config.app_color, appearance: {
fontFamily: 'Nunito', theme: 'stripe',
borderRadius: '8px', variables: {
colorText: this.isDarkMode ? '#bec6cf' : '#1B2539', colorPrimary: this.config.app_color,
colorBackground: this.isDarkMode ? '#191b1e' : '#fff', fontFamily: 'Nunito',
fontWeightNormal: '700', borderRadius: '8px',
fontSizeSm: '0.875rem', colorText: this.isDarkMode ? '#bec6cf' : '#1B2539',
colorSuccessText: '#0ABB87', colorBackground: this.isDarkMode ? '#191b1e' : '#fff',
colorSuccess: '#0ABB87', fontWeightNormal: '700',
colorWarning: '#fd397a', fontSizeSm: '0.875rem',
colorWarningText: '#fd397a', colorSuccessText: '#0ABB87',
colorDangerText: '#fd397a', colorSuccess: '#0ABB87',
colorTextSecondary: '#6b7280', colorWarning: '#fd397a',
spacingGridRow: '20px', colorWarningText: '#fd397a',
} colorDangerText: '#fd397a',
}, colorTextSecondary: '#6b7280',
} spacingGridRow: '20px',
}
},
});
// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2 // Create and mount the Payment Element
elements = stripe.elements(options); const paymentElement = elements.create('payment');
// Create and mount the Payment Element paymentElement.mount('#payment-element');
const paymentElement = elements.create('payment'); })
.catch(() => {
events.$emit('toaster', {
type: 'danger',
message: this.$t('popup_error.title'),
})
})
paymentElement.mount('#payment-element'); this.stripeData.isInitialization = false
}, },
showStoreCreditCardForm() { showStoreCreditCardForm() {
this.storeCreditCardForm = !this.storeCreditCardForm this.isCreditCardForm = !this.isCreditCardForm
this.stripeInit() this.stripeInit()
} }
}, },