Payment setting frontend part 3 - added paystack

public/mix-manifest.json

@@ -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"
 }

resources/js/components/Others/SelectSingleChargeMethodPopup.vue

@@ -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')"

resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue

@@ -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.')">
+					<AppInputText :title="$t('Your Webhook URL')" :description="$t('Please copy your url and paste it to the service webhook setup.')">
-						<CopyInput size="small" :str="stripeWebhookEndpoint" />
+						<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