Customer Experience Center - Saved Cards

The Customer Experience Center - Saved Cards app is used to show saved credit and debit cards, and related transactions, to a customer in frontend. Cards are saved during checkout using the shopping cart app, see submitting to cart

When you add this app to a paragraph you will see the following settings: Basically, you:

• Use the Display-settings to set the:
  • Cards per page
  • Sort by field
  • Sort direction
• Select the Templates used to render the app output
  • List - this template is used to render the list of credit cards
  • Log - this template is used to render any errors which have occurred using this card

Templates

When you create a List-template, you should inherit the SavedCardViewModel and use the Dynamicweb.Rendering and Dynamicweb.Ecommerce.Frontend.SavedCards namespaces. You can then loop through each card and list them to the user.

@inherits ViewModelTemplate<SavedCardListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend.SavedCards

<table>
    <tr>
        <th>Name</th>
        <th>IsDefault</th>
        <th>CardType</th>
        <th>ID</th>
    </tr>
    @if (Model.SavedCardList != null)
    {
        if (Model.SavedCardList.Count > 0)
        {
            foreach (var savedcard in Model.SavedCardList)
            {
                <tr>
                    <td><a href="?savedcardid=@savedcard.ID">@savedcard.Name</a></td>
                    <td>@savedcard.IsDefault</td>
                    <td>@savedcard.CardType</td>
                    <td>@savedcard.ID</td>
                </tr>
            }
        }
    }
</table>

The Log-template is loaded when the parameter savedcardid is present in the url alongside an appropriate ID. Inside this template you can access information about errors on transactions made with this card.

@inherits ViewModelTemplate<SavedCardLogListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Ecommerce.Frontend.SavedCards

@if (Model.SavedCardLogList == null || Model.SavedCardLogList.Count < 1)
{
    <div class="text-center">
        <div>@Translate("No errors registered for this card")</div>
    </div>
}
else
{
    foreach (var log in Model.SavedCardLogList)
    {
        string listName = !string.IsNullOrEmpty("") ? "" : Translate("Saved Card Logs");
        int listItemsCount = Model.SavedCardLogList.Count();

        <div>
            @if (listItemsCount > 0)
            {
                <div>
                    <p><strong>Time:</strong> @log.Time.ToString()</p>
                    <p><strong>OrderId:</strong> @log.OrderId</p>
                    <p><strong>Message:</strong> @log.Message</p>
                </div>
            }
            else
            { }
        </div>
    }
}