From f88ed999c5315c50152369fde682a711233e0f2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 23 Dec 2021 13:07:41 +0100
Subject: [PATCH] - process single charge

---
 public/assets/payments/paypal-dark.svg        |  18 ++
 public/mix-manifest.json                      | 165 +++++++++++++++-
 .../js/components/Others/PaymentMethod.vue    |  22 +++
 .../components/Others/Popup/PopupHeader.vue   |   4 +-
 .../components/Others/Popup/PopupWrapper.vue  |   2 -
 .../Others/SelectSingleChargeMethodPopup.vue  | 178 ++++++++++++++++++
 .../SelectPlanSubscriptionPopup.vue           |   4 +-
 resources/js/helpers/functionHelpers.js       |   2 +-
 resources/js/store/index.js                   |   2 +
 resources/js/store/modules/payments.js        |  33 ++++
 resources/js/views/Profile.vue                |   6 +
 .../js/views/User/MeteredSubscription.vue     |  26 ++-
 .../others/color-template.blade.php           |   1 +
 13 files changed, 442 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/payments/paypal-dark.svg
 create mode 100644 resources/js/components/Others/PaymentMethod.vue
 create mode 100644 resources/js/components/Others/SelectSingleChargeMethodPopup.vue
 create mode 100644 resources/js/store/modules/payments.js

diff --git a/public/assets/payments/paypal-dark.svg b/public/assets/payments/paypal-dark.svg
new file mode 100644
index 00000000..81e74d03
--- /dev/null
+++ b/public/assets/payments/paypal-dark.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="124px" height="31px" viewBox="0 0 124 31" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>paypal-dark</title>
+    <g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="paypal-dark" transform="translate(0.000000, 0.000000)" fill-rule="nonzero">
+            <path d="M46.2109888,6.749 L39.3719888,6.749 C38.9039888,6.749 38.5059888,7.089 38.4329888,7.551 L35.6669888,25.088 C35.6119888,25.434 35.8799888,25.746 36.2309888,25.746 L39.4959888,25.746 C39.9639888,25.746 40.3619888,25.406 40.4349888,24.943 L41.1809888,20.213 C41.2529888,19.75 41.6519888,19.41 42.1189888,19.41 L44.2839888,19.41 C48.7889888,19.41 51.3889888,17.23 52.0679888,12.91 C52.3739888,11.02 52.0809888,9.535 51.1959888,8.495 C50.2239888,7.353 48.4999888,6.749 46.2109888,6.749 Z M46.9999888,13.154 C46.6259888,15.608 44.7509888,15.608 42.9379888,15.608 L41.9059888,15.608 L42.6299888,11.025 C42.6729888,10.748 42.9129888,10.544 43.1929888,10.544 L43.6659888,10.544 C44.9009888,10.544 46.0659888,10.544 46.6679888,11.248 C47.0269888,11.668 47.1369888,12.292 46.9999888,13.154 Z" id="Shape" fill="#FFFFFF"></path>
+            <path d="M66.6539888,13.075 L63.3789888,13.075 C63.0999888,13.075 62.8589888,13.279 62.8159888,13.556 L62.6709888,14.472 L62.4419888,14.14 C61.7329888,13.111 60.1519888,12.767 58.5739888,12.767 C54.9549888,12.767 51.8639888,15.508 51.2619888,19.353 C50.9489888,21.271 51.3939888,23.105 52.4819888,24.384 C53.4799888,25.56 54.9079888,26.05 56.6069888,26.05 C59.5229888,26.05 61.1399888,24.175 61.1399888,24.175 L60.9939888,25.085 C60.9389888,25.433 61.2069888,25.745 61.5559888,25.745 L64.5059888,25.745 C64.9749888,25.745 65.3709888,25.405 65.4449888,24.942 L67.2149888,13.733 C67.2709888,13.388 67.0039888,13.075 66.6539888,13.075 Z M62.0889888,19.449 C61.7729888,21.32 60.2879888,22.576 58.3939888,22.576 C57.4429888,22.576 56.6829888,22.271 56.1949888,21.693 C55.7109888,21.119 55.5269888,20.302 55.6809888,19.392 C55.9759888,17.537 57.4859888,16.24 59.3509888,16.24 C60.2809888,16.24 61.0369888,16.549 61.5349888,17.132 C62.0339888,17.721 62.2319888,18.543 62.0889888,19.449 Z" id="Shape" fill="#FFFFFF"></path>
+            <path d="M84.0959888,13.075 L80.8049888,13.075 C80.4909888,13.075 80.1959888,13.231 80.0179888,13.492 L75.4789888,20.178 L73.5549888,13.753 C73.4339888,13.351 73.0629888,13.075 72.6429888,13.075 L69.4089888,13.075 C69.0159888,13.075 68.7429888,13.459 68.8679888,13.829 L72.4929888,24.467 L69.0849888,29.278 C68.8169888,29.657 69.0869888,30.178 69.5499888,30.178 L72.8369888,30.178 C73.1489888,30.178 73.4409888,30.026 73.6179888,29.77 L84.5639888,13.97 C84.8259888,13.592 84.5569888,13.075 84.0959888,13.075 Z" id="Path" fill="#FFFFFF"></path>
+            <path d="M94.9919888,6.749 L88.1519888,6.749 C87.6849888,6.749 87.2869888,7.089 87.2139888,7.551 L84.4479888,25.088 C84.3929888,25.434 84.6609888,25.746 85.0099888,25.746 L88.5199888,25.746 C88.8459888,25.746 89.1249888,25.508 89.1759888,25.184 L89.9609888,20.213 C90.0329888,19.75 90.4319888,19.41 90.8989888,19.41 L93.0629888,19.41 C97.5689888,19.41 100.167989,17.23 100.847989,12.91 C101.154989,11.02 100.859989,9.535 99.9749888,8.495 C99.0039888,7.353 97.2809888,6.749 94.9919888,6.749 Z M95.7809888,13.154 C95.4079888,15.608 93.5329888,15.608 91.7189888,15.608 L90.6879888,15.608 L91.4129888,11.025 C91.4559888,10.748 91.6939888,10.544 91.9749888,10.544 L92.4479888,10.544 C93.6819888,10.544 94.8479888,10.544 95.4499888,11.248 C95.8089888,11.668 95.9179888,12.292 95.7809888,13.154 Z" id="Shape" fill="#FFFFFF"></path>
+            <path d="M115.433989,13.075 L112.160989,13.075 C111.879989,13.075 111.640989,13.279 111.598989,13.556 L111.453989,14.472 L111.223989,14.14 C110.514989,13.111 108.934989,12.767 107.356989,12.767 C103.737989,12.767 100.647989,15.508 100.045989,19.353 C99.7339888,21.271 100.176989,23.105 101.264989,24.384 C102.264989,25.56 103.690989,26.05 105.389989,26.05 C108.305989,26.05 109.922989,24.175 109.922989,24.175 L109.776989,25.085 C109.721989,25.433 109.989989,25.745 110.340989,25.745 L113.289989,25.745 C113.756989,25.745 114.154989,25.405 114.227989,24.942 L115.998989,13.733 C116.052989,13.388 115.784989,13.075 115.433989,13.075 Z M110.868989,19.449 C110.554989,21.32 109.067989,22.576 107.173989,22.576 C106.224989,22.576 105.462989,22.271 104.974989,21.693 C104.490989,21.119 104.308989,20.302 104.460989,19.392 C104.757989,17.537 106.265989,16.24 108.130989,16.24 C109.060989,16.24 109.816989,16.549 110.314989,17.132 C110.815989,17.721 111.013989,18.543 110.868989,19.449 Z" id="Shape" fill="#FFFFFF"></path>
+            <path d="M119.294989,7.23 L116.487989,25.088 C116.432989,25.434 116.700989,25.746 117.049989,25.746 L119.871989,25.746 C120.340989,25.746 120.738989,25.406 120.810989,24.943 L123.578989,7.407 C123.633989,7.061 123.365989,6.748 123.016989,6.748 L119.856989,6.748 C119.577989,6.749 119.337989,6.953 119.294989,7.23 Z" id="Path" fill="#FFFFFF"></path>
+            <path d="M7.26598882,29.154 L7.78898882,25.832 L6.62398882,25.805 L1.06098882,25.805 L4.92698882,1.292 C4.93898882,1.218 4.97798882,1.149 5.03498882,1.1 C5.09198882,1.051 5.16498882,1.024 5.24098882,1.024 L14.6209888,1.024 C17.7349888,1.024 19.8839888,1.672 21.0059888,2.951 C21.5319888,3.551 21.8669888,4.178 22.0289888,4.868 C22.1989888,5.592 22.2019888,6.457 22.0359888,7.512 L22.0239888,7.589 L22.0239888,8.265 L22.5499888,8.563 C22.9929888,8.798 23.3449888,9.067 23.6149888,9.375 C24.0649888,9.888 24.3559888,10.54 24.4789888,11.313 C24.6059888,12.108 24.5639888,13.054 24.3559888,14.125 C24.1159888,15.357 23.7279888,16.43 23.2039888,17.308 C22.7219888,18.117 22.1079888,18.788 21.3789888,19.308 C20.6829888,19.802 19.8559888,20.177 18.9209888,20.417 C18.0149888,20.653 16.9819888,20.772 15.8489888,20.772 L15.1189888,20.772 C14.5969888,20.772 14.0899888,20.96 13.6919888,21.297 C13.2929888,21.641 13.0289888,22.111 12.9479888,22.625 L12.8929888,22.924 L11.9689888,28.779 L11.9269888,28.994 C11.9159888,29.062 11.8969888,29.096 11.8689888,29.119 C11.8439888,29.14 11.8079888,29.154 11.7729888,29.154 L7.26598882,29.154 Z" id="Path" fill="#FFFFFF"></path>
+            <path d="M23.0479888,7.667 L23.0479888,7.667 L23.0479888,7.667 C23.0199888,7.846 22.9879888,8.029 22.9519888,8.217 C21.7149888,14.568 17.4829888,16.762 12.0779888,16.762 L9.32598882,16.762 C8.66498882,16.762 8.10798882,17.242 8.00498882,17.894 L8.00498882,17.894 L8.00498882,17.894 L6.59598882,26.83 L6.19698882,29.363 C6.12998882,29.791 6.45998882,30.177 6.89198882,30.177 L11.7729888,30.177 C12.3509888,30.177 12.8419888,29.757 12.9329888,29.187 L12.9809888,28.939 L13.8999888,23.107 L13.9589888,22.787 C14.0489888,22.215 14.5409888,21.795 15.1189888,21.795 L15.8489888,21.795 C20.5779888,21.795 24.2799888,19.875 25.3619888,14.319 C25.8139888,11.998 25.5799888,10.06 24.3839888,8.697 C24.0219888,8.286 23.5729888,7.945 23.0479888,7.667 Z" id="Path" fill="#D9D9D9"></path>
+            <path d="M21.7539888,7.151 C21.5649888,7.096 21.3699888,7.046 21.1699888,7.001 C20.9689888,6.957 20.7629888,6.918 20.5509888,6.884 C19.8089888,6.764 18.9959888,6.707 18.1249888,6.707 L10.7729888,6.707 C10.5919888,6.707 10.4199888,6.748 10.2659888,6.822 C9.92698882,6.985 9.67498882,7.306 9.61398882,7.699 L8.04998882,17.605 L8.00498882,17.894 C8.10798882,17.242 8.66498882,16.762 9.32598882,16.762 L12.0779888,16.762 C17.4829888,16.762 21.7149888,14.567 22.9519888,8.217 C22.9889888,8.029 23.0199888,7.846 23.0479888,7.667 C22.7349888,7.501 22.3959888,7.359 22.0309888,7.238 C21.9409888,7.208 21.8479888,7.179 21.7539888,7.151 Z" id="Path" fill="#EFEFEF"></path>
+            <path d="M9.61398882,7.699 C9.67498882,7.306 9.92698882,6.985 10.2659888,6.823 C10.4209888,6.749 10.5919888,6.708 10.7729888,6.708 L18.1249888,6.708 C18.9959888,6.708 19.8089888,6.765 20.5509888,6.885 C20.7629888,6.919 20.9689888,6.958 21.1699888,7.002 C21.3699888,7.047 21.5649888,7.097 21.7539888,7.152 C21.8479888,7.18 21.9409888,7.209 22.0319888,7.238 C22.3969888,7.359 22.7359888,7.502 23.0489888,7.667 C23.4169888,5.32 23.0459888,3.722 21.7769888,2.275 C20.3779888,0.682 17.8529888,0 14.6219888,0 L5.24198882,0 C4.58198882,0 4.01898882,0.48 3.91698882,1.133 L0.0099888238,25.898 C-0.0670111762,26.388 0.310988824,26.83 0.804988824,26.83 L6.59598882,26.83 L8.04998882,17.605 L9.61398882,7.699 Z" id="Path" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index ac3da90c..89dad01f 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -13,7 +13,7 @@
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=917aab9de16d3eb7039a",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=4bde434e3ed10f3f29b2",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=9bd311cf42f02c0709e8",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=89e6db9790e6f29834c8",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=afeba4ebd13af7e995be",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=6035ca411b2c4239d964",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js?id=75bbb477bf92edb65799",
@@ -67,13 +67,13 @@
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=11a027aca50aa90afb77",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=2eeb31ccee322c06b81c",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=2716127ee2f945a90c0e",
-    "/chunks/settings.js": "/chunks/settings.js?id=aba3e05e61e0b8e5e878",
+    "/chunks/settings.js": "/chunks/settings.js?id=d86481764216bbe5e6b2",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=8beb238f265d1826198b",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=049c3383e310392f966d",
     "/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=53a0c043797fd9a719bb",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=c6582768d097d86a2844",
     "/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",
@@ -106,7 +106,7 @@
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~629342a0.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~629342a0.js?id=cdefaa7800d04dafb07b",
     "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js": "/vendors~chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunk~40ccbae3.js?id=37ce1e1ab9968c100712",
     "/vendors~chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/vendors~chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=a0fa80db175709ba340a",
-    "/vendors~chunks/settings.js": "/vendors~chunks/settings.js?id=0ad6bf4acae70c329adf",
+    "/vendors~chunks/settings.js": "/vendors~chunks/settings.js?id=34174f8e31c6707cdaef",
     "/chunks/settings.3d3ecfe61247db4267d7.hot-update.js": "/chunks/settings.3d3ecfe61247db4267d7.hot-update.js",
     "/chunks/user.44cb1ead006685aa0e46.hot-update.js": "/chunks/user.44cb1ead006685aa0e46.hot-update.js",
     "/js/main.3c904c74f833ee843e54.hot-update.js": "/js/main.3c904c74f833ee843e54.hot-update.js",
@@ -629,5 +629,160 @@
     "/chunks/plan-delete.d73a5950c032edd90159.hot-update.js": "/chunks/plan-delete.d73a5950c032edd90159.hot-update.js",
     "/chunks/plan-create/metered.3eee477efc68c1983af0.hot-update.js": "/chunks/plan-create/metered.3eee477efc68c1983af0.hot-update.js",
     "/chunks/settings-subscription.3eee477efc68c1983af0.hot-update.js": "/chunks/settings-subscription.3eee477efc68c1983af0.hot-update.js",
-    "/chunks/user-subscription.3eee477efc68c1983af0.hot-update.js": "/chunks/user-subscription.3eee477efc68c1983af0.hot-update.js"
+    "/chunks/user-subscription.3eee477efc68c1983af0.hot-update.js": "/chunks/user-subscription.3eee477efc68c1983af0.hot-update.js",
+    "/chunks/settings.079d86fabc0fac4fddbe.hot-update.js": "/chunks/settings.079d86fabc0fac4fddbe.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.205cf7fdb4124205a49f.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.205cf7fdb4124205a49f.hot-update.js",
+    "/chunks/settings.681220191630a5d13356.hot-update.js": "/chunks/settings.681220191630a5d13356.hot-update.js",
+    "/chunks/settings.3e3625a424def6191f22.hot-update.js": "/chunks/settings.3e3625a424def6191f22.hot-update.js",
+    "/chunks/settings.559b052b005738c3e36c.hot-update.js": "/chunks/settings.559b052b005738c3e36c.hot-update.js",
+    "/chunks/settings.b2e75bf4238ee24ebe61.hot-update.js": "/chunks/settings.b2e75bf4238ee24ebe61.hot-update.js",
+    "/chunks/settings.c1e1838d5aee9d176308.hot-update.js": "/chunks/settings.c1e1838d5aee9d176308.hot-update.js",
+    "/chunks/settings.641bcccb397bbaf9261c.hot-update.js": "/chunks/settings.641bcccb397bbaf9261c.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.dee1edc8548cd512ae27.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.dee1edc8548cd512ae27.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d8669e9eab9a6f684963.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.d8669e9eab9a6f684963.hot-update.js",
+    "/chunks/settings.80df11c6767f1c0c99c5.hot-update.js": "/chunks/settings.80df11c6767f1c0c99c5.hot-update.js",
+    "/chunks/settings.7bd7276b646085676738.hot-update.js": "/chunks/settings.7bd7276b646085676738.hot-update.js",
+    "/chunks/settings.1df22672cd4a55a3bb0e.hot-update.js": "/chunks/settings.1df22672cd4a55a3bb0e.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c34e36cbc7571fa85bdb.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.c34e36cbc7571fa85bdb.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.49bfc2b8be30fe398dae.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.49bfc2b8be30fe398dae.hot-update.js",
+    "/chunks/settings.30817436a779ede46e31.hot-update.js": "/chunks/settings.30817436a779ede46e31.hot-update.js",
+    "/chunks/settings.2625498a3e9d917362e5.hot-update.js": "/chunks/settings.2625498a3e9d917362e5.hot-update.js",
+    "/chunks/settings.9c3bcf8a8a1ef1926e02.hot-update.js": "/chunks/settings.9c3bcf8a8a1ef1926e02.hot-update.js",
+    "/chunks/settings.8b255c86639fc6006d3a.hot-update.js": "/chunks/settings.8b255c86639fc6006d3a.hot-update.js",
+    "/chunks/settings.0d8c775bd24efca988a8.hot-update.js": "/chunks/settings.0d8c775bd24efca988a8.hot-update.js",
+    "/chunks/settings.c801fd5f0c9bba03515c.hot-update.js": "/chunks/settings.c801fd5f0c9bba03515c.hot-update.js",
+    "/chunks/settings.cec883ad1abbefc7909f.hot-update.js": "/chunks/settings.cec883ad1abbefc7909f.hot-update.js",
+    "/chunks/settings.14ac80efd9577a49bfdc.hot-update.js": "/chunks/settings.14ac80efd9577a49bfdc.hot-update.js",
+    "/chunks/settings.3b70eb34cee392050796.hot-update.js": "/chunks/settings.3b70eb34cee392050796.hot-update.js",
+    "/chunks/settings.fde18b43c594bd09981d.hot-update.js": "/chunks/settings.fde18b43c594bd09981d.hot-update.js",
+    "/chunks/settings.ef1700092c4816607e99.hot-update.js": "/chunks/settings.ef1700092c4816607e99.hot-update.js",
+    "/chunks/settings.5746c750299d41a4c4a5.hot-update.js": "/chunks/settings.5746c750299d41a4c4a5.hot-update.js",
+    "/chunks/settings.bc0a7316507b1bcd619c.hot-update.js": "/chunks/settings.bc0a7316507b1bcd619c.hot-update.js",
+    "/chunks/settings.1f752e1da2280f31a1c6.hot-update.js": "/chunks/settings.1f752e1da2280f31a1c6.hot-update.js",
+    "/chunks/settings.6a73107c7bbdb7913b46.hot-update.js": "/chunks/settings.6a73107c7bbdb7913b46.hot-update.js",
+    "/chunks/settings.9cfcb8632e84ded7addb.hot-update.js": "/chunks/settings.9cfcb8632e84ded7addb.hot-update.js",
+    "/chunks/settings.e700bd746c8fc82bbaf5.hot-update.js": "/chunks/settings.e700bd746c8fc82bbaf5.hot-update.js",
+    "/chunks/settings.be8336bbe9b9d1ee63a9.hot-update.js": "/chunks/settings.be8336bbe9b9d1ee63a9.hot-update.js",
+    "/chunks/settings.42d69462cde27f6a3268.hot-update.js": "/chunks/settings.42d69462cde27f6a3268.hot-update.js",
+    "/chunks/settings.bbe08c35734e3d96a782.hot-update.js": "/chunks/settings.bbe08c35734e3d96a782.hot-update.js",
+    "/chunks/settings.0d0ecaf93abf8cac2e7c.hot-update.js": "/chunks/settings.0d0ecaf93abf8cac2e7c.hot-update.js",
+    "/chunks/settings.8f0dda528da46dc0edb1.hot-update.js": "/chunks/settings.8f0dda528da46dc0edb1.hot-update.js",
+    "/chunks/settings.795d4ec1d51e8ee38f3e.hot-update.js": "/chunks/settings.795d4ec1d51e8ee38f3e.hot-update.js",
+    "/chunks/settings.8be58b991a89a85cbf69.hot-update.js": "/chunks/settings.8be58b991a89a85cbf69.hot-update.js",
+    "/chunks/settings.37389a9c068b0b07a20e.hot-update.js": "/chunks/settings.37389a9c068b0b07a20e.hot-update.js",
+    "/chunks/settings.6e2ee06ac4fe5e7414d5.hot-update.js": "/chunks/settings.6e2ee06ac4fe5e7414d5.hot-update.js",
+    "/chunks/settings.e12f7adc6a1db7026c2b.hot-update.js": "/chunks/settings.e12f7adc6a1db7026c2b.hot-update.js",
+    "/chunks/settings.1827ce348d2b0e9cc2ca.hot-update.js": "/chunks/settings.1827ce348d2b0e9cc2ca.hot-update.js",
+    "/chunks/settings.6df7684f6b2f5cb264e6.hot-update.js": "/chunks/settings.6df7684f6b2f5cb264e6.hot-update.js",
+    "/chunks/settings.79a5502ca276e691092c.hot-update.js": "/chunks/settings.79a5502ca276e691092c.hot-update.js",
+    "/chunks/settings.927dd42903703851e42f.hot-update.js": "/chunks/settings.927dd42903703851e42f.hot-update.js",
+    "/chunks/settings.1ddfa86636ec1d04b3d4.hot-update.js": "/chunks/settings.1ddfa86636ec1d04b3d4.hot-update.js",
+    "/chunks/settings.2dc1fcb9f6f22b88c1be.hot-update.js": "/chunks/settings.2dc1fcb9f6f22b88c1be.hot-update.js",
+    "/chunks/settings.de9f44259e9f482119ca.hot-update.js": "/chunks/settings.de9f44259e9f482119ca.hot-update.js",
+    "/chunks/settings.a832f5f6aa20554a6d59.hot-update.js": "/chunks/settings.a832f5f6aa20554a6d59.hot-update.js",
+    "/chunks/settings.b1fce071a4f749fb99a3.hot-update.js": "/chunks/settings.b1fce071a4f749fb99a3.hot-update.js",
+    "/chunks/settings.bf3a8a6ca1571daf310e.hot-update.js": "/chunks/settings.bf3a8a6ca1571daf310e.hot-update.js",
+    "/chunks/settings.2638167297d0f99478cb.hot-update.js": "/chunks/settings.2638167297d0f99478cb.hot-update.js",
+    "/chunks/settings.c6f3a76c5afae02b7818.hot-update.js": "/chunks/settings.c6f3a76c5afae02b7818.hot-update.js",
+    "/chunks/settings.57f27967c0e28256a7c9.hot-update.js": "/chunks/settings.57f27967c0e28256a7c9.hot-update.js",
+    "/chunks/settings.82b15af850f71f4492d5.hot-update.js": "/chunks/settings.82b15af850f71f4492d5.hot-update.js",
+    "/chunks/settings.621aa47804e84dc3d31e.hot-update.js": "/chunks/settings.621aa47804e84dc3d31e.hot-update.js",
+    "/chunks/settings.16126714fad00bf565b2.hot-update.js": "/chunks/settings.16126714fad00bf565b2.hot-update.js",
+    "/chunks/settings.f60d7f278648ce35398a.hot-update.js": "/chunks/settings.f60d7f278648ce35398a.hot-update.js",
+    "/chunks/settings.740989157c67c3c55f20.hot-update.js": "/chunks/settings.740989157c67c3c55f20.hot-update.js",
+    "/chunks/settings.bc15c9171e5f44316de9.hot-update.js": "/chunks/settings.bc15c9171e5f44316de9.hot-update.js",
+    "/chunks/settings.3539cfc287da66ebfb92.hot-update.js": "/chunks/settings.3539cfc287da66ebfb92.hot-update.js",
+    "/chunks/settings.cd2993f6329614880a47.hot-update.js": "/chunks/settings.cd2993f6329614880a47.hot-update.js",
+    "/chunks/settings.0f19f1efc83479e72231.hot-update.js": "/chunks/settings.0f19f1efc83479e72231.hot-update.js",
+    "/chunks/settings.4025c6241f14c82a8626.hot-update.js": "/chunks/settings.4025c6241f14c82a8626.hot-update.js",
+    "/chunks/settings.405c31ec317dd6b739f8.hot-update.js": "/chunks/settings.405c31ec317dd6b739f8.hot-update.js",
+    "/chunks/settings.54d966e94ca8ff07944f.hot-update.js": "/chunks/settings.54d966e94ca8ff07944f.hot-update.js",
+    "/chunks/settings.f88890555cfc6a12afea.hot-update.js": "/chunks/settings.f88890555cfc6a12afea.hot-update.js",
+    "/chunks/settings.c619259249fd390991c3.hot-update.js": "/chunks/settings.c619259249fd390991c3.hot-update.js",
+    "/chunks/settings.f90541b4aebcee8227ea.hot-update.js": "/chunks/settings.f90541b4aebcee8227ea.hot-update.js",
+    "/chunks/settings.4d21a9b47acbe450e82b.hot-update.js": "/chunks/settings.4d21a9b47acbe450e82b.hot-update.js",
+    "/chunks/settings.760aab3a3d9e22b91e28.hot-update.js": "/chunks/settings.760aab3a3d9e22b91e28.hot-update.js",
+    "/chunks/settings.2a205e286003d0ed3859.hot-update.js": "/chunks/settings.2a205e286003d0ed3859.hot-update.js",
+    "/chunks/settings.604509cccf005bd936d2.hot-update.js": "/chunks/settings.604509cccf005bd936d2.hot-update.js",
+    "/chunks/settings.cbfecc385c9679c853ba.hot-update.js": "/chunks/settings.cbfecc385c9679c853ba.hot-update.js",
+    "/chunks/settings.acc5b7755c8f32a8f3a5.hot-update.js": "/chunks/settings.acc5b7755c8f32a8f3a5.hot-update.js",
+    "/chunks/settings.bedceb3ff35e06ae5560.hot-update.js": "/chunks/settings.bedceb3ff35e06ae5560.hot-update.js",
+    "/chunks/settings.a41d0ebf455fada00113.hot-update.js": "/chunks/settings.a41d0ebf455fada00113.hot-update.js",
+    "/chunks/settings.f0e8193e0577ca6f1e3c.hot-update.js": "/chunks/settings.f0e8193e0577ca6f1e3c.hot-update.js",
+    "/chunks/settings.d8642123a640d48d02bf.hot-update.js": "/chunks/settings.d8642123a640d48d02bf.hot-update.js",
+    "/chunks/settings.d0d7d38537bce89c090d.hot-update.js": "/chunks/settings.d0d7d38537bce89c090d.hot-update.js",
+    "/chunks/settings.57c42a2efcba4770edd1.hot-update.js": "/chunks/settings.57c42a2efcba4770edd1.hot-update.js",
+    "/chunks/settings.5055d276954cfdd99ccf.hot-update.js": "/chunks/settings.5055d276954cfdd99ccf.hot-update.js",
+    "/chunks/settings.4245fcc500df08610dbb.hot-update.js": "/chunks/settings.4245fcc500df08610dbb.hot-update.js",
+    "/chunks/settings.5ea3e74edf42980bd21d.hot-update.js": "/chunks/settings.5ea3e74edf42980bd21d.hot-update.js",
+    "/vendors~chunks/settings.937d03521c3b05f7473b.hot-update.js": "/vendors~chunks/settings.937d03521c3b05f7473b.hot-update.js",
+    "/chunks/settings.1cd5f42d1c2b9517c880.hot-update.js": "/chunks/settings.1cd5f42d1c2b9517c880.hot-update.js",
+    "/chunks/settings.74d9f03ba3e4a8e633bb.hot-update.js": "/chunks/settings.74d9f03ba3e4a8e633bb.hot-update.js",
+    "/chunks/settings.60cd79d942bc5a0d8638.hot-update.js": "/chunks/settings.60cd79d942bc5a0d8638.hot-update.js",
+    "/chunks/settings.b9820140c33af6c9ed45.hot-update.js": "/chunks/settings.b9820140c33af6c9ed45.hot-update.js",
+    "/chunks/settings.d3444a32e2e9f61c8578.hot-update.js": "/chunks/settings.d3444a32e2e9f61c8578.hot-update.js",
+    "/chunks/settings.fb28d4ff8420aabedbeb.hot-update.js": "/chunks/settings.fb28d4ff8420aabedbeb.hot-update.js",
+    "/chunks/settings.3fee0f82d2efabff015f.hot-update.js": "/chunks/settings.3fee0f82d2efabff015f.hot-update.js",
+    "/chunks/settings.f965dcfa5cd30fe6b946.hot-update.js": "/chunks/settings.f965dcfa5cd30fe6b946.hot-update.js",
+    "/chunks/settings.39d58210f3fcf287a3e0.hot-update.js": "/chunks/settings.39d58210f3fcf287a3e0.hot-update.js",
+    "/chunks/settings.96d8e11687d34777dac6.hot-update.js": "/chunks/settings.96d8e11687d34777dac6.hot-update.js",
+    "/chunks/settings.eee39085ee2b121d054d.hot-update.js": "/chunks/settings.eee39085ee2b121d054d.hot-update.js",
+    "/chunks/settings.4fe0eabd4b1a49c73d5c.hot-update.js": "/chunks/settings.4fe0eabd4b1a49c73d5c.hot-update.js",
+    "/chunks/settings.0c25641e5adeffe9fdfb.hot-update.js": "/chunks/settings.0c25641e5adeffe9fdfb.hot-update.js",
+    "/chunks/settings.b5fa204b8da8c46fe112.hot-update.js": "/chunks/settings.b5fa204b8da8c46fe112.hot-update.js",
+    "/chunks/settings.330a23f2cea419bbf442.hot-update.js": "/chunks/settings.330a23f2cea419bbf442.hot-update.js",
+    "/chunks/settings.2f7d48fc19a001a6ae86.hot-update.js": "/chunks/settings.2f7d48fc19a001a6ae86.hot-update.js",
+    "/chunks/settings.0146ced9a189fd2c9c28.hot-update.js": "/chunks/settings.0146ced9a189fd2c9c28.hot-update.js",
+    "/chunks/settings.411ebe62c8d28d190c53.hot-update.js": "/chunks/settings.411ebe62c8d28d190c53.hot-update.js",
+    "/chunks/settings.d01b28f88a278faf99a3.hot-update.js": "/chunks/settings.d01b28f88a278faf99a3.hot-update.js",
+    "/chunks/settings.64a46223deaacc8c02bb.hot-update.js": "/chunks/settings.64a46223deaacc8c02bb.hot-update.js",
+    "/chunks/settings.ddd9f4773802973946b0.hot-update.js": "/chunks/settings.ddd9f4773802973946b0.hot-update.js",
+    "/chunks/settings.bfb01a232fe3dfb67b15.hot-update.js": "/chunks/settings.bfb01a232fe3dfb67b15.hot-update.js",
+    "/chunks/settings.b1cd0707b70931e9b843.hot-update.js": "/chunks/settings.b1cd0707b70931e9b843.hot-update.js",
+    "/chunks/settings.32fd0b4204d51af937fa.hot-update.js": "/chunks/settings.32fd0b4204d51af937fa.hot-update.js",
+    "/chunks/settings.b74c9050c936836c6eae.hot-update.js": "/chunks/settings.b74c9050c936836c6eae.hot-update.js",
+    "/chunks/settings.beb5bb0d6c9d6665e3e4.hot-update.js": "/chunks/settings.beb5bb0d6c9d6665e3e4.hot-update.js",
+    "/chunks/settings.8168819e8b09ba8c1a82.hot-update.js": "/chunks/settings.8168819e8b09ba8c1a82.hot-update.js",
+    "/chunks/settings.e8e4fdc54c5fe72113ac.hot-update.js": "/chunks/settings.e8e4fdc54c5fe72113ac.hot-update.js",
+    "/chunks/settings.c572e7ff57b8b34f291d.hot-update.js": "/chunks/settings.c572e7ff57b8b34f291d.hot-update.js",
+    "/chunks/settings.977dea9460757c0ab2da.hot-update.js": "/chunks/settings.977dea9460757c0ab2da.hot-update.js",
+    "/chunks/settings.2f759642dcdf59e85c67.hot-update.js": "/chunks/settings.2f759642dcdf59e85c67.hot-update.js",
+    "/chunks/settings.d4d85c5fd2eec64cea9e.hot-update.js": "/chunks/settings.d4d85c5fd2eec64cea9e.hot-update.js",
+    "/chunks/settings.a1e2e80313f5a8035664.hot-update.js": "/chunks/settings.a1e2e80313f5a8035664.hot-update.js",
+    "/chunks/settings-subscription.c9241c0958bf3e7d957a.hot-update.js": "/chunks/settings-subscription.c9241c0958bf3e7d957a.hot-update.js",
+    "/chunks/settings-subscription.a2efd60c54b5995e8319.hot-update.js": "/chunks/settings-subscription.a2efd60c54b5995e8319.hot-update.js",
+    "/chunks/settings-subscription.01133dc490e77ac0088a.hot-update.js": "/chunks/settings-subscription.01133dc490e77ac0088a.hot-update.js",
+    "/chunks/settings-subscription.cf71408c96c93aaf57a9.hot-update.js": "/chunks/settings-subscription.cf71408c96c93aaf57a9.hot-update.js",
+    "/chunks/settings-subscription.f1211ee83bd20b252bc3.hot-update.js": "/chunks/settings-subscription.f1211ee83bd20b252bc3.hot-update.js",
+    "/chunks/settings-subscription.a4436ee1028bbe8c9df4.hot-update.js": "/chunks/settings-subscription.a4436ee1028bbe8c9df4.hot-update.js",
+    "/chunks/settings-subscription.2c903bc69307895eafb0.hot-update.js": "/chunks/settings-subscription.2c903bc69307895eafb0.hot-update.js",
+    "/chunks/settings-subscription.60a594ad6f8bab5bb6fc.hot-update.js": "/chunks/settings-subscription.60a594ad6f8bab5bb6fc.hot-update.js",
+    "/chunks/settings-subscription.860da35db74980e522b2.hot-update.js": "/chunks/settings-subscription.860da35db74980e522b2.hot-update.js",
+    "/js/main.f1c38f903b0817375f44.hot-update.js": "/js/main.f1c38f903b0817375f44.hot-update.js",
+    "/js/main.4e4f8653c085f8fd3684.hot-update.js": "/js/main.4e4f8653c085f8fd3684.hot-update.js",
+    "/js/main.e002dcafe3d4027cdbab.hot-update.js": "/js/main.e002dcafe3d4027cdbab.hot-update.js",
+    "/js/main.406a03ba01775e95984a.hot-update.js": "/js/main.406a03ba01775e95984a.hot-update.js",
+    "/chunks/settings.406a03ba01775e95984a.hot-update.js": "/chunks/settings.406a03ba01775e95984a.hot-update.js",
+    "/chunks/settings.7bc9ba5b43074f634fe7.hot-update.js": "/chunks/settings.7bc9ba5b43074f634fe7.hot-update.js",
+    "/js/main.d4163ea3aa5938701c64.hot-update.js": "/js/main.d4163ea3aa5938701c64.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e3921b6730c4a5dfe86b.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.e3921b6730c4a5dfe86b.hot-update.js",
+    "/chunks/settings-subscription.a64a3157d85bd82c92ee.hot-update.js": "/chunks/settings-subscription.a64a3157d85bd82c92ee.hot-update.js",
+    "/chunks/settings-subscription.7e1f596c2d0569c05c7f.hot-update.js": "/chunks/settings-subscription.7e1f596c2d0569c05c7f.hot-update.js",
+    "/chunks/settings-subscription.513db9ef759ee0c03990.hot-update.js": "/chunks/settings-subscription.513db9ef759ee0c03990.hot-update.js",
+    "/chunks/settings.a88963dd1bf29cd43fc7.hot-update.js": "/chunks/settings.a88963dd1bf29cd43fc7.hot-update.js",
+    "/chunks/settings.dd610977eb7030f16703.hot-update.js": "/chunks/settings.dd610977eb7030f16703.hot-update.js",
+    "/chunks/settings.7593849d474bf2bcc071.hot-update.js": "/chunks/settings.7593849d474bf2bcc071.hot-update.js",
+    "/chunks/settings.e6292c978f0bd00067d5.hot-update.js": "/chunks/settings.e6292c978f0bd00067d5.hot-update.js",
+    "/chunks/settings.07dc32d925c4d3a04dae.hot-update.js": "/chunks/settings.07dc32d925c4d3a04dae.hot-update.js",
+    "/chunks/settings.985ed54dfb6a55118a0d.hot-update.js": "/chunks/settings.985ed54dfb6a55118a0d.hot-update.js",
+    "/chunks/settings.310e8fcbd1c710e0750f.hot-update.js": "/chunks/settings.310e8fcbd1c710e0750f.hot-update.js",
+    "/chunks/settings.78c50d01704c4273314e.hot-update.js": "/chunks/settings.78c50d01704c4273314e.hot-update.js",
+    "/js/main.8b8e9495e40e262fce67.hot-update.js": "/js/main.8b8e9495e40e262fce67.hot-update.js",
+    "/chunks/settings.830bbd994f3db9ca6a17.hot-update.js": "/chunks/settings.830bbd994f3db9ca6a17.hot-update.js",
+    "/chunks/settings.4233646507e4a40b0201.hot-update.js": "/chunks/settings.4233646507e4a40b0201.hot-update.js",
+    "/chunks/settings.abc1746c8c1a0820a42b.hot-update.js": "/chunks/settings.abc1746c8c1a0820a42b.hot-update.js",
+    "/chunks/settings.940fa13b809fa3c16e21.hot-update.js": "/chunks/settings.940fa13b809fa3c16e21.hot-update.js",
+    "/chunks/settings.32597a7de88b206ea095.hot-update.js": "/chunks/settings.32597a7de88b206ea095.hot-update.js",
+    "/chunks/settings.c6818ac2d38140e3ab3e.hot-update.js": "/chunks/settings.c6818ac2d38140e3ab3e.hot-update.js",
+    "/js/main.f08698fc4f6fd309d44f.hot-update.js": "/js/main.f08698fc4f6fd309d44f.hot-update.js"
 }
diff --git a/resources/js/components/Others/PaymentMethod.vue b/resources/js/components/Others/PaymentMethod.vue
new file mode 100644
index 00000000..8d467d76
--- /dev/null
+++ b/resources/js/components/Others/PaymentMethod.vue
@@ -0,0 +1,22 @@
+<template>
+	<div class="flex items-center justify-between py-4 border-b dark:border-opacity-5 border-light border-dashed">
+		<div>
+			<img :src="$getPaymentLogo(driver)" :alt="driver" class="h-6">
+			<small class="text-xs text-gray-500 pt-2 leading-4 block">
+				{{ description }}
+			</small>
+		</div>
+		<div v-if="$slots.default" class="bg-theme-200 inline-block px-3 py-1 rounded-lg">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name: 'PaymentMethod',
+	props: [
+		'description',
+		'driver',
+	]
+}
+</script>
diff --git a/resources/js/components/Others/Popup/PopupHeader.vue b/resources/js/components/Others/Popup/PopupHeader.vue
index a3c33212..ce4bca64 100644
--- a/resources/js/components/Others/Popup/PopupHeader.vue
+++ b/resources/js/components/Others/Popup/PopupHeader.vue
@@ -7,6 +7,7 @@
             <key-icon v-if="icon === 'key'" size="17" class="title-icon text-theme dark-text-theme" />
             <users-icon v-if="icon === 'users'" size="17" class="title-icon text-theme dark-text-theme" />
             <user-plus-icon v-if="icon === 'user-plus'" size="17" class="title-icon text-theme dark-text-theme" />
+            <credit-card-icon v-if="icon === 'credit-card'" size="17" class="title-icon text-theme dark-text-theme" />
         </div>
         <div class="label">
             <h1 class="title">{{ title }}</h1>
@@ -16,7 +17,7 @@
 </template>
 
 <script>
-    import {KeyIcon, UserPlusIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon, UsersIcon} from 'vue-feather-icons'
+    import {CreditCardIcon, KeyIcon, UserPlusIcon, CornerDownRightIcon, LinkIcon, XIcon, Edit2Icon, ShareIcon, UsersIcon} from 'vue-feather-icons'
     import {events} from '/resources/js/bus'
 
     export default {
@@ -26,6 +27,7 @@
         ],
         components: {
             CornerDownRightIcon,
+			CreditCardIcon,
 			UserPlusIcon,
 			UsersIcon,
             ShareIcon,
diff --git a/resources/js/components/Others/Popup/PopupWrapper.vue b/resources/js/components/Others/Popup/PopupWrapper.vue
index a9c485bd..d20b10b0 100644
--- a/resources/js/components/Others/Popup/PopupWrapper.vue
+++ b/resources/js/components/Others/Popup/PopupWrapper.vue
@@ -51,8 +51,6 @@
 
             // Close popup
             events.$on('popup:close', () => this.isVisibleWrapper = false)
-
-			//todo: if (this.name === 'create-team-folder') this.isVisibleWrapper = true
         }
     }
 </script>
diff --git a/resources/js/components/Others/SelectSingleChargeMethodPopup.vue b/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
new file mode 100644
index 00000000..ebf62010
--- /dev/null
+++ b/resources/js/components/Others/SelectSingleChargeMethodPopup.vue
@@ -0,0 +1,178 @@
+<template>
+    <PopupWrapper name="select-payment-method">
+        <PopupHeader :title="$t('Select Payment Method')" icon="credit-card" />
+
+        <PopupContent style="padding: 0 20px">
+
+			<!--PayPal implementation-->
+			<div :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
+				<PaymentMethod
+					@click.native="pickedPaymentMethod('paypal')"
+					driver="paypal"
+					:description="$t('Available PayPal Credit, Debit or Credit Card.')"
+				>
+					<span v-if="! paypalMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
+						{{ $t('Select') }}
+					</span>
+				</PaymentMethod>
+
+				<!--PayPal Buttons-->
+				<div v-if="paypalMethodsLoaded">
+					<div id="paypal-button-container"></div>
+				</div>
+			</div>
+
+			<!--Paystack implementation-->
+			<PaymentMethod
+				driver="paystack"
+				:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
+			>
+				<paystack
+					@click.native="pickedPaymentMethod('paystack')"
+					v-if="user && config"
+					:channels="['card', 'bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
+					class="font-bold"
+					currency="ZAR"
+					:amount="singleChargeAmount * 100"
+					:email="user.data.attributes.email"
+					:paystackkey="config.paystack_public_key"
+					:reference="reference"
+					:callback="paystackPaymentSuccessful"
+					:close="paystackClosed"
+				>
+					<span class="text-sm text-theme font-bold cursor-pointer">
+						{{ $t('Select') }}
+					</span>
+				 </paystack>
+			</PaymentMethod>
+        </PopupContent>
+
+        <PopupActions>
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>
+                {{ $t('Cancel Payment') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
+import PopupActions from '/resources/js/components/Others/Popup/PopupActions'
+import PopupContent from '/resources/js/components/Others/Popup/PopupContent'
+import PopupHeader from '/resources/js/components/Others/Popup/PopupHeader'
+import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+import { loadScript } from "@paypal/paypal-js"
+import PaymentMethod from "./PaymentMethod"
+import {events} from '/resources/js/bus'
+import paystack from 'vue-paystack'
+import {mapGetters} from "vuex"
+
+export default {
+	name: "SelectSingleChargeMethodPopup",
+	components: {
+		PaymentMethod,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		paystack,
+	},
+	data() {
+		return {
+			paypalMethodsLoaded: false,
+		}
+	},
+	computed: {
+		...mapGetters([
+			'singleChargeAmount',
+			'config',
+			'user',
+		]),
+		reference() {
+			let text = "";
+			let possible =
+				"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+			for (let i = 0; i < 10; i++)
+				text += possible.charAt(Math.floor(Math.random() * possible.length));
+
+			return text;
+		},
+	},
+	methods: {
+		pickedPaymentMethod(driver) {
+			if (driver === 'paystack') {
+				this.$closePopup()
+			}
+			if (driver === 'paypal' && !this.paypalMethodsLoaded) {
+				this.PayPalInitialization()
+			}
+		},
+		async PayPalInitialization() {
+			this.paypalMethodsLoaded = true
+
+			let paypal;
+
+			try {
+				paypal = await loadScript({
+					'client-id': this.config.paypal_client_id,
+					'vault': true,
+				});
+			} catch (error) {
+				events.$emit('toaster', {
+					type: 'danger',
+					message: this.$t('Failed to load the PayPal service'),
+				})
+			}
+
+			const userId = this.user.data.id
+			const amount = this.singleChargeAmount
+
+			// Initialize paypal buttons for single charge
+			await paypal.Buttons({
+				createOrder: function(data, actions) {
+					return actions.order.create({
+						purchase_units: [{
+							amount: {
+								value: amount,
+							},
+							custom_id: userId
+						}]
+					});
+				}
+			}).render('#paypal-button-container');
+		},
+		paystackPaymentSuccessful() {
+			this.$closePopup()
+
+			events.$emit('toaster', {
+				type: 'success',
+				message: this.$t('Your payment was successfully received.'),
+			})
+		},
+		paystackClosed() {
+			// ...
+		}
+	},
+	created() {
+		events.$on('popup:close', () => this.paypalMethodsLoaded = false)
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+    @import '/resources/sass/vuefilemanager/_variables';
+	@import '/resources/sass/vuefilemanager/_mixins';
+
+	.mobile-actions {
+		white-space: nowrap;
+		overflow-x: auto;
+		margin: 0 -20px;
+		padding: 10px 0 10px 20px;
+	}
+</style>
diff --git a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
index 5b61d20e..8fa3c5ed 100644
--- a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
+++ b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
@@ -188,7 +188,7 @@
 					});
 				} catch (error) {
 					events.$emit('toaster', {
-						type: 'error',
+						type: 'danger',
 						message: this.$t('failed to load the PayPal components'),
 					})
 				}
@@ -210,7 +210,7 @@
 					}
 				}).render('#paypal-button-container');*/
 
-				// Initialize paypal buttons for subscription
+				// Initialize paypal buttons for single charge
 				await paypal.Buttons({
 					createOrder: function(data, actions) {
 						return actions.order.create({
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 7c58c980..18798425 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -326,7 +326,7 @@ const FunctionHelpers = {
 
         Vue.prototype.$getPaymentLogo = function (driver) {
             return {
-                'paypal': '/assets/payments/paypal.svg',
+                'paypal': store.getters.isDarkMode ? '/assets/payments/paypal-dark.svg' : '/assets/payments/paypal.svg',
                 'paystack': store.getters.isDarkMode ? '/assets/payments/paystack-dark.svg' : '/assets/payments/paystack.svg',
                 'stripe': '/assets/payments/stripe.svg',
                 'system': this.$getImage(store.getters.config.app_logo_horizontal),
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 21f9994a..acb26669 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -3,6 +3,7 @@ import Vue from 'vue'
 
 import fileFunctions from './modules/fileFunctions'
 import fileBrowser from './modules/fileBrowser'
+import payments from './modules/payments'
 import userAuth from './modules/userAuth'
 import sharing from './modules/sharing'
 import teams from './modules/teams'
@@ -14,6 +15,7 @@ export default new Vuex.Store({
     modules: {
         fileFunctions,
         fileBrowser,
+        payments,
         userAuth,
         sharing,
         teams,
diff --git a/resources/js/store/modules/payments.js b/resources/js/store/modules/payments.js
new file mode 100644
index 00000000..e11697e8
--- /dev/null
+++ b/resources/js/store/modules/payments.js
@@ -0,0 +1,33 @@
+import {events} from "../../bus";
+
+const defaultState = {
+	singleChargeAmount: undefined,
+}
+
+const actions = {
+	callSingleChargeProcess: ({commit}, amount) => {
+
+		// Open popup with payment methods
+		events.$emit('popup:open', {name: 'select-payment-method'})
+
+		// Store charge amount
+		commit('SET_SINGLE_CHARGE_AMOUNT', amount)
+	},
+}
+
+const mutations = {
+	SET_SINGLE_CHARGE_AMOUNT(state, amount) {
+		state.singleChargeAmount = amount
+	}
+}
+
+const getters = {
+	singleChargeAmount: state => state.singleChargeAmount,
+}
+
+export default {
+	state: defaultState,
+	getters,
+	actions,
+	mutations
+}
\ No newline at end of file
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 15a12e13..3b9423a3 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -14,6 +14,9 @@
 		<!--Access Token Popup-->
 		<CreatePersonaTokenPopup />
 
+		<!--Payments Popup-->
+		<SelectSingleChargeMethodPopup />
+
 		<SidebarNavigation />
 
         <div v-if="user" class="px-6 w-full overflow-x-hidden relative pt-6 xl:max-w-screen-lg md:max-w-screen-md mx-auto">
@@ -77,6 +80,7 @@
 </template>
 
 <script>
+	import SelectSingleChargeMethodPopup from "../components/Others/SelectSingleChargeMethodPopup";
 	import ButtonBase from "../components/FilesView/ButtonBase";
 	import SelectPlanSubscriptionPopup from "../components/Subscription/SelectPlanSubscriptionPopup";
 	import ConfirmPopup from "../components/Others/Popup/ConfirmPopup";
@@ -91,10 +95,12 @@
 	import Spinner from '/resources/js/components/FilesView/Spinner'
 	import {mapGetters} from 'vuex'
 	import CardNavigation from "../components/Admin/CardNavigation";
+	import {events} from "../bus";
 
 	export default {
         name: 'Settings',
         components: {
+			SelectSingleChargeMethodPopup,
 			SelectPlanSubscriptionPopup,
 			ButtonBase,
 			ConfirmPopup,
diff --git a/resources/js/views/User/MeteredSubscription.vue b/resources/js/views/User/MeteredSubscription.vue
index bb3a63f7..d6d10acf 100644
--- a/resources/js/views/User/MeteredSubscription.vue
+++ b/resources/js/views/User/MeteredSubscription.vue
@@ -11,11 +11,11 @@
 				{{ user.data.relationships.balance.data.attributes.formatted }}
 			</b>
 
-			<ValidationObserver ref="changeStorageCapacity" @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">
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
 					<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
-						<div class="flex space-x-4">
-							<input v-model="paymentAmount"
+						<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
+							<input v-model="chargeAmount"
 								   :placeholder="$t('Fund Your Account Balance...')"
 								   type="number"
 								   min="1"
@@ -23,7 +23,7 @@
 								   class="focus-border-theme input-dark"
 								   :class="{'border-red-700': errors[0]}"
 							/>
-							<ButtonBase type="submit" button-style="theme" class="submit-button">
+							<ButtonBase type="submit" button-style="theme" class="sm:w-auto w-full">
 								{{ $t('Make a Payment') }}
 							</ButtonBase>
 						</div>
@@ -52,7 +52,7 @@
 						<b class="text-sm font-bold leading-none">
 							{{ $t(usage.feature) }}
 						</b>
-						<small class="text-xs text-gray-500 pt-2 leading-none block">
+						<small class="text-xs text-gray-500 pt-2 leading-none sm:block hidden">
 							{{ $t(`feature_usage_desc_${usage.feature}`) }}
 						</small>
 					</div>
@@ -91,7 +91,7 @@
 			<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
                 <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
 					<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
-						<div class="flex space-x-4">
+						<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
 							<input v-model="billingAlertAmount"
 								   :placeholder="$t('Alert Amount...')"
 								   type="number"
@@ -100,7 +100,7 @@
 								   class="focus-border-theme input-dark"
 								   :class="{'border-red-700': errors[0]}"
 							/>
-							<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
+							<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
 								{{ $t('Update Alert') }}
 							</ButtonBase>
 						</div>
@@ -231,7 +231,7 @@
 				billingAlertAmount: undefined,
 				showUpdateBillingAlertForm: false,
 
-				paymentAmount: undefined,
+				chargeAmount: undefined,
 				columns: [
 					{
 						label: this.$t('Note'),
@@ -336,8 +336,14 @@
 					}
 				})
 			},
-			makePayment() {
-				// TODO: make a payment
+			async makePayment() {
+				// Validate fields
+				const isValid = await this.$refs.fundAccount.validate();
+
+				if (!isValid) return;
+
+				// Show payment methods popup
+				this.$store.dispatch('callSingleChargeProcess', this.chargeAmount)
 			},
 		},
 		created() {
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
index 7106ec42..27f757dc 100644
--- a/resources/views/vuefilemanager/others/color-template.blade.php
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -28,6 +28,7 @@
         .bg-theme {background: {{ $color }}}
         .bg-theme-50 {background: {{ $color }}05}
         .bg-theme-100 {background: {{ $color }}10}
+        .bg-theme-200 {background: {{ $color }}20}
         .bg-theme-800 {background: {{ $color }}80}
         .hover-bg-theme:hover {background: {{ $color }}}
         .hover-bg-theme-100:hover {background: {{ $color }}10 !important;}