nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-06 02:33:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Payment setting frontend part 3 - added paystack

Browse Source
This commit is contained in:
Čarodej
2022-01-07 13:06:54 +01:00
parent e892e0e94f
commit 5d2071ea91
3 changed files with 82 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
public/mix-manifest.json
View File

@@ -25,7 +25,7 @@
"/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js?id=50f7067283a882b798bd",
"/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js?id=2f03fbbe27b922063d16",
"/chunks/app-others.js": "/chunks/app-others.js?id=c1e42f111fd531672466",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=65d66361a555d475f003",
"/chunks/app-payments.js": "/chunks/app-payments.js?id=c80a8540cddefca47fdc",
"/chunks/app-payments~chunks/settings.js": "/chunks/app-payments~chunks/settings.js?id=ec4c3e5b27d7ee2e2cd1",
"/chunks/app-settings.js": "/chunks/app-settings.js?id=5968eed91e41e99efd4c",
"/chunks/app-setup.js": "/chunks/app-setup.js?id=c3a013b11ae7bde6f39d",
@@ -71,7 +71,7 @@
"/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a52c81995d29f51dfe05",
"/chunks/purchase-code.js": "/chunks/purchase-code.js?id=2da6b9e5f951fb7f4312",
"/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=8577d4c771602671b38a",
"/chunks/settings.js": "/chunks/settings.js?id=a0c5a8c4ba240fd8e64c",
"/chunks/settings.js": "/chunks/settings.js?id=b5cae98f485e7e6f6ef9",
"/chunks/settings-password.js": "/chunks/settings-password.js?id=1ab825f0be1d756e231b",
"/chunks/settings-storage.js": "/chunks/settings-storage.js?id=6e69a64a01e345af8b55",
"/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=2af24f8d9f3412ae0662",
@@ -159,5 +159,15 @@
"/chunks/app-payments.7e06368d2fb080c4c152.hot-update.js": "/chunks/app-payments.7e06368d2fb080c4c152.hot-update.js",
"/chunks/app-payments.279bb290039d9f31abb0.hot-update.js": "/chunks/app-payments.279bb290039d9f31abb0.hot-update.js",
"/chunks/app-payments.70fd82e6029e839c4b77.hot-update.js": "/chunks/app-payments.70fd82e6029e839c4b77.hot-update.js",
"/chunks/settings.1cb15bb6bf66878fe87b.hot-update.js": "/chunks/settings.1cb15bb6bf66878fe87b.hot-update.js"
"/chunks/settings.1cb15bb6bf66878fe87b.hot-update.js": "/chunks/settings.1cb15bb6bf66878fe87b.hot-update.js",
"/chunks/app-payments.b5cf44e7f7f0628d08cd.hot-update.js": "/chunks/app-payments.b5cf44e7f7f0628d08cd.hot-update.js",
"/chunks/app-payments.d85c16ffad623be9a7dc.hot-update.js": "/chunks/app-payments.d85c16ffad623be9a7dc.hot-update.js",
"/chunks/app-payments.25bd259df6a73ad6e6b4.hot-update.js": "/chunks/app-payments.25bd259df6a73ad6e6b4.hot-update.js",
"/chunks/app-payments.91ece7409f0c3f1c67e1.hot-update.js": "/chunks/app-payments.91ece7409f0c3f1c67e1.hot-update.js",
"/chunks/app-payments.4d997aab524b5fb4b4fb.hot-update.js": "/chunks/app-payments.4d997aab524b5fb4b4fb.hot-update.js",
"/chunks/app-payments.1ac0f072f2da4f9b574a.hot-update.js": "/chunks/app-payments.1ac0f072f2da4f9b574a.hot-update.js",
"/chunks/app-payments.aeec43cdbbeaa4ad7dec.hot-update.js": "/chunks/app-payments.aeec43cdbbeaa4ad7dec.hot-update.js",
"/chunks/app-payments.32e4b86a736bb5e1a9a4.hot-update.js": "/chunks/app-payments.32e4b86a736bb5e1a9a4.hot-update.js",
"/chunks/settings.cb10530f167c29f4c3a7.hot-update.js": "/chunks/settings.cb10530f167c29f4c3a7.hot-update.js",
"/chunks/settings.6891f54dfd161e22dd43.hot-update.js": "/chunks/settings.6891f54dfd161e22dd43.hot-update.js"
}

4
resources/js/components/Others/SelectSingleChargeMethodPopup.vue
View File

@@ -12,7 +12,7 @@
<PaymentMethod
@click.native="pickedPaymentMethod('paypal')"
driver="paypal"
:description="$t('Available PayPal Credit, Debit or Credit Card.')"
:description="config.paypal_payment_description"
>
<span v-if="! paypalMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
{{ $t('Select') }}
@@ -29,7 +29,7 @@
<PaymentMethod
v-if="config.isPaystack"
driver="paystack"
:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
:description="config.paystack_payment_description"
>
<paystack
@click.native="pickedPaymentMethod('paystack')"

75
resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
View File

@@ -32,13 +32,13 @@
<textarea rows="2" @input="$updateText('/admin/settings', 'stripe_payment_description', stripe.paymentDescription, true)" v-model="stripe.paymentDescription" :placeholder="$t('Describe in short which methods user can pay with this payment method...')" type="text" class="focus-border-theme input-dark" />
</AppInputText>
<AppInputText :title="$t('Your Stripe Webhook URL')" :description="$t('Please copy your url and paste it to the Stripe webhook setup.')">
<CopyInput size="small" :str="stripeWebhookEndpoint" />
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
<CopyInput size="small" :str="getWebhookEndpoint('stripe')" />
</AppInputText>
<div @click="stripe.isVisibleCredentialsForm = !stripe.isVisibleCredentialsForm" class="flex items-center cursor-pointer" :class="{'mb-4': stripe.isVisibleCredentialsForm}">
<edit2-icon size="14" class="vue-feather text-theme mr-2.5" />
<b class="text-sm">{{ $t('Update Stripe Credentials') }}</b>
<b class="text-sm">{{ $t('Update Your Credentials') }}</b>
</div>
</div>
@@ -52,7 +52,7 @@
class="p-5 border rounded-xl"
>
<FormLabel icon="shield">
{{ $t('Configure Your Stripe Credentials') }}
{{ $t('Configure Your Credentials') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
@@ -66,7 +66,64 @@
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
{{ $t('Store Stripe Credentials') }}
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
</div>
</div>
<!--Paystack method configuration-->
<div v-if="allowedPayments" class="card shadow-card">
<FormLabel icon="credit-card">
{{ $t('Paystack') }}
</FormLabel>
<AppInputSwitch :title="$t('Allow Paystack Service')" :description="$t('Allow your users pay by their credit card')" :is-last="! paystack.allowedService">
<SwitchInput @input="$updateText('/admin/settings', 'allowed_paystack', paystack.allowedService)" v-model="paystack.allowedService" :state="paystack.allowedService" />
</AppInputSwitch>
<!--Stripe credentials are set up-->
<div v-if="paystack.allowedService">
<div v-if="paystack.isConfigured">
<AppInputText @input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription)" :title="$t('Payment Description')" :description="$t('The description showed below user payment method selection.')">
<textarea rows="2" @input="$updateText('/admin/settings', 'paystack_payment_description', paystack.paymentDescription, true)" v-model="paystack.paymentDescription" :placeholder="$t('Describe in short which methods user can pay with this payment method...')" type="text" class="focus-border-theme input-dark" />
</AppInputText>
<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
<CopyInput size="small" :str="getWebhookEndpoint('paystack')" />
</AppInputText>
<div @click="paystack.isVisibleCredentialsForm = !paystack.isVisibleCredentialsForm" class="flex items-center cursor-pointer" :class="{'mb-4': paystack.isVisibleCredentialsForm}">
<edit2-icon size="14" class="vue-feather text-theme mr-2.5" />
<b class="text-sm">{{ $t('Update Your Credentials') }}</b>
</div>
</div>
<!--Set up Paystack credentials-->
<ValidationObserver
v-if="! paystack.isConfigured || paystack.isVisibleCredentialsForm"
@submit.prevent="storeCredentials('paystack')"
ref="credentialsForm"
v-slot="{ invalid }"
tag="form"
class="p-5 border rounded-xl"
>
<FormLabel icon="shield">
{{ $t('Configure Your Credentials') }}
</FormLabel>
<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
<input v-model="paystack.credentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
</AppInputText>
</ValidationProvider>
<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
<input v-model="paystack.credentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red': errors[0]}" class="focus-border-theme input-dark" />
</AppInputText>
</ValidationProvider>
<ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit" class="w-full">
{{ $t('Store Credentials') }}
</ButtonBase>
</ValidationObserver>
</div>
@@ -121,9 +178,6 @@
'subscriptionTypes',
'config',
]),
stripeWebhookEndpoint() {
return `${this.config.host}/api/subscriptions/stripe/webhook`
},
submitButtonText() {
return this.isLoading ? this.$t('admin_settings.payments.button_testing') : this.$t('admin_settings.payments.button_submit')
}
@@ -167,6 +221,9 @@
}
},
methods: {
getWebhookEndpoint(service) {
return `${this.config.host}/api/subscriptions/${service}/webhook`
},
async storeCredentials(service) {
// Validate fields
@@ -231,10 +288,12 @@
},
},
mounted() {
// Set payment description
this.stripe.paymentDescription = this.config.stripe_payment_description
this.paystack.paymentDescription = this.config.paystack_payment_description
this.paypal.paymentDescription = this.config.paypal_payment_description
// Set if service is allowed
this.stripe.allowedService = this.config.isStripe
this.paystack.allowedService = this.config.isPaystack
this.paypal.allowedService = this.config.isPayPal