Make public website use payment-type instead of id

apps/public-web/src/EShopOnAbp.PublicWeb/Components/Payment/Default.cshtml

@@ -35,7 +35,7 @@
                 {
                     string isSelectedClass = paymentType.IsDefault ? "is-selected" : "";
                     <abp-column size="_2">
-                        <abp-card class="@isSelectedClass" data-payment-id="@paymentType.Id">
+                        <abp-card class="@isSelectedClass" data-payment-type="@paymentType.Type">
                             <abp-card-body>
                                 <p class="card-title payment-type-header" style="text-align: center">
                                     @paymentType.Name

apps/public-web/src/EShopOnAbp.PublicWeb/EShopOnAbpPaymentConsts.cs

@@ -3,7 +3,7 @@
     public static class EShopOnAbpPaymentConsts
     {
         public const string Currency = "USD";
-        public const string PaymentIdCookie = "selected_payment_id"; // Setted in payment-widget.js
+        public const string PaymentTypeCookie = "selected_payment_type"; // Setted in payment-widget.js
 
         public static class DemoAddressTypes
         {

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/Payment.cshtml.cs

@@ -46,7 +46,7 @@ public class PaymentModel : AbpPageModel
     {
         Logger.LogInformation("Payment Proceeded...");
         Logger.LogInformation($"AddressId: {model.SelectedAddressId}");
-        Logger.LogInformation($"PaymentId: {model.SelectedPaymentId}");
+        Logger.LogInformation($"PaymentType: {model.SelectedPaymentType}");
         Logger.LogInformation($"Total Discount: {model.TotalDiscountPercentage}");
 
         var basket = await _userBasketProvider.GetBasketAsync();
@@ -59,7 +59,6 @@ public class PaymentModel : AbpPageModel
 
         var placedOrder = await _orderAppService.CreateAsync(new OrderCreateDto()
         {
-            PaymentTypeId = model.SelectedPaymentId,
             Address = GetUserAddress(model.SelectedAddressId),
             Products = productItems
         });
@@ -73,13 +72,14 @@ public class PaymentModel : AbpPageModel
             Products = ObjectMapper.Map<List<BasketItemDto>, List<PaymentRequestProductCreationDto>>(basket.Items)
         });
 
-        var response = await _paymentRequestAppService.StartAsync(new PaymentRequestStartDto
-        {
-            PaymentTypeId = model.SelectedPaymentId,
-            PaymentRequestId = paymentRequest.Id,
-            ReturnUrl = _publicWebPaymentOptions.PaymentSuccessfulCallbackUrl,
-            CancelUrl = _publicWebPaymentOptions.PaymentFailureCallbackUrl
-        });
+        var response = await _paymentRequestAppService.StartAsync(
+            model.SelectedPaymentType,
+            new PaymentRequestStartDto
+            {
+                PaymentRequestId = paymentRequest.Id,
+                ReturnUrl = _publicWebPaymentOptions.PaymentSuccessfulCallbackUrl,
+                CancelUrl = _publicWebPaymentOptions.PaymentFailureCallbackUrl
+            });
 
         return Redirect(response.CheckoutLink);
     }
@@ -87,7 +87,7 @@ public class PaymentModel : AbpPageModel
     public class PaymentPageViewModel
     {
         public int SelectedAddressId { get; set; }
-        public int SelectedPaymentId { get; set; }
+        public string SelectedPaymentType { get; set; }
         public decimal TotalDiscountPercentage { get; set; }
     }
 

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/PaymentCompleted.cshtml.cs

@@ -1,6 +1,7 @@
 using EShopOnAbp.PaymentService.PaymentRequests;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using System;
 using System.Threading.Tasks;
 using Volo.Abp.AspNetCore.Mvc.UI.RazorPages;
 
@@ -24,23 +25,24 @@ public class PaymentCompletedModel : AbpPageModel
 
     public async Task<IActionResult> OnGetAsync()
     {
-        int selectedPaymentId = 0;
-        if (HttpContext.Request.Cookies.TryGetValue(EShopOnAbpPaymentConsts.PaymentIdCookie,
-                out var selectedPaymentIdString))
+        if (!HttpContext.Request.Cookies.TryGetValue(EShopOnAbpPaymentConsts.PaymentTypeCookie,
+                out var selectedPaymentType))
         {
-            selectedPaymentId = string.IsNullOrEmpty(selectedPaymentIdString) ? 0 : int.Parse(selectedPaymentIdString);
+            throw new InvalidOperationException("A payment type must be selected!");
         }
 
         PaymentRequest = await _paymentRequestAppService.CompleteAsync(
-            new PaymentRequestCompleteInputDto() {Token = Token, PaymentTypeId = selectedPaymentId});
+            // TODO: Use string name
+            selectedPaymentType,
+            new PaymentRequestCompleteInputDto() { Token = Token });
 
         IsSuccessful = PaymentRequest.State == PaymentRequestState.Completed;
-        
+
         if (IsSuccessful)
         {
             // Remove cookie so that can be set again when default payment type is set
-            HttpContext.Response.Cookies.Delete(EShopOnAbpPaymentConsts.PaymentIdCookie);
-            return RedirectToPage("OrderReceived", new {orderNo = PaymentRequest.OrderNo});
+            HttpContext.Response.Cookies.Delete(EShopOnAbpPaymentConsts.PaymentTypeCookie);
+            return RedirectToPage("OrderReceived", new { orderNo = PaymentRequest.OrderNo });
         }
 
         return Page();

apps/public-web/src/EShopOnAbp.PublicWeb/Pages/payment.js

@@ -9,8 +9,8 @@
         form.appendChild(addressInput);
 
         let paymentInput = document.createElement('input');
-        paymentInput.setAttribute('name', "model.SelectedPaymentId");
-        paymentInput.setAttribute('value', document.querySelector(".payment-list .card.is-selected").getAttribute("data-payment-id"));
+        paymentInput.setAttribute('name', "model.SelectedPaymentType");
+        paymentInput.setAttribute('value', document.querySelector(".payment-list .card.is-selected").getAttribute("data-payment-type"));
         paymentInput.setAttribute('type', "hidden");
         form.appendChild(paymentInput);
     };

apps/public-web/src/EShopOnAbp.PublicWeb/ServiceProviders/PaymentTypeProvider.cs

@@ -9,15 +9,15 @@ public class PaymentTypeProvider : ITransientDependency
     {
         return new List<PaymentType>
         {
-            new() {Id = 0, Name = "Demo", IconCss = "fa-credit-card demo", IsDefault = true},
-            new() {Id = 1, Name = "Paypal", IconCss = "fa-cc-paypal paypal"}
+            new() { Type = "demo", Name = "Demo", IconCss = "fa-credit-card demo", IsDefault = true},
+            new() { Type = "paypal", Name = "Paypal", IconCss = "fa-cc-paypal paypal"}
         };
     }
 }
 
 public class PaymentType
 {
-    public int Id { get; set; }
+    public string Type { get; set; }
     public string Name { get; set; }
     public string IconCss { get; set; }
     public bool IsDefault { get; set; } = false;

apps/public-web/src/EShopOnAbp.PublicWeb/wwwroot/components/payment/payment-widget.js

@@ -1,7 +1,7 @@
 (function () {
     // Write selected payment type to cookie anyways
-    const paymentTypeId = $(".payment-list").find(".is-selected").attr('data-payment-id');
-    abp.utils.setCookieValue("selected_payment_id", paymentTypeId);
+    const paymentType = $(".payment-list").find(".is-selected").attr('data-payment-type');
+    abp.utils.setCookieValue("selected_payment_type", paymentType);
 
     abp.widgets.PaymentWidget = function ($wrapper) {
         var widgetManager = $wrapper.data('abp-widget-manager');
@@ -19,8 +19,8 @@
                 .find('.payment-list .card')
                 .click(el => {
                     const $this = $(el.currentTarget);
-                    const paymentTypeId = $this.attr('data-payment-id');
-                    abp.utils.setCookieValue("selected_payment_id", paymentTypeId);
+                    const paymentTypeId = $this.attr('data-payment-type');
+                    abp.utils.setCookieValue("selected_payment_type", paymentTypeId);
                     $this.parents(".payment-list").find('.card').removeClass("is-selected");
                     $this.addClass("is-selected");
                 });