diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/Default.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/Default.cshtml
new file mode 100644
index 00000000..776f58c5
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/Default.cshtml
@@ -0,0 +1,6 @@
+@using EShopOnAbp.Localization
+@using Microsoft.Extensions.Localization
+@inject IStringLocalizer<EShopOnAbpResource> L
+
+<div>
+</div>
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetScriptContributor.cs b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetScriptContributor.cs
new file mode 100644
index 00000000..851ac11e
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetScriptContributor.cs
@@ -0,0 +1,15 @@
+using System.Collections.Generic;
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+using Volo.Abp.AspNetCore.Mvc.UI.Packages.SignalR;
+using Volo.Abp.Modularity;
+
+namespace EShopOnAbp.PublicWeb.Components.Payment;
+
+[DependsOn(typeof(SignalRBrowserScriptContributor))]
+public class PaymentWidgetScriptContributor : BundleContributor
+{
+    public override void ConfigureBundle(BundleConfigurationContext context)
+    {
+        context.Files.AddIfNotContains("/components/payment/payment-widget.js");
+    }
+}
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetStyleContributor.cs b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetStyleContributor.cs
new file mode 100644
index 00000000..361e2bb5
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetStyleContributor.cs
@@ -0,0 +1,7 @@
+using Volo.Abp.AspNetCore.Mvc.UI.Bundling;
+
+namespace EShopOnAbp.PublicWeb.Components.Payment;
+
+public class PaymentWidgetStyleContributor: BundleContributor
+{
+}
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetViewComponent.cs b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetViewComponent.cs
new file mode 100644
index 00000000..c190f823
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/PaymentWidgetViewComponent.cs
@@ -0,0 +1,20 @@
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc;
+using Volo.Abp.AspNetCore.Mvc.UI.Widgets;
+
+namespace EShopOnAbp.PublicWeb.Components.Payment;
+
+[Widget(
+    AutoInitialize = true,
+    RefreshUrl = "/Widgets/Payment",
+    StyleTypes = new[] {typeof(PaymentWidgetStyleContributor)},
+    ScriptTypes = new[] {typeof(PaymentWidgetScriptContributor)}
+)]
+public class PaymentWidgetViewComponent: AbpViewComponent
+{
+    public async Task<IViewComponentResult> InvokeAsync()
+    {
+        return await Task.FromResult(View("~/Components/Payment/Default.cshtml"));
+    }
+}
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml
index 942cde10..546afcda 100644
--- a/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml
@@ -1,10 +1,14 @@
 @page
-
 @using EShopOnAbp.Localization
+@using EShopOnAbp.PublicWeb.Components.Payment
 @using Microsoft.Extensions.Localization
 @model EShopOnAbp.PublicWeb.Pages.PaymentModel
+
 @inject IStringLocalizer<EShopOnAbpResource> L
 
 <div class="row">
     <h3 class="pt-5 pb-4 text-center">@L["Payment"]</h3>
+    <div id="PaymentArea">
+        @await Component.InvokeAsync(typeof(PaymentWidgetViewComponent))
+    </div>
 </div>
\ No newline at end of file
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.css b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.css
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.js b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.js
new file mode 100644
index 00000000..95a5d939
--- /dev/null
+++ b/apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.js
@@ -0,0 +1,3 @@
+(function () {
+    
+})();
\ No newline at end of file