diff --git a/app/Http/Resources/Oasis/SubscriptionRequestResource.php b/app/Http/Resources/Oasis/SubscriptionRequestResource.php
index 1ff3fa97..9bd5f195 100644
--- a/app/Http/Resources/Oasis/SubscriptionRequestResource.php
+++ b/app/Http/Resources/Oasis/SubscriptionRequestResource.php
@@ -3,6 +3,7 @@
 namespace App\Http\Resources\Oasis;
 
 use App\Http\Resources\PlanResource;
+use App\Http\Resources\PricingResource;
 use App\Services\StripeService;
 use Illuminate\Http\Resources\Json\JsonResource;
 use Illuminate\Support\Facades\Cache;
@@ -42,7 +43,7 @@ class SubscriptionRequestResource extends JsonResource
                             ]
                         ]
                     ],
-                    'plan' => new PlanResource(
+                    'plan' => new PricingResource(
                         resolve(StripeService::class)->getPlan($this->requested_plan)
                     ),
                 ]
diff --git a/app/Http/Resources/PricingResource.php b/app/Http/Resources/PricingResource.php
index 35a7b296..f28d0f7a 100644
--- a/app/Http/Resources/PricingResource.php
+++ b/app/Http/Resources/PricingResource.php
@@ -2,6 +2,7 @@
 
 namespace App\Http\Resources;
 
+use App\Services\StripeService;
 use Illuminate\Http\Resources\Json\JsonResource;
 use Laravel\Cashier\Cashier;
 
@@ -26,43 +27,9 @@ class PricingResource extends JsonResource
                     'capacity_formatted' => format_gigabytes($this['product']['metadata']['capacity']),
                     'capacity'           => (int)$this['product']['metadata']['capacity'],
                     'currency'           => config('cashier.currency'),
-                    'tax_rates'          => $this->get_tax_rates(),
+                    'tax_rates'          => resolve(StripeService::class)->get_tax_rates($this['plan']['amount'])
                 ]
             ]
         ];
     }
-
-    /**
-     * Get plan tax rates
-     *
-     * @return array
-     */
-    private function get_tax_rates(): array
-    {
-        $stripe = resolve('App\Services\StripeService');
-
-        $rates_public = [];
-
-        // Get tax rates
-        $rates = $stripe->getTaxRates();
-
-        foreach ($rates as $rate) {
-
-            // Continue when is not active
-            if (!$rate['active']) continue;
-
-            // Calculate tax
-            $tax = $this['plan']['amount'] * ($rate['percentage'] / 100);
-
-            array_push($rates_public, [
-                'id'                   => $rate['id'],
-                'active'               => $rate['active'],
-                'jurisdiction'         => $rate['jurisdiction'],
-                'percentage'           => $rate['percentage'],
-                'plan_price_formatted' => Cashier::formatAmount(round($this['plan']['amount'] + $tax)),
-            ]);
-        }
-
-        return $rates_public;
-    }
-}
+}
\ No newline at end of file
diff --git a/app/Services/StripeService.php b/app/Services/StripeService.php
index 38ed899c..f7b25de4 100644
--- a/app/Services/StripeService.php
+++ b/app/Services/StripeService.php
@@ -7,6 +7,7 @@ use App\Models\User;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Str;
+use Laravel\Cashier\Cashier;
 use Laravel\Cashier\Exceptions\IncompletePayment;
 use Laravel\Cashier\Exceptions\PaymentActionRequired;
 use Stripe;
@@ -49,6 +50,36 @@ class StripeService
             ->all()['data'];
     }
 
+    /**
+     * Get plan tax rates
+     *
+     * @param $amount
+     * @return array
+     */
+    public function get_tax_rates($amount): array
+    {
+        $rates_public = [];
+
+        foreach ($this->getTaxRates() as $rate) {
+
+            // Continue when is not active
+            if (!$rate['active']) continue;
+
+            // Calculate tax
+            $tax = $amount * ($rate['percentage'] / 100);
+
+            array_push($rates_public, [
+                'id'                   => $rate['id'],
+                'active'               => $rate['active'],
+                'jurisdiction'         => $rate['jurisdiction'],
+                'percentage'           => $rate['percentage'],
+                'plan_price_formatted' => Cashier::formatAmount(round($amount + $tax)),
+            ]);
+        }
+
+        return $rates_public;
+    }
+
     /**
      * Get default payment option or set new default payment
      *
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 54a62c9b..332b8da0 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,7 +2,7 @@
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
     "/chunks/admin.js": "/chunks/admin.js?id=7875b08fc6fb75a7ad1f",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=c9330616aa6a16b45288",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=b1d2758e439eb303f5ee",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~9fa266bc.js?id=81dea7680f4bfde55278",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=62b552a0492fe95b2223",
     "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~a001bb84.js?id=0cad8279d29d79cd0e82",
@@ -19,17 +19,17 @@
     "/chunks/app-payments.js": "/chunks/app-payments.js?id=4184e5c489f4fe09f2ab",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=1441a53c88fa164f4e1c",
     "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=e71bb0286189734a8aec",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=bb25421b4c61d039765f",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=15ab9d58ca7eeb26ed0e",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=e643bae8573b88e6437c",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=e71c7c69b1132cf6b243",
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=14e8c1c3784fce3b5a22",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=5814ff43ba7c67297af1",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=f3c8bc62f62ae537f93c",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=9809887401e27ef5826e",
     "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.js?id=1c22034c0e30c4530f3d",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=859a6f034ca5697aaf60",
-    "/chunks/database.js": "/chunks/database.js?id=58addbf30b3b2f7c36db",
+    "/chunks/database.js": "/chunks/database.js?id=22b6513c494a3d5714d9",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6dccc2158cc6278f683d",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=81005c48fec83ab4ca45",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=123776e4ad431b2af406",
     "/chunks/files.js": "/chunks/files.js?id=40b4464ce393cb112111",
     "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=c2c86f2168e863fbd49e",
     "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=885dd88f0e8d5c499a48",
@@ -40,7 +40,7 @@
     "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=b2a355bb27f40ee0e386",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=a00dedfec5aeabac394c",
     "/chunks/homepage.js": "/chunks/homepage.js?id=14154b40ea69f91fef31",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=4f937c33675bb39bc682",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=7543bc0ebd67a282779a",
     "/chunks/invoices.js": "/chunks/invoices.js?id=98c2b0d4a83f4e0cc6d9",
     "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=7fc7f9b6f10bdfac770e",
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=234551fa36d21e29606e",
@@ -55,7 +55,7 @@
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=82814a863a150db0cc7e",
     "/chunks/profile.js": "/chunks/profile.js?id=0f82cbd818967273cbd8",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=9202f2cff7c80a561718",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b9ae98e83f8df690d09f",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=01dafc8397bda91a47f5",
     "/chunks/settings.js": "/chunks/settings.js?id=713564bcdbe44aa66df1",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=9c088cb1b14836d13648",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=c765f8563393c27bc6a6",
@@ -71,9 +71,9 @@
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=e8aedb75df7fe227d693",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=92a1de80f254cfc9ac91",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=50e81d184a05d3990d89",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=98e8a206373b361e6138",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=7cb7c0cb6ef388cd016e",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=bcea699b0d9d0ee61565",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6eb1bdf3942d7b2dd06f",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=8048188a201c41f248c6",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=90c1aa9431689a89eb3d",
     "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=830456726847f435144e",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=2b555924c945cbcd23f5",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=9c61721d5e30ef544377",
@@ -171,5 +171,37 @@
     "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.cec600408276af5260fe.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.cec600408276af5260fe.hot-update.js",
     "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.dbdbf80723e41e072d01.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.dbdbf80723e41e072d01.hot-update.js",
     "/chunks/users.2b4b9dbd972d7a9d7c83.hot-update.js": "/chunks/users.2b4b9dbd972d7a9d7c83.hot-update.js",
-    "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js"
+    "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~0bfeabca.d4f9806caf6c6d5f1344.hot-update.js",
+    "/js/main.55cf4e9bc02bec922581.hot-update.js": "/js/main.55cf4e9bc02bec922581.hot-update.js",
+    "/js/main.b52ecb4afdc47584e38f.hot-update.js": "/js/main.b52ecb4afdc47584e38f.hot-update.js",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~74bf0fcb.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~74bf0fcb.js?id=6b6737a58e371fc4434b",
+    "/chunks/oasis/platba.js": "/chunks/oasis/platba.js?id=41fec8f562bfc988aa95",
+    "/chunks/oasis/platba~chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/oasis/platba~chunks/upgrade-billing~chunks/upgrade-plan.js?id=4781f8460c7f0f8b21a5",
+    "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~0a9c5e33.js": "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~0a9c5e33.js?id=b28978d3c8aae9b949a5",
+    "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~8394cf85.js": "/vendors~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-i~8394cf85.js?id=d25da0762af813ea588c",
+    "/chunks/oasis/platba.f2d7a060bf88fd2d9403.hot-update.js": "/chunks/oasis/platba.f2d7a060bf88fd2d9403.hot-update.js",
+    "/chunks/oasis/platba.79f86d9923a5b3d8f77b.hot-update.js": "/chunks/oasis/platba.79f86d9923a5b3d8f77b.hot-update.js",
+    "/chunks/oasis/platba.960030e55311860adad8.hot-update.js": "/chunks/oasis/platba.960030e55311860adad8.hot-update.js",
+    "/js/main.b089e299b2beda8c4435.hot-update.js": "/js/main.b089e299b2beda8c4435.hot-update.js",
+    "/chunks/oasis/platba.0975d1f12bf7fcd32825.hot-update.js": "/chunks/oasis/platba.0975d1f12bf7fcd32825.hot-update.js",
+    "/chunks/oasis/platba.b1513de9a1f782c9fcf9.hot-update.js": "/chunks/oasis/platba.b1513de9a1f782c9fcf9.hot-update.js",
+    "/chunks/oasis/platba.6101685137fe4c159b2f.hot-update.js": "/chunks/oasis/platba.6101685137fe4c159b2f.hot-update.js",
+    "/js/main.4e81e4ea624ef84cb166.hot-update.js": "/js/main.4e81e4ea624ef84cb166.hot-update.js",
+    "/chunks/oasis/platba.4e81e4ea624ef84cb166.hot-update.js": "/chunks/oasis/platba.4e81e4ea624ef84cb166.hot-update.js",
+    "/js/main.9d41d45200d1397f7d1f.hot-update.js": "/js/main.9d41d45200d1397f7d1f.hot-update.js",
+    "/chunks/oasis/platba.9d41d45200d1397f7d1f.hot-update.js": "/chunks/oasis/platba.9d41d45200d1397f7d1f.hot-update.js",
+    "/chunks/oasis/platba.7295a36fd456e216edb5.hot-update.js": "/chunks/oasis/platba.7295a36fd456e216edb5.hot-update.js",
+    "/chunks/oasis/platba.42cfd9642e72806e1d73.hot-update.js": "/chunks/oasis/platba.42cfd9642e72806e1d73.hot-update.js",
+    "/chunks/oasis/platba.eb85a1eef45f79ca4c3e.hot-update.js": "/chunks/oasis/platba.eb85a1eef45f79ca4c3e.hot-update.js",
+    "/chunks/admin-account.9b07cca19b41d1b68e00.hot-update.js": "/chunks/admin-account.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/app-setup.9b07cca19b41d1b68e00.hot-update.js": "/chunks/app-setup.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/billings-detail.9b07cca19b41d1b68e00.hot-update.js": "/chunks/billings-detail.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/database.9b07cca19b41d1b68e00.hot-update.js": "/chunks/database.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/environment-setup.9b07cca19b41d1b68e00.hot-update.js": "/chunks/environment-setup.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/installation-disclaimer.9b07cca19b41d1b68e00.hot-update.js": "/chunks/installation-disclaimer.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/purchase-code.9b07cca19b41d1b68e00.hot-update.js": "/chunks/purchase-code.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/stripe-credentials.9b07cca19b41d1b68e00.hot-update.js": "/chunks/stripe-credentials.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/subscription-plans.9b07cca19b41d1b68e00.hot-update.js": "/chunks/subscription-plans.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/subscription-service.9b07cca19b41d1b68e00.hot-update.js": "/chunks/subscription-service.9b07cca19b41d1b68e00.hot-update.js",
+    "/chunks/oasis/platba.cba2f2943cb866639e8c.hot-update.js": "/chunks/oasis/platba.cba2f2943cb866639e8c.hot-update.js"
 }
diff --git a/resources/js/Oasis/Pages/SubscriptionRequestPayment.vue b/resources/js/Oasis/Pages/SubscriptionRequestPayment.vue
new file mode 100644
index 00000000..9dd3b988
--- /dev/null
+++ b/resources/js/Oasis/Pages/SubscriptionRequestPayment.vue
@@ -0,0 +1,676 @@
+<template>
+    <div id="single-page">
+        <div v-show="! isLoading" id="page-content" class="large-width center-page">
+
+            <div class="content-page">
+                <div class="plan-title">
+                    <credit-card-icon size="42" class="title-icon text-theme" />
+                    <h1>{{ $t('page_upgrade_account.title') }}</h1>
+                    <h2>{{ $t('page_upgrade_account.desription') }}</h2>
+                </div>
+
+                <div class="order">
+
+                    <div class="steps">
+                        <div class="payment-card">
+                            <FormLabel>{{ $t('page_upgrade_account.section_card') }}</FormLabel>
+
+                            <!-- Pay by new credit card -->
+                            <div class="register-card" v-show="! defaultPaymentMethod || payByNewCard">
+                                <InfoBox v-if="config.isDemo">
+                                    <p>For test your payment please use <b>4242 4242 4242 4242</b> or <b>5555 5555 5555 4444</b> as a card number, <b>11/22</b>
+                                        as the expiration date and <b>123</b> as CVC number and ZIP <b>12345</b>.</p>
+                                </InfoBox>
+
+                                <div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }"></div>
+
+                                <div class="card-error-message" v-if="isError">
+                                    <span>{{ errorMessage }}</span>
+                                </div>
+                            </div>
+
+                            <!--User registered payment card-->
+                            <div class="registered-cards" v-if="defaultPaymentMethod && ! payByNewCard">
+
+                                <div class="credit-card" :class="{'is-error': isError}">
+                                    <div class="card-number">
+                                        <img class="credit-card-icon"
+                                             :src="$getCreditCardBrand(defaultPaymentMethod.data.attributes.brand)"
+                                             :alt="defaultPaymentMethod.data.attributes.brand">
+                                        <div class="credit-card-numbers">
+                                            •••• {{ defaultPaymentMethod.data.attributes.last4 }}
+                                        </div>
+                                        <ColorLabel color="purple">{{ $t('global.default') }}</ColorLabel>
+                                    </div>
+                                    <div class="expiration-date">
+                                        <span>{{ defaultPaymentMethod.data.attributes.exp_month }} / {{ defaultPaymentMethod.data.attributes.exp_year }}</span>
+                                    </div>
+                                </div>
+
+                                <!--Change payment-->
+                                <div class="change-payment" v-if="! isError">
+                                    <span>
+                                        {{ $t('page_upgrade_account.change_payment.you_can') }}
+                                    </span>
+
+                                    <router-link v-if="PaymentMethods.data.length > 0" :to="{name: 'PaymentMethods'}">
+                                        {{ $t('page_upgrade_account.change_payment.change_payment') }}
+                                    </router-link>
+
+                                    <span v-if="PaymentMethods.data.length > 0">
+                                        {{ $t('global.or') }}
+                                    </span>
+
+                                    <a @click="payByNewCardForm">
+                                        {{ $t('page_upgrade_account.change_payment.pay_by_new_card') }}
+                                    </a>
+                                </div>
+
+                                <!--Card error-->
+                                <div class="card-error-message" v-if="isError">
+                                    <span>{{ errorMessage }}</span>
+                                    <span @click="payByNewCardForm" class="link">
+                                        {{ $t('page_upgrade_account.errors.pay_by_another_card') }}
+                                    </span>
+                                    <span>
+                                        {{ $t('global.or') }}
+                                    </span>
+                                    <router-link :to="{name: 'PaymentMethods'}" class="link">
+                                        {{ $t('page_upgrade_account.change_payment.change_payment') }}
+                                    </router-link>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="summary">
+                        <FormLabel>
+                            {{ $t('page_upgrade_account.section_summary') }}
+                        </FormLabel>
+
+                        <div class="summary-list" :class="{'is-error': isError}" v-if="requestedPlan">
+                            <div class="row">
+                                <div class="cell">
+                                    <b>{{ requestedPlan.data.relationships.plan.data.attributes.name }}</b>
+                                    <small>{{ $t('page_upgrade_account.summary.period') }}</small>
+                                </div>
+                                <div class="cell">
+                                    <b>{{ requestedPlan.data.relationships.plan.data.attributes.price }}</b>
+                                </div>
+                            </div>
+                            <div class="row" v-if="taxRates">
+                                <div class="cell">
+                                    <b>{{ $t('page_upgrade_account.summary.vat') }} - ({{ taxRates.jurisdiction }} {{ taxRates.percentage }}%)</b>
+                                </div>
+                                <div class="cell">
+                                    <b>{{ taxRates.plan_price_formatted }}</b>
+                                </div>
+                            </div>
+
+                            <!--Show total when tax rates is not specified-->
+                            <div class="row" v-if="! taxRates">
+                                <div class="cell">
+                                    <b>{{ $t('global.total') }}</b>
+                                </div>
+                                <div class="cell">
+                                    <b>{{ requestedPlan.data.relationships.plan.data.attributes.price }}</b>
+                                </div>
+                            </div>
+
+                            <!--Show total when is tax rates-->
+                            <div class="row" v-if="taxRates">
+                                <div class="cell">
+                                    <b>{{ $t('page_upgrade_account.summary.total_with_vat') }}</b>
+                                </div>
+                                <div class="cell">
+                                    <b>{{ taxRates.plan_price_formatted }}</b>
+                                </div>
+                            </div>
+
+                            <ButtonBase :disabled="isSubmitted" :loading="isSubmitted" @click.native="submitOrder"
+                                        type="submit" button-style="theme-solid" class="next-submit">
+                                {{ $t('page_upgrade_account.summary.submit_button') }}
+                            </ButtonBase>
+                            <p class="error-message" v-if="isError">{{ errorMessage }}</p>
+                            <small class="disclaimer">
+                                {{ $t('page_upgrade_account.summary.submit_disclaimer', {app: config.app_name}) }}
+                            </small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="loader" v-if="isLoading">
+            <Spinner></Spinner>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import PlanPricingTables from '@/components/Others/PlanPricingTables'
+    import SelectInput from '@/components/Others/Forms/SelectInput'
+    import FormLabel from '@/components/Others/Forms/FormLabel'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import InfoBox from '@/components/Others/Forms/InfoBox'
+    import ColorLabel from '@/components/Others/ColorLabel'
+    import PageHeader from '@/components/Others/PageHeader'
+    import Spinner from '@/components/FilesView/Spinner'
+    import {CreditCardIcon} from 'vue-feather-icons'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import {events} from "@/bus"
+    import axios from 'axios'
+
+    let [stripe, card] = [undefined, undefined];
+
+    export default {
+        name: 'SubscriptionRequestPayment',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            PlanPricingTables,
+            CreditCardIcon,
+            MobileHeader,
+            SelectInput,
+            ButtonBase,
+            PageHeader,
+            ColorLabel,
+            FormLabel,
+            required,
+            Spinner,
+            InfoBox,
+        },
+        computed: {
+            ...mapGetters(['config', 'countries']),
+            taxRates() {
+                return this.requestedPlan.data.relationships.plan.data.attributes.tax_rates.find(taxRate => {
+                    return taxRate.jurisdiction === this.requestedPlan.data.relationships.user.data.attributes.country
+                })
+            }
+        },
+        data() {
+            return {
+                complete: false,
+                stripeOptions: {
+                    hidePostalCode: false
+                },
+                isLoading: true,
+                isSubmitted: false,
+                PaymentMethods: undefined,
+                defaultPaymentMethod: undefined,
+
+                errorMessage: undefined,
+                isError: false,
+
+                payByNewCard: false,
+
+                clientSecret: undefined,
+
+                requestedPlan: undefined
+            }
+        },
+        methods: {
+            initStripe() {
+                stripe = Stripe(this.config.stripe_public_key)
+
+                let elements = stripe.elements();
+
+                card = elements.create('card');
+
+                card.mount(this.$refs.stripeCard);
+            },
+            payByNewCardForm() {
+                this.payByNewCard = true
+                this.isError = false
+            },
+            successOrder() {
+                // Update user data
+                this.$store.dispatch('getAppData')
+
+                // Show toaster
+                events.$emit('toaster', {
+                    type: 'success',
+                    message: this.$t('toaster.account_upgraded'),
+                })
+
+                // Go to User page
+                this.$router.push({name: 'Subscription'})
+            },
+            errorOrder(error) {
+
+                // Redirect user to confirmation payment page
+                if (error.response.status === 402) {
+                    window.location.href = error.response.data.message;
+                }
+
+                // Show user error message
+                if (error.response.status === 400) {
+                    this.isError = true
+                    this.errorMessage = error.response.data.message
+                }
+
+                // Show server error
+                if (error.response.status === 500) {
+                    this.isError = true
+                    this.errorMessage = error.response.data.message
+
+                    events.$emit('alert:open', {
+                        title: this.$t('popup_error.title'),
+                        message: this.$t('popup_error.message'),
+                    })
+                }
+            },
+            async submitOrder() {
+
+                // Validate fields
+                const isValid = await this.$refs.order.validate();
+
+                if (!isValid) return;
+
+                // Remove error
+                this.isError = false
+
+                // Start loading
+                this.isSubmitted = true
+
+                // If user don't have credit card, register new
+                if (!this.defaultPaymentMethod || this.payByNewCard) {
+
+                    const {setupIntent, error} = await stripe.confirmCardSetup(this.clientSecret, {
+                        payment_method: {
+                            card: card,
+                        }
+                    })
+
+                    if (error) {
+
+                        // Set error on
+                        this.isError = true
+
+                        // End button spinner
+                        this.isSubmitted = false
+
+                        // Show error message
+                        this.errorMessage = error.message
+
+                    } else {
+
+                        axios
+                            .post('/api/subscription/upgrade', {
+                                billing: this.billing,
+                                plan: this.requestedPlan,
+                                payment: {
+                                    type: 'stripe',
+                                    meta: {
+                                        pm: setupIntent.payment_method,
+                                    }
+                                }
+                            })
+                            .then(() => this.successOrder())
+                            .catch((error) => this.errorOrder(error))
+                            .finally(() => {
+                                this.isSubmitted = false
+                            })
+                    }
+                }
+
+                // if user has credit card
+                if (this.defaultPaymentMethod && !this.payByNewCard) {
+
+                    axios
+                        .post('/api/subscription/upgrade', {
+                            billing: this.billing,
+                            plan: this.requestedPlan,
+                            payment: {
+                                type: 'stripe',
+                            }
+                        })
+                        .then(() => this.successOrder())
+                        .catch((error) => this.errorOrder(error))
+                        .finally(() => {
+                            this.isSubmitted = false
+                        })
+                }
+            },
+        },
+        mounted: function () {
+            this.initStripe()
+        },
+        created() {
+
+            // Get setup intent for stripe
+            axios.get('/api/subscription/setup-intent')
+                .then(response => {
+                    this.clientSecret = response.data.client_secret
+                })
+                .catch(() => this.$isSomethingWrong())
+
+            axios.get(`/api/oasis/subscription-request/${this.$route.params.id}`)
+                .then(response => {
+                    this.requestedPlan = response.data
+                })
+                .catch(() => {
+                    this.$isSomethingWrong()
+                })
+                .finally(() => {
+                        this.isLoading = false
+                    }
+                )
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vuefilemanager/_variables';
+    @import '@assets/vuefilemanager/_mixins';
+    @import '@assets/vuefilemanager/_forms';
+
+    .change-payment {
+        padding-top: 10px;
+
+        span {
+            font-weight: 600;
+        }
+
+        a {
+            cursor: pointer;
+            font-weight: 700;
+
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
+        span, a {
+            color: $text-muted;
+            @include font-size(14);
+        }
+    }
+
+    .card-error-message {
+        padding-top: 10px;
+
+        span, a {
+            @include font-size(14);
+            font-weight: 600;
+            color: $danger;
+        }
+
+        .link, a {
+            text-decoration: underline;
+            cursor: pointer;
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+    .registered-cards {
+        margin-bottom: 50px;
+    }
+
+    .register-card {
+        margin-bottom: 55px;
+    }
+
+    .credit-card {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 15px;
+        background: $light_background;
+        border-radius: 8px;
+        margin-top: 20px;
+
+        &.is-error {
+            box-shadow: 0 0 7px rgba($danger, 0.3);
+            border: 2px solid $danger;
+            border-radius: 4px;
+        }
+
+        span {
+            font-weight: 700;
+        }
+
+        .card-number {
+            display: flex;
+        }
+
+        .credit-card-numbers {
+            vertical-align: middle;
+            margin-right: 10px;
+        }
+
+        .credit-card-icon {
+            vertical-align: middle;
+            max-height: 20px;
+            margin-right: 8px;
+        }
+    }
+
+    .stripe-card {
+        box-sizing: border-box;
+        padding: 13px 20px;
+
+        border: 1px solid transparent;
+        border-radius: 4px;
+        background-color: white;
+
+        box-shadow: 0 1px 3px 0 #e6ebf1;
+        -webkit-transition: box-shadow 150ms ease;
+        transition: box-shadow 150ms ease;
+
+        &.is-error {
+            box-shadow: 0 0 7px rgba($danger, 0.3);
+            border: 2px solid $danger;
+            border-radius: 4px;
+        }
+
+        &.StripeElement--focus {
+            box-shadow: 0 1px 3px 0 #cfd7df;
+        }
+
+        &.StripeElement--invalid {
+            border-color: #fa755a;
+        }
+
+        &.StripeElement--webkit-autofill {
+            background-color: #fefde5 !important;
+        }
+
+        iframe .InputContainer .InputElement {
+            color: white;
+        }
+    }
+
+    .summary-list {
+        box-shadow: 0 7px 20px 5px hsla(220, 36%, 16%, 0.06);
+        border-radius: 8px;
+        position: sticky;
+        padding: 25px;
+        top: 30px;
+
+        &.is-error {
+            border: 2px solid $danger;
+            box-shadow: 0 7px 20px 5px rgba($danger, 0.06);
+        }
+
+        .error-message {
+            font-weight: 600;
+        }
+
+        .next-submit {
+            width: 100%;
+            margin-top: 20px;
+        }
+
+        .disclaimer {
+            @include font-size(12);
+            line-height: 1.6;
+            display: block;
+            margin-top: 12px;
+        }
+
+        .row {
+            display: flex;
+            justify-content: space-between;
+            padding: 15px 0;
+
+            &:first-child {
+                padding-top: 0;
+            }
+
+            &:last-of-type {
+                border-top: 1px solid $light_mode_border;
+                padding-bottom: 0;
+
+                b {
+                    font-weight: 800;
+                }
+            }
+        }
+
+        .cell {
+            b {
+                display: block;
+                @include font-size(18);
+            }
+
+            small {
+                color: $text-muted;
+                @include font-size(12);
+            }
+        }
+    }
+
+    .order {
+        display: flex;
+        margin-bottom: 30px;
+
+        .steps {
+            flex: 0 0 65%;
+            padding-right: 30px;
+
+            .form {
+                max-width: 100%;
+            }
+        }
+
+        .summary {
+            flex: 0 0 34%;
+        }
+    }
+
+    .plan-title {
+        text-align: center;
+        max-width: 600px;
+        margin: 0 auto 80px;
+
+        path, line, polyline, rect, circle {
+            color: $theme;
+        }
+
+        h1 {
+            @include font-size(38);
+            font-weight: 800;
+            margin-bottom: 5px;
+        }
+
+        h2 {
+            @include font-size(20);
+            font-weight: 500;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .plan-title {
+
+            h1 {
+                color: $dark_mode_text_primary;
+            }
+
+            h2 {
+                color: $dark_mode_text_secondary;
+            }
+        }
+
+        .credit-card {
+            background: $dark_mode_foreground;
+
+            span, .credit-card-numbers {
+                color: $dark_mode_text_primary;
+            }
+        }
+
+        .change-payment {
+
+            span {
+                color: $dark_mode_text_secondary;
+            }
+
+            a {
+                color: $theme;
+            }
+        }
+
+        .summary-list {
+            background: $dark_mode_foreground;
+
+            .disclaimer {
+                color: $dark_mode_text_secondary;
+            }
+
+            .row {
+
+                &:last-of-type {
+                    border-top: 1px solid $dark_mode_border_color;
+
+                    b {
+                        color: $dark_mode_text_primary;
+                    }
+                }
+            }
+
+            .cell {
+                b {
+                    color: $dark_mode_text_primary;
+                }
+
+                small {
+                    color: $dark_mode_text_secondary;
+                }
+            }
+        }
+
+        .stripe-card {
+            border: 1px solid transparent;
+            //background-color: $dark_mode_foreground;
+            box-shadow: none;
+
+            &.StripeElement--webkit-autofill {
+                background-color: $dark_mode_foreground !important;
+            }
+
+            &.StripeElement--focus {
+                box-shadow: none;
+                border-color: $theme;
+                box-shadow: 0 1px 5px rgba($theme, 0.3);
+            }
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+        .order {
+            display: block;
+
+            .steps {
+                margin-bottom: 70px;
+            }
+        }
+    }
+
+</style>
diff --git a/resources/js/router.js b/resources/js/router.js
index b642c012..0c575d6e 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -9,6 +9,16 @@ import UserProfileMobileMenu from './views/Mobile/UserProfileMobileMenu'
 Vue.use(Router)
 
 const routesOasis = [
+    {
+        name: 'SubscriptionRequestPayment',
+        path: '/platba/:id',
+        component: () =>
+            import(/* webpackChunkName: "chunks/oasis/platba" */ './Oasis/Pages/SubscriptionRequestPayment'),
+        meta: {
+            requiresAuth: true,
+            title: 'Platba'
+        },
+    },
     {
         name: 'Admin',
         path: '/admin',
diff --git a/resources/sass/vuefilemanager/_setup_wizard.scss b/resources/sass/vuefilemanager/_setup_wizard.scss
index 397c4755..3790a54c 100644
--- a/resources/sass/vuefilemanager/_setup_wizard.scss
+++ b/resources/sass/vuefilemanager/_setup_wizard.scss
@@ -73,7 +73,7 @@
   animation: spinner 5s linear infinite;
 
   circle, path {
-    stroke: $theme;
+    color: inherit;
   }
 }