---
title: Building the order review step
related:
- https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process.md
- https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/gathering-customer-details-during-checkout.md
- https://docs.kentico.com/13/e-commerce-features/managing-on-line-stores/orders.md
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
> **Info:** This page is part three of the [Implementing a checkout process](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process.md) series.
In this part of the series, we look at the final step in a conventional checkout process – order review. An order review step usually details selected products and entered address, payment, and shipping details to the [customer](https://docs.kentico.com/13/e-commerce-features/managing-on-line-stores/customers.md). After a customer reviews these details and finalizes the order, the page often redirects them to a summary, displaying the order ID and a thank you message. If the customer selected a suitable [payment method](https://docs.kentico.com/13/e-commerce-features/configuring-on-line-stores/configuring-payment-methods.md), this might be preempted by a [redirection to a payment gateway](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/building-the-order-review-step/connecting-to-payment-gateways.md).
On this page, we will implement the part of the checkout process that:
- Displays customer information collected in the [previous step](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/gathering-customer-details-during-checkout.md) alongside the contents of the customer's shopping cart.
- Allows customers to select a payment method and complete their order.
- Displays a thank you page summarizing the order.
> **Tip:** **Tip**: View the full code of a functional example in the [LearningKit project](https://github.com/Kentico/LearningKit-Mvc) on GitHub. You can also run the LearningKit website by connecting the project to a Xperience database. Follow the instructions in the repository's README file.
Open your live site project in Visual Studio and:
1. Create a view model for payment methods. The model stores select properties of the _PaymentOptionInfo_object type from the _CMS.Ecommerce_ namespace.
```csharp
public class PaymentMethodViewModel
{
[DisplayName("Payment method")]
public int PaymentMethodID { get; set; }
public SelectList PaymentMethods { get; set; }
///
/// Creates a payment method model.
///
/// Selected payment method.
/// List of all available payment methods.
public PaymentMethodViewModel(PaymentOptionInfo paymentMethod, SelectList paymentMethods)
{
PaymentMethods = paymentMethods;
if (paymentMethod != null)
{
PaymentMethodID = paymentMethod.PaymentOptionID;
}
}
///
/// Creates an empty payment method model.
/// Required by the MVC framework for model binding during form submission.
///
public PaymentMethodViewModel()
{
}
}
```
2. Create a view model used to aggregate data collected in the previous steps. This model aggregates the _DeliveryDetailsViewModel_ and _ShoppingCartViewModel_ models created in the previous parts of this series. It also holds the _PaymentMethodViewModel_ created in the previous step.
```csharp
public class PreviewAndPayViewModel
{
public DeliveryDetailsViewModel DeliveryDetails { get; set; }
public ShoppingCartViewModel Cart { get; set; }
public PaymentMethodViewModel PaymentMethod { get; set; }
}
```
3. Add new actions to the **CheckoutController**class that:
- Retrieve valid [payment methods](https://docs.kentico.com/13/e-commerce-features/configuring-on-line-stores/configuring-payment-methods.md).
```csharp
///
/// Gets all applicable payment methods assigned to the current site.
///
/// Shopping cart of the site
/// Collection of applicable payment methods
private IEnumerable GetApplicablePaymentMethods(ShoppingCartInfo cart)
{
// Gets all enabled payment methods from Xperience
IEnumerable enabledPaymentMethods = paymentOption.GetBySite(SiteContext.CurrentSiteID, true).ToList();
// Returns all applicable payment methods
return enabledPaymentMethods.Where(paymentMethod => PaymentOptionInfoProvider.IsPaymentOptionApplicable(cart, paymentMethod));
}
```
> **Tip:** To limit available payment methods based on the selected shipping option, see [Making payment methods dependent on shipping options](https://docs.kentico.com/13/e-commerce-features/customizing-on-line-stores/payment-related-customizing/making-payment-methods-dependent-on-shipping-options.md).
- Fill the _PreviewAndPayViewModel_ and send it to the related view template.
```csharp
///
/// Display the preview checkout process step.
///
public ActionResult PreviewAndPay()
{
// If the current shopping cart is empty, returns to the shopping cart action
if (shoppingService.GetCurrentShoppingCart().IsEmpty)
{
return RedirectToAction("ShoppingCart");
}
// Prepares a model from the preview step
PreviewAndPayViewModel model = PreparePreviewViewModel();
// Displays the preview step
return View(model);
}
///
/// Prepares a view model of the preview checkout process step including the shopping cart,
/// the customer details, and the payment method.
///
/// View model with information about the future order.
private PreviewAndPayViewModel PreparePreviewViewModel()
{
// Gets the current user's shopping cart
ShoppingCartInfo cart = shoppingService.GetCurrentShoppingCart();
// Prepares the customer details
DeliveryDetailsViewModel deliveryDetailsModel = new DeliveryDetailsViewModel
{
Customer = new CustomerViewModel(shoppingService.GetCurrentCustomer()),
BillingAddress = new BillingAddressViewModel(shoppingService.GetBillingAddress(), null, null),
ShippingOption = new ShippingOptionViewModel()
{
ShippingOptionID = cart.ShippingOption.ShippingOptionID,
ShippingOptionDisplayName = shippingOption.Get(cart.ShippingOption.ShippingOptionID).ShippingOptionDisplayName
}
};
// Prepares the payment method
PaymentMethodViewModel paymentViewModel = new PaymentMethodViewModel
{
PaymentMethods = new SelectList(GetApplicablePaymentMethods(cart), "PaymentOptionID", "PaymentOptionDisplayName")
};
// Gets the selected payment method
PaymentOptionInfo paymentMethod = cart.PaymentOption;
if (paymentMethod != null)
{
paymentViewModel.PaymentMethodID = paymentMethod.PaymentOptionID;
}
// Prepares a model from the preview step
PreviewAndPayViewModel model = new PreviewAndPayViewModel
{
DeliveryDetails = deliveryDetailsModel,
Cart = new ShoppingCartViewModel(cart),
PaymentMethod = paymentViewModel
};
return model;
}
///
/// Decides whether the specified payment method is valid on the current site.
///
/// ID of the applied payment method.
/// True if the payment method is valid.
private bool IsPaymentMethodValid(int paymentMethodID)
{
// Gets the current shopping cart
ShoppingCartInfo cart = shoppingService.GetCurrentShoppingCart();
// Gets a list of all applicable payment methods to the current user's shopping cart
List paymentMethods = GetApplicablePaymentMethods(cart).ToList();
// Returns whether an applicable payment method exists with the entered payment method's ID
return paymentMethods.Exists(p => p.PaymentOptionID == paymentMethodID);
}
```
4. Add an action to the controller that processes the order. If the processing is successful, the action displays a [payment page](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/building-the-order-review-step/connecting-to-payment-gateways.md).
```csharp
///
/// Validates all collected information, creates an order,
/// and redirects the customer to payment.
///
/// View model with information about the future order.
[HttpPost]
public ActionResult PreviewAndPay(PreviewAndPayViewModel model)
{
// Gets the current shopping cart
ShoppingCartInfo cart = shoppingService.GetCurrentShoppingCart();
// Validates the shopping cart
var validationErrors = ShoppingCartInfoProvider.ValidateShoppingCart(cart);
// Gets the selected payment method, assigns it to the shopping cart, and evaluates the cart
shoppingService.SetPaymentOption(model.PaymentMethod.PaymentMethodID);
// If the validation was not successful, displays the preview step again
if (validationErrors.Any() || !IsPaymentMethodValid(model.PaymentMethod.PaymentMethodID))
{
// Prepares a view model from the order review step
PreviewAndPayViewModel viewModel = PreparePreviewViewModel();
// Displays the order review step again
return View("PreviewAndPay", viewModel);
}
// Creates an order from the current shopping cart
// If the order was created successfully, empties the cart
OrderInfo order = shoppingService.CreateOrder();
// Redirects to the payment gateway
return RedirectToAction("Index", "Payment", new { orderID = order.OrderID });
}
```
> **Tip:** If you provide only [manual payment methods](https://docs.kentico.com/13/e-commerce-features/configuring-on-line-stores/configuring-payment-methods.md) (and therefore do not require connections to any [payment gateways](https://docs.kentico.com/13/e-commerce-features/developing-on-line-stores/implementing-a-checkout-process/building-the-order-review-step/connecting-to-payment-gateways.md)), you can redirect your customers directly to a thank-you page. For example:
>
> ```csharp
>
> ///
> /// Displays a thank-you page where user is redirected after creating an order.
> ///
> /// ID of the created order.
> public ActionResult ThankYou(int orderID = 0)
> {
> ViewBag.OrderID = orderID;
>
> return View();
> }
>
>
> ```
>
> The related view template may, for example, display a short 'thank you' message and an order summary:
>
> ```csharp
>
> @{
> Layout = "~/Views/Shared/_Layout.cshtml";
> ViewBag.Title = "Thank-you page";
> }
>
>
Thank-you page
>
>
Order number: @ViewBag.OrderID
>
Your order was succesfully created. Thank you for your patronage!
>
>
> ```
5. Create a view for the order review step. For example:
```csharp
@* Displays the customer details. *@
}
```
Customers are now able to select their preferred payment method, and review and confirm their order. When a customer creates an order, Xperience sends a notification email to the email address specified in the [Send order notification setting](https://docs.kentico.com/13/e-commerce-features/configuring-on-line-stores/configuring-e-commerce-email-notifications.md).