Take the community feedback survey now.

Son Do
Jan 11, 2017
  1745
(0 votes)

How to enable and implement authorize.net on Quicksilver

Authorize.net is a built-in payment gateway in Episerver Commerce. However, in Quicksilver on GitHub, it wasn't enabled yet.

This post describes how to enable Authorize in Commerce Manager and implement this payment gateway in Front-end. We could use this for Quicksilver and your MVC site.

I list the main section below and you could pass through what you have already.

Enable Authorize.net in Commerce Manager

Login to your Commerce Manager with admin roles

Navigate to Administration > Order System > Payments > English

Click on New button to add new payment method

Enable Authorize.net in Commerce Manager

Adding Authorize to our commerce like below:

Enable Authorize.net in Commerce Manager

Open Front-end, adding an item to cart and checkout, we will see the error:

Enable Authorize.net in Commerce Manager

Implement Authorize payment on front-end

Implement AuthorizePaymentMethod

In Quicksilver, payment base class ready for adding new method so we could use it PaymentMethodBase.

 
public AuthorizePaymentMethod()
    : this(LocalizationService.Current, ServiceLocator.Current.GetInstance())
{
}

public AuthorizePaymentMethod(LocalizationService localizationService, IOrderGroupFactory orderGroupFactory) : base(localizationService, orderGroupFactory)
{
}

public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
{
    throw new NotImplementedException();
}

public override void PostProcess(IPayment payment)
{
    throw new NotImplementedException();
}

public override bool ValidateData()
{
    throw new NotImplementedException();
}

We need some properties for verifying a credit cart: holder name, number, month/year expiration, security code.

 
[LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardName")]
[LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardName")]
public string CreditCardName { get; set; }

[LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardNumber")]
[LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber")]
public string CreditCardNumber { get; set; }

[LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardSecurityCode")]
[LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode")]
public string CreditCardSecurityCode { get; set; }

[LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationMonth")]
[LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationMonth")]
public int ExpirationMonth { get; set; }

[LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationYear")]
[LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationYear")]
public int ExpirationYear { get; set; }
public class AuthorizePaymentMethod : PaymentMethodBase
{
    public AuthorizePaymentMethod()
        : this(LocalizationService.Current, ServiceLocator.Current.GetInstance())
    {
    }

    public AuthorizePaymentMethod(LocalizationService localizationService, IOrderGroupFactory orderGroupFactory) : base(localizationService, orderGroupFactory)
    {
    }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardName")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardName")]
    public string CreditCardName { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardNumber")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber")]
    public string CreditCardNumber { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardSecurityCode")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode")]
    public string CreditCardSecurityCode { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationMonth")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationMonth")]
    public int ExpirationMonth { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationYear")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationYear")]
    public int ExpirationYear { get; set; }

    public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
    {
        throw new NotImplementedException();
    }

    public override void PostProcess(IPayment payment)
    {
        throw new NotImplementedException();
    }

    public override bool ValidateData()
    {
        throw new NotImplementedException();
    }
}

CreatePayment method, we will use abstraction to create IPayment for cart

 
public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
{
    var payment = orderGroup.CreateCardPayment(_orderGroupFactory);
    payment.CardType = "Credit card";
    payment.PaymentMethodId = PaymentMethodId;
    payment.PaymentMethodName = "Authorize";
    payment.Amount = amount;
    payment.CreditCardNumber = CreditCardNumber;
    payment.CreditCardSecurityCode = CreditCardSecurityCode;
    payment.ExpirationMonth = ExpirationMonth;
    payment.ExpirationYear = ExpirationYear;
    payment.Status = PaymentStatus.Pending.ToString();
    payment.CustomerName = CreditCardName;
    payment.TransactionType = TransactionType.Authorization.ToString();
    return payment;
}
public class AuthorizePaymentMethod : PaymentMethodBase
{
    public AuthorizePaymentMethod()
        : this(LocalizationService.Current, ServiceLocator.Current.GetInstance())
    {
    }

    public AuthorizePaymentMethod(LocalizationService localizationService, IOrderGroupFactory orderGroupFactory) : base(localizationService, orderGroupFactory)
    {
    }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardName")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardName")]
    public string CreditCardName { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardNumber")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber")]
    public string CreditCardNumber { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardSecurityCode")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode")]
    public string CreditCardSecurityCode { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationMonth")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationMonth")]
    public int ExpirationMonth { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationYear")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationYear")]
    public int ExpirationYear { get; set; }

public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
{
    var payment = orderGroup.CreateCardPayment(_orderGroupFactory);
    payment.CardType = "Credit card";
    payment.PaymentMethodId = PaymentMethodId;
    payment.PaymentMethodName = "Authorize";
    payment.Amount = amount;
    payment.CreditCardNumber = CreditCardNumber;
    payment.CreditCardSecurityCode = CreditCardSecurityCode;
    payment.ExpirationMonth = ExpirationMonth;
    payment.ExpirationYear = ExpirationYear;
    payment.Status = PaymentStatus.Pending.ToString();
    payment.CustomerName = CreditCardName;
    payment.TransactionType = TransactionType.Authorization.ToString();
    return payment;
}

    public override void PostProcess(IPayment payment)
    {
        throw new NotImplementedException();
    }

    public override bool ValidateData()
    {
        throw new NotImplementedException();
    }
}

In PostProcess method, we will get card information that was inputted

 
public override void PostProcess(IPayment payment)
{
    var creditCardPayment = (ICreditCardPayment)payment;
    var visibleDigits = 4;
    var cardNumberLength = creditCardPayment.CreditCardNumber.Length;
    creditCardPayment.CreditCardNumber = new string('*', cardNumberLength - visibleDigits)
        + creditCardPayment.CreditCardNumber.Substring(cardNumberLength - visibleDigits, visibleDigits);
}
public class AuthorizePaymentMethod : PaymentMethodBase
{
    public AuthorizePaymentMethod()
        : this(LocalizationService.Current, ServiceLocator.Current.GetInstance())
    {
    }

    public AuthorizePaymentMethod(LocalizationService localizationService, IOrderGroupFactory orderGroupFactory) : base(localizationService, orderGroupFactory)
    {
    }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardName")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardName")]
    public string CreditCardName { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardNumber")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber")]
    public string CreditCardNumber { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardSecurityCode")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode")]
    public string CreditCardSecurityCode { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationMonth")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationMonth")]
    public int ExpirationMonth { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationYear")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationYear")]
    public int ExpirationYear { get; set; }

    public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
    {
        var payment = orderGroup.CreateCardPayment(_orderGroupFactory);
        payment.CardType = "Credit card";
        payment.PaymentMethodId = PaymentMethodId;
        payment.PaymentMethodName = "Authorize";
        payment.Amount = amount;
        payment.CreditCardNumber = CreditCardNumber;
        payment.CreditCardSecurityCode = CreditCardSecurityCode;
        payment.ExpirationMonth = ExpirationMonth;
        payment.ExpirationYear = ExpirationYear;
        payment.Status = PaymentStatus.Pending.ToString();
        payment.CustomerName = CreditCardName;
        payment.TransactionType = TransactionType.Authorization.ToString();
        return payment;
    }

    public override void PostProcess(IPayment payment)
    {
        var creditCardPayment = (ICreditCardPayment)payment;
        var visibleDigits = 4;
        var cardNumberLength = creditCardPayment.CreditCardNumber.Length;
        creditCardPayment.CreditCardNumber = new string('*', cardNumberLength - visibleDigits)
            + creditCardPayment.CreditCardNumber.Substring(cardNumberLength - visibleDigits, visibleDigits);
    }

    public override bool ValidateData()
    {
        throw new NotImplementedException();
    }
}

ValidateData method, we will verify card data that was inputted

 
static readonly string[] ValidatedProperties =
{
    "CreditCardNumber",
    "CreditCardSecurityCode",
    "ExpirationYear",
    "ExpirationMonth",
};

public override bool ValidateData()
{
    foreach (string property in ValidatedProperties)
    {
        if (GetValidationError(property) != null)
        {
            return false;
        }
    }

    return true;
}

private string GetValidationError(string property)
{
    string error = null;

    switch (property)
    {
        case "CreditCardNumber":
            error = ValidateCreditCardNumber();
            break;

        case "CreditCardSecurityCode":
            error = ValidateCreditCardSecurityCode();
            break;

        case "ExpirationYear":
            error = ValidateExpirationYear();
            break;

        case "ExpirationMonth":
            error = ValidateExpirationMonth();
            break;

        default:
            break;
    }

    return error;
}

private string ValidateExpirationMonth()
{
    if (ExpirationYear == DateTime.Now.Year && ExpirationMonth < DateTime.Now.Month)
    {
        return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/ExpirationMonth");
    }

    return null;
}

private string ValidateExpirationYear()
{
    if (ExpirationYear < DateTime.Now.Year)
    {
        return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/ExpirationYear");
    }

    return null;
}

private string ValidateCreditCardSecurityCode()
{
    if (string.IsNullOrEmpty(CreditCardSecurityCode))
    {
        return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode");
    }

    if (!Regex.IsMatch(CreditCardSecurityCode, "^[0-9]{3}$"))
    {
        return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/CreditCardSecurityCode");
    }

    return null;
}

private string ValidateCreditCardNumber()
{
    if (string.IsNullOrEmpty(CreditCardNumber))
    {
        return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber");
    }

    return null;
}

public class AuthorizePaymentMethod : PaymentMethodBase
{
    static readonly string[] ValidatedProperties =
    {
        "CreditCardNumber",
        "CreditCardSecurityCode",
        "ExpirationYear",
        "ExpirationMonth",
    };

    public AuthorizePaymentMethod()
    : this(LocalizationService.Current, ServiceLocator.Current.GetInstance())
    {
    }

    public AuthorizePaymentMethod(LocalizationService localizationService, IOrderGroupFactory orderGroupFactory) : base(localizationService, orderGroupFactory)
    {
    }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardName")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardName")]
    public string CreditCardName { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardNumber")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber")]
    public string CreditCardNumber { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardSecurityCode")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode")]
    public string CreditCardSecurityCode { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationMonth")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationMonth")]
    public int ExpirationMonth { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationYear")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationYear")]
    public int ExpirationYear { get; set; }

    public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
    {
        var payment = orderGroup.CreateCardPayment(_orderGroupFactory);
        payment.CardType = "Credit card";
        payment.PaymentMethodId = PaymentMethodId;
        payment.PaymentMethodName = "Authorize";
        payment.Amount = amount;
        payment.CreditCardNumber = CreditCardNumber;
        payment.CreditCardSecurityCode = CreditCardSecurityCode;
        payment.ExpirationMonth = ExpirationMonth;
        payment.ExpirationYear = ExpirationYear;
        payment.Status = PaymentStatus.Pending.ToString();
        payment.CustomerName = CreditCardName;
        payment.TransactionType = TransactionType.Authorization.ToString();
        return payment;
    }

    public override void PostProcess(IPayment payment)
    {
        var creditCardPayment = (ICreditCardPayment)payment;
        var visibleDigits = 4;
        var cardNumberLength = creditCardPayment.CreditCardNumber.Length;
        creditCardPayment.CreditCardNumber = new string('*', cardNumberLength - visibleDigits)
            + creditCardPayment.CreditCardNumber.Substring(cardNumberLength - visibleDigits, visibleDigits);
    }

    public override bool ValidateData()
    {
        foreach (string property in ValidatedProperties)
        {
            if (GetValidationError(property) != null)
            {
                return false;
            }
        }

        return true;
    }

    private string GetValidationError(string property)
    {
        string error = null;

        switch (property)
        {
            case "CreditCardNumber":
                error = ValidateCreditCardNumber();
                break;

            case "CreditCardSecurityCode":
                error = ValidateCreditCardSecurityCode();
                break;

            case "ExpirationYear":
                error = ValidateExpirationYear();
                break;

            case "ExpirationMonth":
                error = ValidateExpirationMonth();
                break;

            default:
                break;
        }

        return error;
    }


    private string ValidateExpirationMonth()
    {
        if (ExpirationYear == DateTime.Now.Year && ExpirationMonth < DateTime.Now.Month)
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/ExpirationMonth");
        }

        return null;
    }

    private string ValidateExpirationYear()
    {
        if (ExpirationYear < DateTime.Now.Year)
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/ExpirationYear");
        }

        return null;
    }

    private string ValidateCreditCardSecurityCode()
    {
        if (string.IsNullOrEmpty(CreditCardSecurityCode))
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode");
        }

        if (!Regex.IsMatch(CreditCardSecurityCode, "^[0-9]{3}$"))
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/CreditCardSecurityCode");
        }

        return null;
    }

    private string ValidateCreditCardNumber()
    {
        if (string.IsNullOrEmpty(CreditCardNumber))
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber");
        }

        return null;
    }
}

And finally, we will need IDataErrorInfo for generate message on UI

 
public class AuthorizePaymentMethod : PaymentMethodBase, IDataErrorInfo
{
    public string Error
    {
        get { return null; }
    }

    public string this[string columnName]
    {
        get { return GetValidationError(columnName); }
    }
}
public class AuthorizePaymentMethod : PaymentMethodBase, IDataErrorInfo
{
    static readonly string[] ValidatedProperties =
    {
        "CreditCardNumber",
        "CreditCardSecurityCode",
        "ExpirationYear",
        "ExpirationMonth",
    };

    public AuthorizePaymentMethod()
    : this(LocalizationService.Current, ServiceLocator.Current.GetInstance())
    {
    }

    public AuthorizePaymentMethod(LocalizationService localizationService, IOrderGroupFactory orderGroupFactory) : base(localizationService, orderGroupFactory)
    {
    }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardName")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardName")]
    public string CreditCardName { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardNumber")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber")]
    public string CreditCardNumber { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/CreditCardSecurityCode")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode")]
    public string CreditCardSecurityCode { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationMonth")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationMonth")]
    public int ExpirationMonth { get; set; }

    [LocalizedDisplay("/Checkout/Payment/Methods/CreditCard/Labels/ExpirationYear")]
    [LocalizedRequired("/Checkout/Payment/Methods/CreditCard/Empty/ExpirationYear")]
    public int ExpirationYear { get; set; }

    public string Error
    {
        get { return null; }
    }

    public string this[string columnName]
    {
        get { return GetValidationError(columnName); }
    }

    public override IPayment CreatePayment(decimal amount, IOrderGroup orderGroup)
    {
        var payment = orderGroup.CreateCardPayment(_orderGroupFactory);
        payment.CardType = "Credit card";
        payment.PaymentMethodId = PaymentMethodId;
        payment.PaymentMethodName = "Authorize";
        payment.Amount = amount;
        payment.CreditCardNumber = CreditCardNumber;
        payment.CreditCardSecurityCode = CreditCardSecurityCode;
        payment.ExpirationMonth = ExpirationMonth;
        payment.ExpirationYear = ExpirationYear;
        payment.Status = PaymentStatus.Pending.ToString();
        payment.CustomerName = CreditCardName;
        payment.TransactionType = TransactionType.Authorization.ToString();
        return payment;
    }

    public override void PostProcess(IPayment payment)
    {
        var creditCardPayment = (ICreditCardPayment)payment;
        var visibleDigits = 4;
        var cardNumberLength = creditCardPayment.CreditCardNumber.Length;
        creditCardPayment.CreditCardNumber = new string('*', cardNumberLength - visibleDigits)
            + creditCardPayment.CreditCardNumber.Substring(cardNumberLength - visibleDigits, visibleDigits);
    }

    public override bool ValidateData()
    {
        foreach (string property in ValidatedProperties)
        {
            if (GetValidationError(property) != null)
            {
                return false;
            }
        }

        return true;
    }

    private string GetValidationError(string property)
    {
        string error = null;

        switch (property)
        {
            case "CreditCardNumber":
                error = ValidateCreditCardNumber();
                break;

            case "CreditCardSecurityCode":
                error = ValidateCreditCardSecurityCode();
                break;

            case "ExpirationYear":
                error = ValidateExpirationYear();
                break;

            case "ExpirationMonth":
                error = ValidateExpirationMonth();
                break;

            default:
                break;
        }

        return error;
    }


    private string ValidateExpirationMonth()
    {
        if (ExpirationYear == DateTime.Now.Year && ExpirationMonth < DateTime.Now.Month)
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/ExpirationMonth");
        }

        return null;
    }

    private string ValidateExpirationYear()
    {
        if (ExpirationYear < DateTime.Now.Year)
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/ExpirationYear");
        }

        return null;
    }

    private string ValidateCreditCardSecurityCode()
    {
        if (string.IsNullOrEmpty(CreditCardSecurityCode))
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardSecurityCode");
        }

        if (!Regex.IsMatch(CreditCardSecurityCode, "^[0-9]{3}$"))
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/ValidationErrors/CreditCardSecurityCode");
        }

        return null;
    }

    private string ValidateCreditCardNumber()
    {
        if (string.IsNullOrEmpty(CreditCardNumber))
        {
            return _localizationService.GetString("/Checkout/Payment/Methods/CreditCard/Empty/CreditCardNumber");
        }

        return null;
    }
}

Implement AuthorizeViewModel

AuthorizeViewModel is model for our view

 
public class AuthorizeViewModel : PaymentMethodViewModel
{
    public AuthorizeViewModel()
    {
        InitializeValues();
    }

    public List Months { get; set; }

    public List Years { get; set; }

    public void InitializeValues()
    {
        Months = new List();
        Years = new List();

        for (var i = 1; i < 13; i++)
        {
            Months.Add(new SelectListItem
            {
                Text = i.ToString(CultureInfo.InvariantCulture),
                Value = i.ToString(CultureInfo.InvariantCulture)
            });
        }

        for (var i = 0; i < 7; i++)
        {
            var year = (DateTime.Now.Year + i).ToString(CultureInfo.InvariantCulture);
            Years.Add(new SelectListItem
            {
                Text = year,
                Value = year
            });
        }
    }
}

Adding new payment to PaymentMethodViewModelResolver.cs

Adding those code below to Resolve paymentMethodName

 
case "Authorize":
    return new AuthorizeViewModel { PaymentMethod = new AuthorizePaymentMethod() };
public class PaymentMethodViewModelResolver
{
    public static IPaymentMethodViewModel Resolve(string paymentMethodName)
    {
        switch (paymentMethodName)
        {
            case "CashOnDelivery":
                return new CashOnDeliveryViewModel { PaymentMethod = new CashOnDeliveryPaymentMethod() };
            case "GenericCreditCard":
                return new GenericCreditCardViewModel { PaymentMethod = new GenericCreditCardPaymentMethod() };
            case "Authorize":
                return new AuthorizeViewModel { PaymentMethod = new AuthorizePaymentMethod() };
        }

        throw new ArgumentException("No view model has been implemented for the method " + paymentMethodName, "paymentMethodName");
    }
}
So, we're done with server side. Now, we will add payment view.

Adding payment view

In Views/Checkout folder, add view: _AuthorizePaymentMethod.cshtml.

View _AuthorizePaymentMethod.cshtml was used for inputting card information.

 
@model EPiServer.Reference.Commerce.Site.Features.Payment.ViewModels.AuthorizeViewModel

@Html.HiddenFor(model => model.PaymentMethod.PaymentMethodId)

<div class="form-group">
    @Html.LabelFor(model => model.PaymentMethod.CreditCardName)
    @Html.TextBoxFor(model => model.PaymentMethod.CreditCardName, new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.PaymentMethod.CreditCardName)
</div>

<div class="row">
    <div class="form-group col-md-6">
        @Html.LabelFor(model => model.PaymentMethod.CreditCardNumber)
        @Html.TextBoxFor(model => model.PaymentMethod.CreditCardNumber, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.PaymentMethod.CreditCardNumber)
    </div>
    <div class="form-group col-md-6">
        @Html.LabelFor(model => model.PaymentMethod.CreditCardSecurityCode)
        @Html.TextBoxFor(model => model.PaymentMethod.CreditCardSecurityCode, new { @class = "form-control", maxlength = "3" })
        @Html.ValidationMessageFor(model => model.PaymentMethod.CreditCardSecurityCode)
    </div>
</div>

<div class="row">
    <div class="form-group col-md-6">
        @Html.LabelFor(model => model.PaymentMethod.ExpirationYear)
        @Html.DropDownListFor(model => model.PaymentMethod.ExpirationYear, Model.Years, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.PaymentMethod.ExpirationYear)
    </div>

    <div class="form-group col-md-6">
        @Html.LabelFor(model => model.PaymentMethod.ExpirationMonth)
        @Html.DropDownListFor(model => model.PaymentMethod.ExpirationMonth, Model.Months, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.PaymentMethod.ExpirationMonth)
    </div>
</div>

Sample_images

In Views/OrderConfirmation folder, add view: _AuthorizeConfirmation.cshtml.

View _AuthorizeConfirmation.cshtml was used for showing card information in purchase order.

 
@model EPiServer.Commerce.Order.ICreditCardPayment 

<div class="quicksilver-well">
    <h4>@Html.Translate("/OrderConfirmation/PaymentDetails")</h4>
    <p>
        @Html.Translate("/OrderConfirmation/PaymentInfo/CardType"): @Model.CardType<br>
        @Html.Translate("/OrderConfirmation/PaymentInfo/Owner"): @Model.CustomerName<br>
        @Html.Translate("/OrderConfirmation/PaymentInfo/CardNumber"): ************@Model.CreditCardNumber.Substring(Model.CreditCardNumber.Length - 4)<br>
        @Html.Translate("/OrderConfirmation/PaymentInfo/ExpirationDate"): @Model.ExpirationMonth/@Model.ExpirationYear<br>
        @Html.Translate("/OrderConfirmation/PaymentInfo/CVV"): ***
    </p>
</div>

Sample_images

Remember that those view name must be _{SystemName}PaymentMethod.cshtml and _{SystemName}Confirmation.cshtml.

So, we finished implement authorize.net payment provider on Quicksilver. Now rebuild project, open Quicksilver, add an item to cart, checkout cart to see how it work.

You could download the code in this post from GitHub as well.

 

Hope this help you.

/Son Do

Jan 11, 2017

Comments

Please login to comment.
Latest blogs
A day in the life of an Optimizely OMVP - Opticon London 2025

This installment of a day in the life of an Optimizely OMVP gives an in-depth coverage of my trip down to London to attend Opticon London 2025 held...

Graham Carr | Oct 2, 2025

Optimizely Web Experimentation Using Real-Time Segments: A Step-by-Step Guide

  Introduction Personalization has become de facto standard for any digital channel to improve the user's engagement KPI’s.  Personalization uses...

Ratish | Oct 1, 2025 |

Trigger DXP Warmup Locally to Catch Bugs & Performance Issues Early

Here’s our documentation on warmup in DXP : 🔗 https://docs.developers.optimizely.com/digital-experience-platform/docs/warming-up-sites What I didn...

dada | Sep 29, 2025

Creating Opal Tools for Stott Robots Handler

This summer, the Netcel Development team and I took part in Optimizely’s Opal Hackathon. The challenge from Optimizely was to extend Opal’s abiliti...

Mark Stott | Sep 28, 2025

Integrating Commerce Search v3 (Vertex AI) with Optimizely Configured Commerce

Introduction This blog provides a technical guide for integrating Commerce Search v3, which leverages Google Cloud's Vertex AI Search, into an...

Vaibhav | Sep 27, 2025

A day in the life of an Optimizely MVP - Opti Graph Extensions add-on v1.0.0 released

I am pleased to announce that the official v1.0.0 of the Opti Graph Extensions add-on has now been released and is generally available. Refer to my...

Graham Carr | Sep 25, 2025