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