Checkout functionality, including PayPal payment portal.
This commit is contained in:
parent
459c8bd992
commit
1ce7b31d8e
|
|
@ -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>
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@ else {
|
|||
<h5>Cart Summary</h5>
|
||||
<div class="mt-2">
|
||||
<div>Total - (@TotalQuantity items) <b>@TotalPrice</b></div>
|
||||
<a href="#" class="btn btn-success">
|
||||
<a href="Checkout" class="btn btn-success">
|
||||
<span class="oi oi-credit-card"></span> Proceed to Checkout
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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¤cy=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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue