bump

Modal cart, remove items, checkout

Fix removal and adding of cart items

Improve cart UI

Add cart bundle, remove unused js files from the view when cart isn't used

Do not enable cart by default

Do not put modal into the view when the cart is disabled

Escape js properties

Work with amounts as cents

Make animation speed look constant

Enable tips in the cart

Fix cart UI

BTCPayServer.Tests/UnitTest1.cs

@@ -43,6 +43,7 @@ using System.Security.Cryptography.X509Certificates;
 using BTCPayServer.Lightning;
 using BTCPayServer.Models.WalletViewModels;
 using System.Security.Claims;
+using BTCPayServer.Models.InvoicingModels;
 using BTCPayServer.Models.ServerViewModels;
 using BTCPayServer.Security;
 using NBXplorer.Models;
@@ -79,7 +80,7 @@ namespace BTCPayServer.Tests
             Assert.False(attribute.IsValid("http://"));
             Assert.False(attribute.IsValid("httpdsadsa.com"));
         }
-
+        
         [Fact]
         [Trait("Fast", "Fast")]
         public void CanCalculateCryptoDue2()
@@ -1462,6 +1463,7 @@ namespace BTCPayServer.Tests
                 vmpos.Currency = "CAD";
                 vmpos.ButtonText = "{0} Purchase";
                 vmpos.CustomButtonText = "Nicolas Sexy Hair";
+                vmpos.CustomTipText = "Wanna tip?";
                 vmpos.Template = @"
 apple:
   price: 5.0
@@ -1486,6 +1488,7 @@ donation:
                 Assert.Equal("$5.00", vmview.Items[0].Price.Formatted);
                 Assert.Equal("{0} Purchase", vmview.ButtonText);
                 Assert.Equal("Nicolas Sexy Hair", vmview.CustomButtonText);
+                Assert.Equal("Wanna tip?", vmview.CustomTipText);
                 Assert.IsType<RedirectToActionResult>(publicApps.ViewPointOfSale(appId, 0, null, null, null, null, "orange").Result);
 
                 //
@@ -1505,6 +1508,81 @@ donation:
                 Assert.Equal("donation", donationInvoice.ItemDesc);
             }
         }
+        
+        [Fact]
+        [Trait("Fast", "Fast")]
+        public void PosDataParser_ParsesCorrectly()
+        {
+            var testCases =
+                new List<(string input, Dictionary<string, string> expectedOutput)>()
+                {
+                    { (null, new Dictionary<string, string>())},
+                    {("", new Dictionary<string, string>())},
+                    {("{}", new Dictionary<string, string>())},
+                    {("non-json-content", new Dictionary<string, string>(){ {string.Empty, "non-json-content"}})},
+                    {("[1,2,3]", new Dictionary<string, string>(){ {string.Empty, "[1,2,3]"}})},
+                    {("{ \"key\": \"value\"}", new Dictionary<string, string>(){ {"key", "value"}})},
+                    {("{ \"key\": true}", new Dictionary<string, string>(){ {"key", "True"}})},
+                    {("{ \"key\": \"value\", \"key2\": [\"value\", \"value2\"]}",
+                        new Dictionary<string, string>(){ {"key", "value"}, {"key2", "value,value2"}})},
+                    {("{ invalidjson file here}", new Dictionary<string, string>(){ {String.Empty, "{ invalidjson file here}"}})}
+                };
+            
+            testCases.ForEach(tuple =>
+            {
+                Assert.Equal(tuple.expectedOutput, InvoiceController.PosDataParser.ParsePosData(tuple.input));
+            });
+        }
+        
+        [Fact]
+        [Trait("Integration", "Integration")]
+        public async Task PosDataParser_ParsesCorrectly_Slower()
+        {
+            using (var tester = ServerTester.Create())
+            {
+                tester.Start();
+                var user = tester.NewAccount();
+                user.GrantAccess();
+                user.RegisterDerivationScheme("BTC");
+                
+                var controller = tester.PayTester.GetController<InvoiceController>(null);
+
+                var testCases =
+                    new List<(string input, Dictionary<string, string> expectedOutput)>()
+                    {
+                        { (null, new Dictionary<string, string>())},
+                        {("", new Dictionary<string, string>())},
+                        {("{}", new Dictionary<string, string>())},
+                        {("non-json-content", new Dictionary<string, string>(){ {string.Empty, "non-json-content"}})},
+                        {("[1,2,3]", new Dictionary<string, string>(){ {string.Empty, "[1,2,3]"}})},
+                        {("{ \"key\": \"value\"}", new Dictionary<string, string>(){ {"key", "value"}})},
+                        {("{ \"key\": true}", new Dictionary<string, string>(){ {"key", "True"}})},
+                        {("{ \"key\": \"value\", \"key2\": [\"value\", \"value2\"]}",
+                        new Dictionary<string, string>(){ {"key", "value"}, {"key2", "value,value2"}})},
+                        {("{ invalidjson file here}", new Dictionary<string, string>(){ {String.Empty, "{ invalidjson file here}"}})}
+                    };
+
+                var tasks = new List<Task>();
+                foreach (var valueTuple in testCases)
+                {
+                    tasks.Add(user.BitPay.CreateInvoiceAsync(new Invoice(1, "BTC")
+                    {
+                        PosData = valueTuple.input
+                    }).ContinueWith(async task =>
+                    {
+                        var result = await controller.Invoice(task.Result.Id);
+                        var viewModel =
+                            Assert.IsType<InvoiceDetailsModel>(
+                                Assert.IsType<ViewResult>(result).Model);
+                        Assert.Equal(valueTuple.expectedOutput, viewModel.PosData);
+                    }));
+                }
+
+                await Task.WhenAll(tasks);
+            }
+        }
+
+       
 
         [Fact]
         [Trait("Integration", "Integration")]

BTCPayServer.Tests/docker-compose.yml

@@ -69,7 +69,7 @@ services:
 
 
   nbxplorer:
-    image: nicolasdorier/nbxplorer:2.0.0.0
+    image: nicolasdorier/nbxplorer:2.0.0.1
     restart: unless-stopped
     ports:
       - "32838:32838"

BTCPayServer/BTCPayServer.csproj

@@ -2,7 +2,7 @@
   <PropertyGroup>
     <OutputType>Exe</OutputType>
     <TargetFramework>netcoreapp2.1</TargetFramework>
-		<Version>1.0.3.17</Version>
+		<Version>1.0.3.18</Version>
     <NoWarn>NU1701,CA1816,CA1308,CA1810,CA2208</NoWarn>
   </PropertyGroup>
   <PropertyGroup>

BTCPayServer/Controllers/AppsController.PointOfSale.cs

@@ -50,17 +50,21 @@ namespace BTCPayServer.Controllers
                     "  description: The Tibetan Himalayas, the land is majestic and beautiful—a spiritual place where, despite the perilous environment, many journey seeking enlightenment. Pay us what you want!\n" +
                     "  image: https://cdn.pixabay.com/photo/2016/09/16/11/24/darts-1673812__480.jpg\n" +
                     "  custom: true";
+                EnableShoppingCart = false;
                 ShowCustomAmount = true;
             }
             public string Title { get; set; }
             public string Currency { get; set; }
             public string Template { get; set; }
+            public bool EnableShoppingCart { get; set; }
             public bool ShowCustomAmount { get; set; }
 
             public const string BUTTON_TEXT_DEF = "Buy for {0}";
             public string ButtonText { get; set; } = BUTTON_TEXT_DEF;
             public const string CUSTOM_BUTTON_TEXT_DEF = "Pay";
             public string CustomButtonText { get; set; } = CUSTOM_BUTTON_TEXT_DEF;
+            public const string CUSTOM_TIP_TEXT_DEF = "Do you want to leave a tip?";
+            public string CustomTipText { get; set; } = CUSTOM_TIP_TEXT_DEF;
 
             public string CustomCSSLink { get; set; }
         }
@@ -76,11 +80,13 @@ namespace BTCPayServer.Controllers
             var vm = new UpdatePointOfSaleViewModel()
             {
                 Title = settings.Title,
+                EnableShoppingCart = settings.EnableShoppingCart,
                 ShowCustomAmount = settings.ShowCustomAmount,
                 Currency = settings.Currency,
                 Template = settings.Template,
                 ButtonText = settings.ButtonText ?? PointOfSaleSettings.BUTTON_TEXT_DEF,
                 CustomButtonText = settings.CustomButtonText ?? PointOfSaleSettings.CUSTOM_BUTTON_TEXT_DEF,
+                CustomTipText = settings.CustomTipText ?? PointOfSaleSettings.CUSTOM_TIP_TEXT_DEF,
                 CustomCSSLink = settings.CustomCSSLink
             };
             if (HttpContext?.Request != null)
@@ -144,11 +150,13 @@ namespace BTCPayServer.Controllers
             app.SetSettings(new PointOfSaleSettings()
             {
                 Title = vm.Title,
+                EnableShoppingCart = vm.EnableShoppingCart,
                 ShowCustomAmount = vm.ShowCustomAmount,
                 Currency = vm.Currency.ToUpperInvariant(),
                 Template = vm.Template,
                 ButtonText = vm.ButtonText,
                 CustomButtonText = vm.CustomButtonText,
+                CustomTipText = vm.CustomTipText,
                 CustomCSSLink = vm.CustomCSSLink
             });
             await UpdateAppSettings(app);

BTCPayServer/Controllers/AppsPublicController.cs

@@ -45,11 +45,13 @@ namespace BTCPayServer.Controllers
             {
                 Title = settings.Title,
                 Step = step.ToString(CultureInfo.InvariantCulture),
+                EnableShoppingCart = settings.EnableShoppingCart,
                 ShowCustomAmount = settings.ShowCustomAmount,
                 CurrencySymbol = currency.Symbol,
                 Items = _AppsHelper.Parse(settings.Template, settings.Currency),
                 ButtonText = settings.ButtonText,
                 CustomButtonText = settings.CustomButtonText,
+                CustomTipText = settings.CustomTipText,
                 CustomCSSLink = settings.CustomCSSLink
             });
         }
@@ -74,6 +76,10 @@ namespace BTCPayServer.Controllers
             if (app == null)
                 return NotFound();
             var settings = app.GetSettings<PointOfSaleSettings>();
+            if (string.IsNullOrEmpty(choiceKey) && !settings.EnableShoppingCart)
+            {
+                return RedirectToAction(nameof(ViewPointOfSale), new { appId = appId });
+            }
             if (string.IsNullOrEmpty(choiceKey) && !settings.ShowCustomAmount)
             {
                 return RedirectToAction(nameof(ViewPointOfSale), new { appId = appId });

BTCPayServer/Controllers/InvoiceController.UI.cs

@@ -14,13 +14,13 @@ using BTCPayServer.Payments.Changelly;
 using BTCPayServer.Payments.Lightning;
 using BTCPayServer.Security;
 using BTCPayServer.Services.Invoices;
-using BTCPayServer.Services.Rates;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using NBitcoin;
 using NBitpayClient;
 using NBXplorer;
+using Newtonsoft.Json.Linq;
 
 namespace BTCPayServer.Controllers
 {
@@ -41,7 +41,6 @@ namespace BTCPayServer.Controllers
 
             var dto = invoice.EntityToDTO(_NetworkProvider);
             var store = await _StoreRepository.FindStore(invoice.StoreId);
-
             InvoiceDetailsModel model = new InvoiceDetailsModel()
             {
                 StoreName = store.StoreName,
@@ -64,7 +63,8 @@ namespace BTCPayServer.Controllers
                 RedirectUrl = invoice.RedirectURL,
                 ProductInformation = invoice.ProductInformation,
                 StatusException = invoice.ExceptionStatus,
-                Events = invoice.Events
+                Events = invoice.Events,
+                PosData = PosDataParser.ParsePosData(dto.PosData)
             };
 
             foreach (var data in invoice.GetPaymentMethods(null))
@@ -586,5 +586,43 @@ namespace BTCPayServer.Controllers
         {
             return _UserManager.GetUserId(User);
         }
+
+        public class PosDataParser
+        {
+            public static Dictionary<string, string> ParsePosData(string posData)
+            {
+                var result = new Dictionary<string,string>();
+                if (string.IsNullOrEmpty(posData))
+                {
+                    return result;
+                }
+            
+                try
+                {
+                
+                    var jObject =JObject.Parse(posData);
+                    foreach (var item in jObject)
+                    {
+                    
+                        switch (item.Value.Type)
+                        {
+                            case JTokenType.Array:
+                                result.Add(item.Key, string.Join(',', item.Value.AsEnumerable()));
+                                break;
+                            default:
+                                result.Add(item.Key, item.Value.ToString());
+                                break;
+                        }
+                    
+                    }
+                }
+                catch
+                {
+                    result.Add(string.Empty, posData);
+                }
+                return result;
+            }
+        }
+        
     }
 }

BTCPayServer/Models/AppViewModels/UpdatePointOfSaleViewModel.cs

@@ -17,6 +17,8 @@ namespace BTCPayServer.Models.AppViewModels
         [MaxLength(5000)]
         public string Template { get; set; }
 
+        [Display(Name = "Enable shopping cart")]
+        public bool EnableShoppingCart { get; set; }
         [Display(Name = "User can input custom amount")]
         public bool ShowCustomAmount { get; set; }
         public string Example1 { get; internal set; }
@@ -32,6 +34,10 @@ namespace BTCPayServer.Models.AppViewModels
         [MaxLength(30)]
         [Display(Name = "Text to display on buttons next to the input allowing the user to enter a custom amount")]
         public string CustomButtonText { get; set; }
+        [Required]
+        [MaxLength(30)]
+        [Display(Name = "Do you want to leave a tip?")]
+        public string CustomTipText { get; set; }
 
         [MaxLength(500)]
         [Display(Name = "Custom bootstrap CSS file")]

BTCPayServer/Models/AppViewModels/ViewPointOfSaleViewModel.cs

@@ -22,6 +22,7 @@ namespace BTCPayServer.Models.AppViewModels
             public bool Custom { get; set; }
         }
 
+        public bool EnableShoppingCart { get; set; }
         public bool ShowCustomAmount { get; set; }
         public string Step { get; set; }
         public string Title { get; set; }
@@ -30,6 +31,7 @@ namespace BTCPayServer.Models.AppViewModels
 
         public string ButtonText { get; set; }
         public string CustomButtonText { get; set; }
+        public string CustomTipText { get; set; }
 
         public string CustomCSSLink { get; set; }
     }

BTCPayServer/Models/InvoicingModels/InvoiceDetailsModel.cs

@@ -143,5 +143,6 @@ namespace BTCPayServer.Models.InvoicingModels
         public DateTimeOffset MonitoringDate { get; internal set; }
         public List<Data.InvoiceEventData> Events { get; internal set; }
         public string NotificationEmail { get; internal set; }
+        public Dictionary<string, string> PosData { get; set; }
     }
 }

BTCPayServer/Views/Apps/UpdatePointOfSale.cshtml

@@ -29,6 +29,10 @@
                         <input asp-for="Currency" class="form-control" />
                         <span asp-validation-for="Currency" class="text-danger"></span>
                     </div>
+                    <div class="form-group">
+                        <label asp-for="EnableShoppingCart"></label>
+                        <input asp-for="EnableShoppingCart" type="checkbox" class="form-check" />
+                    </div>
                     <div class="form-group">
                         <label asp-for="ShowCustomAmount"></label>
                         <input asp-for="ShowCustomAmount" type="checkbox" class="form-check" />
@@ -43,6 +47,11 @@
                         <input asp-for="CustomButtonText" class="form-control" />
                         <span asp-validation-for="CustomButtonText" class="text-danger"></span>
                     </div>
+                    <div class="form-group">
+                        <label asp-for="CustomTipText" class="control-label"></label>*
+                        <input asp-for="CustomTipText" class="form-control" />
+                        <span asp-validation-for="CustomTipText" class="text-danger"></span>
+                    </div>
                     <div class="form-group">
                         <label asp-for="CustomCSSLink" class="control-label"></label>
                         <a href="https://docs.btcpayserver.org/development/theme#bootstrap-themes" target="_blank"><span class="fa fa-question-circle-o" title="More information..."></span></a>

BTCPayServer/Views/AppsPublic/ViewPointOfSale.cshtml

@@ -1,4 +1,5 @@
-@inject BTCPayServer.HostedServices.CssThemeManager themeManager
+@addTagHelper *, Meziantou.AspNetCore.BundleTagHelpers
+@inject BTCPayServer.HostedServices.CssThemeManager themeManager
 
 @model BTCPayServer.Models.AppViewModels.ViewPointOfSaleViewModel
 @{
@@ -18,11 +19,59 @@
     {
         <link href="@Model.CustomCSSLink" rel="stylesheet" />
     }
+    <link href="~/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+
+    @if (Model.EnableShoppingCart) 
+    {
+        <script type="text/javascript">
+        var srvModel = @Html.Raw(Json.Serialize(Model));
+        </script>
+        <bundle name="wwwroot/bundles/cart-bundle.min.js" />
+    }
 </head>
 <body class="h-100">
+    @if (Model.EnableShoppingCart) 
+    {
+    <div id="cartModal" class="modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Shopping cart</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <table id="js-cart-list" class="table mt-2 mb-3">
+                    <thead class="thead-dark">
+                        <tr>
+                            <th colspan="2">Product</th>
+                            <th class="text-right" width="80">Quantity</th>
+                            <th class="text-right" width="25%">Price</th>
+                        </tr>
+                    </thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <form method="post" asp-antiforgery="false" data-buy>
+                    <input id="js-cart-amount" class="form-control" type="hidden" name="amount">
+                    <button id="js-cart-pay" class="btn btn-primary" type="submit"><b>@Model.CustomButtonText</b></button>
+                </form>
+            </div>
+            </div>
+        </div>
+    </div>
+    }
+
     <div class="container d-flex h-100">
         <div class="justify-content-center align-self-center text-center mx-auto px-2 py-3 w-100" style="margin: auto;">
             <h1 class="mb-4">@Model.Title</h1>
+            @if (Model.EnableShoppingCart) 
+            {
+                <a id="js-cart" class="btn btn-warning text-white text-right" href="#" data-toggle="modal" data-target="#cartModal"><i class="fa fa-shopping-basket"></i>&nbsp; <span class="badge badge-light badge-pill"><span id="js-cart-items">0</span></span></a>
+            }
             <div class="row">
                 @for (int i = 0; i < Model.Items.Length; i++)
                 {
@@ -31,7 +80,7 @@
                     var image = item.Image;
                     var description = item.Description;
                     <div class="@className my-3 px-2">
-                        <div class="card">
+                        <div class="card" data-id="@i">
                             @if (!String.IsNullOrWhiteSpace(image))
                             {
                                 <img class="card-img-top" src="@image" alt="Card image cap">
@@ -42,7 +91,7 @@
                                 {
                                     <p class="card-text">@description</p>
                                 }
-                                @if (item.Custom)
+                                @if (item.Custom && !Model.EnableShoppingCart)
                                 {
                                     <form method="post" asp-antiforgery="false" data-buy>
                                         <input type="hidden" name="choicekey" value="@item.Id" />
@@ -61,7 +110,7 @@
                                 else
                                 {
                                     <form method="post" asp-antiforgery="false">
-                                        <button type="submit" name="choiceKey" class="btn btn-primary" value="@item.Id">
+                                        <button type="submit" name="choiceKey" class="js-add-cart btn btn-primary" value="@item.Id">
                                             @String.Format(Model.ButtonText, @item.Price.Formatted)</button>
                                     </form>
                                 }
@@ -94,7 +143,5 @@
             }
         </div>
     </div>
-    <script src="~/vendor/jquery/jquery.js"></script>
-    <script src="~/vendor/bootstrap4/js/bootstrap.js"></script>
 </body>
 </html>

BTCPayServer/Views/Invoice/Invoice.cshtml

@@ -42,128 +42,177 @@
             </div>
         </div>
 
+    <div class="row">
+        <div class="col-md-6">
+            <h3>Information</h3>
+            <table class="table table-sm table-responsive-md">
+                <tr>
+                    <th>Store</th>
+                    <td><a href="@Model.StoreLink">@Model.StoreName</a></td>
+                </tr>
+                <tr>
+                    <th>Id</th>
+                    <td>@Model.Id</td>
+                </tr>
+                <tr>
+                    <th>Created date</th>
+                    <td>@Model.CreatedDate.ToBrowserDate()</td>
+                </tr>
+                <tr>
+                    <th>Expiration date</th>
+                    <td>@Model.ExpirationDate.ToBrowserDate()</td>
+                </tr>
+                <tr>
+                    <th>Monitoring date</th>
+                    <td>@Model.MonitoringDate.ToBrowserDate()</td>
+                </tr>
+                <tr>
+                    <th>Transaction speed</th>
+                    <td>@Model.TransactionSpeed</td>
+                </tr>
+                <tr>
+                    <th>Status</th>
+                    <td>@Model.Status</td>
+                </tr>
+                <tr>
+                    <th>Status Exception</th>
+                    <td>@Model.StatusException</td>
+                </tr>
+                <tr>
+                    <th>Refund email</th>
+                    <td><a href="mailto:@Model.RefundEmail">@Model.RefundEmail</a></td>
+                </tr>
+                <tr>
+                    <th>Order Id</th>
+                    <td>@Model.OrderId</td>
+                </tr>
+                <tr>
+                    <th>Total fiat due</th>
+                    <td>@Model.Fiat</td>
+                </tr>
+                <tr>
+                    <th>Notification Email</th>
+                    <td>@Model.NotificationEmail</td>
+                </tr>
+                <tr>
+                    <th>Notification Url</th>
+                    <td>@Model.NotificationUrl</td>
+                </tr>
+                <tr>
+                    <th>Redirect Url</th>
+                    <td><a href="@Model.RedirectUrl">@Model.RedirectUrl</a></td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="col-md-6">
+            <h3>Buyer information</h3>
+            <table class="table table-sm table-responsive-md">
+                <tr>
+                    <th>Name</th>
+                    <td>@Model.BuyerInformation.BuyerName</td>
+                </tr>
+                <tr>
+                    <th>Email</th>
+                    <td><a href="mailto:@Model.BuyerInformation.BuyerEmail">@Model.BuyerInformation.BuyerEmail</a></td>
+                </tr>
+                <tr>
+                    <th>Phone</th>
+                    <td>@Model.BuyerInformation.BuyerPhone</td>
+                </tr>
+                <tr>
+                    <th>Address 1</th>
+                    <td>@Model.BuyerInformation.BuyerAddress1</td>
+                </tr>
+                <tr>
+                    <th>Address 2</th>
+                    <td>@Model.BuyerInformation.BuyerAddress2</td>
+                </tr>
+                <tr>
+                    <th>City</th>
+                    <td>@Model.BuyerInformation.BuyerCity</td>
+                </tr>
+                <tr>
+                    <th>State</th>
+                    <td>@Model.BuyerInformation.BuyerState</td>
+                </tr>
+                <tr>
+                    <th>Country</th>
+                    <td>@Model.BuyerInformation.BuyerCountry</td>
+                </tr>
+                <tr>
+                    <th>Zip</th>
+                    <td>@Model.BuyerInformation.BuyerZip</td>
+                </tr>
+            </table>
+
+            <h3>Product information</h3>
+            <table class="table table-sm table-responsive-md">
+                <tr>
+                    <th>Item code</th>
+                    <td>@Model.ProductInformation.ItemCode</td>
+                </tr>
+                <tr>
+                    <th>Item Description</th>
+                    <td>@Model.ProductInformation.ItemDesc</td>
+                </tr>
+                <tr>
+                    <th>Price</th>
+                    <td>@Model.ProductInformation.Price @Model.ProductInformation.Currency</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+
         <div class="row">
             <div class="col-md-6">
-                <h3>Information</h3>
+                <h3>Pos Data</h3>
                 <table class="table table-sm table-responsive-md">
-                    <tr>
-                        <th>Store</th>
-                        <td><a href="@Model.StoreLink">@Model.StoreName</a></td>
-                    </tr>
-                    <tr>
-                        <th>Id</th>
-                        <td>@Model.Id</td>
-                    </tr>
-                    <tr>
-                        <th>Created date</th>
-                        <td>@Model.CreatedDate.ToBrowserDate()</td>
-                    </tr>
-                    <tr>
-                        <th>Expiration date</th>
-                        <td>@Model.ExpirationDate.ToBrowserDate()</td>
-                    </tr>
-                    <tr>
-                        <th>Monitoring date</th>
-                        <td>@Model.MonitoringDate.ToBrowserDate()</td>
-                    </tr>
-                    <tr>
-                        <th>Transaction speed</th>
-                        <td>@Model.TransactionSpeed</td>
-                    </tr>
-                    <tr>
-                        <th>Status</th>
-                        <td>@Model.Status</td>
-                    </tr>
-                    <tr>
-                        <th>Status Exception</th>
-                        <td>@Model.StatusException</td>
-                    </tr>
-                    <tr>
-                        <th>Refund email</th>
-                        <td><a href="mailto:@Model.RefundEmail">@Model.RefundEmail</a></td>
-                    </tr>
-                    <tr>
-                        <th>Order Id</th>
-                        <td>@Model.OrderId</td>
-                    </tr>
-                    <tr>
-                        <th>Total fiat due</th>
-                        <td>@Model.Fiat</td>
-                    </tr>
-                    <tr>
-                        <th>Notification Email</th>
-                        <td>@Model.NotificationEmail</td>
-                    </tr>
-                    <tr>
-                        <th>Notification Url</th>
-                        <td>@Model.NotificationUrl</td>
-                    </tr>
-                    <tr>
-                        <th>Redirect Url</th>
-                        <td><a href="@Model.RedirectUrl">@Model.RedirectUrl</a></td>
-                    </tr>
+                    @foreach (var posDataItem in Model.PosData)
+                    {
+                        <tr>
+                            @if (!string.IsNullOrEmpty(posDataItem.Key))
+                            {
+                               
+                                <th>@posDataItem.Key</th>
+                                <td>@posDataItem.Value</td>
+                            }
+                            else
+                            {
+                               
+                                <td colspan="2">@posDataItem.Value</td>
+                            }
+                        </tr>
+                    }
+                
                 </table>
+
             </div>
-
+            
             <div class="col-md-6">
-                <h3>Buyer information</h3>
+                <h3>Addresses</h3>
                 <table class="table table-sm table-responsive-md">
+                    <thead class="thead-inverse">
                     <tr>
-                        <th>Name</th>
-                        <td>@Model.BuyerInformation.BuyerName</td>
-                    </tr>
-                    <tr>
-                        <th>Email</th>
-                        <td><a href="mailto:@Model.BuyerInformation.BuyerEmail">@Model.BuyerInformation.BuyerEmail</a></td>
-                    </tr>
-                    <tr>
-                        <th>Phone</th>
-                        <td>@Model.BuyerInformation.BuyerPhone</td>
-                    </tr>
-                    <tr>
-                        <th>Address 1</th>
-                        <td>@Model.BuyerInformation.BuyerAddress1</td>
-                    </tr>
-                    <tr>
-                        <th>Address 2</th>
-                        <td>@Model.BuyerInformation.BuyerAddress2</td>
-                    </tr>
-                    <tr>
-                        <th>City</th>
-                        <td>@Model.BuyerInformation.BuyerCity</td>
-                    </tr>
-                    <tr>
-                        <th>State</th>
-                        <td>@Model.BuyerInformation.BuyerState</td>
-                    </tr>
-                    <tr>
-                        <th>Country</th>
-                        <td>@Model.BuyerInformation.BuyerCountry</td>
-                    </tr>
-                    <tr>
-                        <th>Zip</th>
-                        <td>@Model.BuyerInformation.BuyerZip</td>
-                    </tr>
-                </table>
-
-                <h3>Product information</h3>
-                <table class="table table-sm table-responsive-md">
-                    <tr>
-                        <th>Item code</th>
-                        <td>@Model.ProductInformation.ItemCode</td>
-                    </tr>
-                    <tr>
-                        <th>Item Description</th>
-                        <td>@Model.ProductInformation.ItemDesc</td>
-                    </tr>
-                    <tr>
-                        <th>Price</th>
-                        <td>@Model.ProductInformation.Price @Model.ProductInformation.Currency</td>
+                        <th class="firstCol">Payment method</th>
+                        <th>Address</th>
                     </tr>
+                    </thead>
+                    <tbody>
+                    @foreach (var address in Model.Addresses)
+                    {
+                        var current = address.Current ? "font-weight-bold" : "";
+                        <tr>
+                            <td>@address.PaymentMethod</td>
+                            <td class="smMaxWidth text-truncate @current">@address.Destination</td>
+                        </tr>
+                    }
+                    </tbody>
                 </table>
             </div>
         </div>
-        <div class="row">
+    
+    <div class="row">
             <div class="col-md-12">
                 <h3>Paid summary</h3>
                 <table class="table table-sm table-responsive-md">
@@ -258,29 +307,6 @@
                 </div>
             </div>
         }
-        <div class="row">
-            <div class="col-md-12">
-                <h3>Addresses</h3>
-                <table class="table table-sm table-responsive-md">
-                    <thead class="thead-inverse">
-                        <tr>
-                            <th class="firstCol">Payment method</th>
-                            <th>Address</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach (var address in Model.Addresses)
-                        {
-                            var current = address.Current ? "font-weight-bold" : "";
-                            <tr>
-                                <td>@address.PaymentMethod</td>
-                                <td class="smMaxWidth text-truncate @current">@address.Destination</td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-            </div>
-        </div>
 
         <div class="row">
             <div class="col-md-12">

BTCPayServer/bundleconfig.json

@@ -52,5 +52,14 @@
             "wwwroot/vendor/vex/js/vex.combined.min.js",
             "wwwroot/checkout/**/*.js"
         ]
+    },
+    {
+        "outputFileName": "wwwroot/bundles/cart-bundle.min.js",
+        "inputFiles": [
+            "wwwroot/vendor/jquery/jquery.js",
+            "wwwroot/vendor/bootstrap4/js/bootstrap.js",
+            "wwwroot/cart/js/cart.js",
+            "wwwroot/cart/js/cart.jquery.js"
+        ]
     }
 ]

BTCPayServer/wwwroot/cart/js/cart.jquery.js

@@ -0,0 +1,57 @@
+$.fn.addAnimate = function(completeCallback) {
+    var documentHeight = $(document).height(),
+        itemPos = $(this).offset(),
+        itemY = itemPos.top,
+        cartPos = $('#js-cart').find('.badge').position();
+        tempItem = '<span id="js-cart-temp-item" class="badge badge-primary text-white badge-pill " style="' +
+                    'position: absolute;' +
+                    'top: ' + itemPos.top + 'px;' +
+                    'left: ' + (itemPos.left + 50) + 'px;">'+
+                    '<i class="fa fa-shopping-basket"></i></span>';
+
+    // Make animation speed look constant regardless of how far the object is from the cart
+    var animationSpeed = (Math.log(itemY) * (documentHeight / Math.log2(documentHeight - itemY))) / 2;
+
+    // Add the cart item badge and animate it
+    $('body').after(tempItem);
+    $('#js-cart-temp-item').animate({
+        easing: 'swing',
+        top: cartPos.top,
+        left: cartPos.left
+    }, animationSpeed, function() {
+        $(this).remove();
+        completeCallback && completeCallback();
+    });
+}; 
+
+$(document).ready(function(){
+    var cart = new Cart();
+
+    $('.js-add-cart').click(function(event){
+        event.preventDefault();
+
+        var $btn = $(event.target),
+            id = $btn.closest('.card').data('id'),
+            item = srvModel.items[id];
+
+        // Animate adding and then add then save
+        $(this).addAnimate(function(){
+            cart.addItem({
+                id: id,
+                title: item.title,
+                price: item.price,
+                image: typeof item.image != 'underfined' ? item.image : null
+            });
+        });
+    });
+
+    // Destroy the cart when the "pay button is clicked"
+    $('#js-cart-pay').click(function(){
+        cart.destroy();
+    });
+
+    // Repopulate cart items in the modal when it opens
+    $('#cartModal').on('show.bs.modal', function () {
+        cart.listItems();
+    });
+});

BTCPayServer/wwwroot/cart/js/cart.js

@@ -0,0 +1,282 @@
+function Cart() {
+    this.items = 0;
+    this.totalAmount = 0;
+    this.content = [];
+    this.tip = 0;
+
+    this.loadLocalStorage();
+    this.itemsCount();
+    this.listItems();
+    this.updateAmount();
+}
+
+Cart.prototype.addItem = function(item) {
+    // Increment the existing item count
+    var result = this.content.filter(function(obj){
+        if (obj.id === item.id){
+            obj.count++;
+        }
+        
+        return obj.id === item.id
+    });
+
+    // Add new item because it doesn't exist yet
+    if (!result.length) {
+        this.content.push({id: item.id, title: item.title, price: item.price, count: 1, image: item.image})
+    }
+
+    this.items++;
+    this.saveLocalStorage();
+    this.itemsCount();
+    this.updateTotal();
+    this.updateAmount();
+}
+
+Cart.prototype.decrementItem = function(id) {
+    var self = this;
+
+    // Decrement the existing item count
+    this.content.filter(function(obj, index, arr){
+        if (obj.id === id)
+        {
+            obj.count--;
+
+            // It's the last item with the same ID, remove it
+            if (obj.count === 0) {
+                self.removeItem(id, index, arr);
+            }
+        }
+    });
+
+    this.items--;
+    this.saveLocalStorage();
+    this.itemsCount();
+    this.updateTotal();
+    this.updateAmount();
+    
+    if (this.items === 0) {
+        this.emptyList();
+    }
+}
+
+Cart.prototype.removeItemAll = function(id) {
+    var self = this;
+
+    this.content.filter(function(obj, index, arr){
+        if (obj.id === id)
+        {
+            self.removeItem(id, index, arr);
+
+            for (var i = 0; i < obj.count; i++) {
+                self.items--;
+            }
+        }
+    });
+
+    this.saveLocalStorage();
+    this.itemsCount();
+    this.updateTotal();
+    this.updateAmount();
+    
+    if (this.items === 0) {
+        this.emptyList();
+    }
+}
+
+Cart.prototype.removeItem = function(id, index, arr) {
+    // Remove from the array
+    arr.splice(index, 1); 
+    // Remove from the DOM
+    $('#js-cart-list').find('tr').eq(index+1).remove();
+}
+
+Cart.prototype.setTip = function(tip) {
+    return this.tip = tip;
+}
+
+Cart.prototype.itemsCount = function() {
+    $('#js-cart-items').text(this.items);
+}
+
+Cart.prototype.getTotal = function(plain) {
+    this.totalAmount = 0;
+
+    // Always calculate the total amount based on the cart content
+    for (var key in this.content) {
+        if (this.content.hasOwnProperty(key) && typeof this.content[key] != 'undefined') {
+            var price = this.toCents(this.content[key].price.value);
+            this.totalAmount += (this.content[key].count * price);
+        }
+    }
+
+    this.totalAmount += this.toCents(this.tip);
+
+    return this.fromCents(this.totalAmount);
+}
+
+Cart.prototype.updateTotal = function() {
+    $('#js-cart-total').text(this.formatCurrency(this.getTotal()));
+}
+
+Cart.prototype.updateAmount = function() {
+    $('#js-cart-amount').val(this.getTotal());
+}
+
+Cart.prototype.escape = function(input) {
+    return ('' + input) /* Forces the conversion to string. */
+        .replace(/&/g, '&amp;') /* This MUST be the 1st replacement. */
+        .replace(/'/g, '&apos;') /* The 4 other predefined entities, required. */
+        .replace(/"/g, '&quot;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+    ;
+}
+
+Cart.prototype.listItems = function() {
+    var $table = $('#js-cart-list').find('tbody'),
+        self = this,
+        list = []
+        tableTemplate = '';
+    
+    if (this.content.length > 0) {
+        // Prepare the list of items in the cart
+        for (var key in this.content) {
+            var item = this.content[key],
+                id = this.escape(item.id),
+                title = this.escape(item.title),
+                image = this.escape(item.image),
+                count = this.escape(item.count),
+                price = this.escape(item.price.formatted),
+                currencySymbol = this.escape(srvModel.currencySymbol),
+                step = this.escape(srvModel.step),
+                customTipText = this.escape(srvModel.customTipText);
+
+            tableTemplate = '<tr data-id="' + id + '">' + 
+                        (image !== null ? '<td class="align-middle pr-0" width="60"><img src="' + image + '" width="100%"></td>' : '') +
+                        '<td class="align-middle pr-0"><b>' + title + '</b></td>' +
+                        '<td class="align-middle pr-0" align="right"><div class="input-group">' +
+                        '   <input class="js-cart-item-count form-control form-control-sm pull-left" type="number" min="0" step="1" name="count" placeholder="Qty" value="' + count + '" data-prev="' + count + '">' +
+                        '   <div class="input-group-append"><a class="js-cart-item-remove btn btn-danger btn-sm" href="#"><i class="fa fa-remove"></i></a></div>' + 
+                        '</div></td>' +
+                        '<td class="align-middle" align="right">' + price + '</td>' +
+                        '</tr>';
+            list.push($(tableTemplate));
+        }
+
+        tableTemplate = '<tr><td colspan="4"><div class="row"><div class="col-sm-8 py-2">' + customTipText + '</div><div class="col-sm-4">' +
+    '<div class="input-group">' + 
+        '<div class="input-group-prepend">' +
+            '<span class="input-group-text">' + currencySymbol + '</span>' +
+        '</div>' +
+        '<input class="js-cart-tip form-control" type="number" min="0" step="' + step + '" name="tip" placeholder="Amount">' +
+    '</div>' +
+    '</div></div></td></tr>';
+        list.push($(tableTemplate));
+
+        tableTemplate = '<tr class="bg-light h4"><td colspan="2">Total</td><td colspan="2" align="right"><span id="js-cart-total">' + this.formatCurrency(this.getTotal()) + '</span></td></tr>';
+        list.push($(tableTemplate));
+
+        // Add the list to DOM
+        $table.html(list);
+
+        // Update the cart when number of items is changed
+        $('.js-cart-item-count').off().on('input', function(event){
+            var _this = this,
+                id = $(this).closest('tr').data('id'),
+                count = parseInt($(this).val()),
+                prevCount = parseInt($(this).data('prev')),
+                increased = count > prevCount;
+            
+            // User hasn't inputed any number so stop here
+            if (isNaN(count)) {
+                return false;
+            }
+
+            $(this).data('prev', count);
+
+            var item = self.content.filter(function(obj){
+                return obj.id === id
+            });
+            
+            // Must be in the loop because user may change the count manually by more than 1
+            for (var i = 0; i < Math.abs(count - prevCount); i++) {
+                if (increased) {
+                    self.addItem({
+                        id: id,
+                        title: item.title,
+                        price: item.price,
+                        image: typeof item.image != 'underfined' ? item.image : null
+                    });
+                } else {
+                    self.decrementItem(id);
+                }
+            }
+        });
+
+        // Remove item from the cart
+        $('.js-cart-item-remove').off().on('click', function(event){
+            event.preventDefault();
+
+            var id = $(this).closest('tr').data('id');
+
+            self.removeItemAll(id);
+        });
+
+        // Change total when tip is changed
+        $('.js-cart-tip').off().on('input', function(event){
+            self.setTip($(this).val());
+            self.updateTotal();
+            self.updateAmount();
+        });
+    } else { // No item in the cart
+        self.emptyList();
+    }
+}
+
+Cart.prototype.emptyList = function() {
+    var $table = $('#js-cart-list').find('tbody');
+
+    $table.html('<tr><td colspan="4">The cart is empty.</td></tr>');
+}
+
+/* Get the currency symbol from an existing amount and use it with the new amount*/
+Cart.prototype.formatCurrency = function(amount, example) {
+    var regex = /([0-9.]+)/gm;
+
+    // Get the first item's formated price
+    if (typeof example == 'undefined' && typeof srvModel != 'undefined') {
+        example = srvModel.items[0].price.formatted;
+    }
+
+    return example.replace(regex, amount.toFixed(2));
+}
+
+Cart.prototype.toCents = function(num) {
+    return num * 100;
+}
+
+Cart.prototype.fromCents = function(num) {
+    return num / 100;
+}
+
+Cart.prototype.saveLocalStorage = function() {
+    localStorage.setItem('cart', JSON.stringify(this.content));
+}
+
+Cart.prototype.loadLocalStorage = function() {
+    this.content = $.parseJSON(localStorage.getItem('cart')) || [];
+
+    // Get number of cart items
+    for (var key in this.content) {
+        if (this.content.hasOwnProperty(key) && typeof this.content[key] != 'undefined' && this.content[key] != null) {
+            this.items += this.content[key].count;
+        }
+    }
+}
+
+Cart.prototype.destroy = function() {
+    localStorage.removeItem('cart');
+    this.content = [];
+    this.items = 0;
+    this.totalAmount = 0;
+}