Checkout functionality, including PayPal payment portal.

ShopOnline.Web/Pages/Checkout.razor

@@ -0,0 +1,68 @@
+@page "/Checkout"
+@inherits CheckoutBase
+
+<h3>Checkout</h3>
+
+    @if (ShoppingCartItems.Count() == 0)
+    {
+        <h4 class="text-warning">You currently have no items in your shopping cart.</h4>
+    }
+    else
+    {
+        <div class="mb-5">
+            <div class="row">
+                <div class="col-md-6">
+                    <h4 class="mb-2">Payment Method</h4>
+                    <div id="smart-button-container">
+                        <input type="hidden" name="descriptionInput" id="description" @bind="PaymentDescription" />
+                        <input name="amountInput" type="hidden" id="amount" @bind="PaymentAmount" />
+                        <div style="text-align: center; margin-top: 0.625rem;" id="paypal-button-container"></div>
+                    </div>
+                </div>
+                @if (ShoppingCartItems == null)
+                {
+                    <div class="row d-flex justify-content-center">
+                        <div class="col-md-1">
+                            <DisplayCustomSpinner />
+                        </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="col-md-6">
+                        <h4 class="mb-2">Payment Summary</h4>
+                        @if (ShoppingCartItems.Count() > 0)
+                        {
+                            <table class="table">
+                                <thead>
+                                    <tr>
+                                        <th>Product</th>
+                                        <th>Price</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    @foreach (var item in ShoppingCartItems)
+                                    {
+                                        <tr>
+                                            <td>@item.Quantity x @item.ProductName</td>
+                                            <td>@item.TotalPrice.ToString("C")</td>
+                                        </tr>
+                                    }
+                                    <tr>
+                                        <td><b>Total</b></td>
+                                        <td><b>@PaymentAmount.ToString("C")</b></td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        }
+                        else
+                        {
+                            <p class="text-warning">You currently have no items in your shopping cart.</p>
+                        }
+                    </div>
+                }
+            </div>
+        </div>
+    }
+
+

ShopOnline.Web/Pages/CheckoutBase.cs

@@ -0,0 +1,63 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using ShopOnline.Models.Dtos;
+using ShopOnline.Web.Services.Contracts;
+
+namespace ShopOnline.Web.Pages
+{
+    public class CheckoutBase:ComponentBase
+    {
+        [Inject]
+        public IJSRuntime Js { get; set; }
+
+        protected IEnumerable<CartItemDto> ShoppingCartItems { get; set; }
+
+        protected int TotalQuantity { get; set; }
+
+        protected string PaymentDescription { get; set; }
+
+        protected decimal PaymentAmount { get; set; }
+
+        [Inject]
+        public IShoppingCartService ShoppingCartService { get; set; }
+
+        protected override async Task OnInitializedAsync()
+        {
+            try
+            {
+                ShoppingCartItems = await ShoppingCartService.GetItems(HardCoded.UserId);
+
+                if(ShoppingCartItems != null)
+                {
+                    Guid orderGuid = Guid.NewGuid();
+
+                    PaymentAmount = ShoppingCartItems.Sum(p => p.TotalPrice);
+                    TotalQuantity = ShoppingCartItems.Sum(p => p.Quantity);
+                    PaymentDescription = $"O_{HardCoded.UserId}_{orderGuid}";
+                }
+            }
+            catch (Exception)
+            {
+
+                throw;
+            }
+        }
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            try
+            {
+                if(firstRender)
+                {
+                    Console.WriteLine("HIT");
+                    await Js.InvokeVoidAsync("initPayPalButton");
+                }
+            }
+            catch (Exception)
+            {
+
+                throw;
+            }
+        }
+    }
+}

ShopOnline.Web/Pages/ShoppingCart.razor

@@ -42,7 +42,7 @@ else {
             <h5>Cart Summary</h5>
             <div class="mt-2">
                 <div>Total - (@TotalQuantity items)&nbsp; <b>@TotalPrice</b></div>
-                <a href="#" class="btn btn-success">
+                <a href="Checkout" class="btn btn-success">
                     <span class="oi oi-credit-card"></span>&nbsp; Proceed to Checkout
                 </a>
             </div>

ShopOnline.Web/wwwroot/index.html

@@ -22,6 +22,64 @@
     <script src="js/ShoppingCartFunctions.js"></script>
     <script src="https://kit.fontawesome.com/fd1b12afc1.js" crossorigin="anonymous"></script>
     <script src="_framework/blazor.webassembly.js"></script>
+
+    <!-- Paypal Below -->
+
+    <script src="https://www.paypal.com/sdk/js?client-id=ARuSdR5rsG6Ulu4ly4QP5LoUtJVX-9wGD_4c_eZHWfR2xCynai_iUZN_MnfpUZaDIXTbaqbJRlUI_-Kc&currency=USD" data-sdk-integration-source="button-factory"></script>
+    <script>
+        function initPayPalButton() {
+            var description = document.querySelector('#smart-button-container #description');
+            var amount = document.querySelector('#smart-button-container #amount');
+
+            var purchase_units = [];
+            purchase_units[0] = {};
+            purchase_units[0].amount = {};
+
+            paypal.Buttons({
+                style: {
+                    color: 'gold',
+                    shape: 'rect',
+                    label: 'paypal',
+                    layout: 'vertical',
+
+                },
+
+
+               
+
+                createOrder: function (data, actions) {
+                    purchase_units[0].description = description.value;
+                    purchase_units[0].amount.value = amount.value;
+
+                    return actions.order.create({
+                        purchase_units: purchase_units,
+                    });
+                },
+
+                onApprove: function (data, actions) {
+                    return actions.order.capture().then(function (orderData) {
+
+                        // Full available details
+                        console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
+
+                        // Show a success message within this page, e.g.
+                        const element = document.getElementById('paypal-button-container');
+                        element.innerHTML = '';
+                        element.innerHTML = '<h3>Thank you for your payment!</h3>';
+
+                        // Or go to another URL:  actions.redirect('thank_you.html');
+
+                    });
+                },
+
+                onError: function (err) {
+                    console.log(err);
+                }
+            }).render('#paypal-button-container');
+        }
+        
+    </script>
+
 </body>
 
 </html>