Payment Gateway Integration within MVC – Accept Hosted

Accept Hosted:

Accept Hosted is a mobile-optimized payment form hosted by Authorize.Net. It enables you to use the Authorize.Net API to submit payment transactions while maintaining SAQ-A level PCI compliance. You can redirect customers to the Accept Hosted payment form or embed the payment form directly in your own page.


How to Integrate Payment Gateway in

There are three step of process:

  1. Requesting the form token.
  2. Embed the payment form or redirect the customer to the payment form by sending an HTML POST containing the form token.
  3. Your customer completes and submits the payment form. The API sends the transaction to Authorize.Net for processing. The customer is returned to your site, which displays a result page based on the URL followed or the response details sent.

Now we will see the whole process with the example including the code:

Requesting the Form token:

The Accept Hosted process starts with a getHostedPaymentPageRequest API call. The response contains a form token that you can use in a subsequent request to display the hosted payment form.

Note that Form token is Valid for 15 minutes only.

This API call contains two primary element :

  1. Transaction Request: it contains transaction information.
  2. HostedPaymentSettings: It contains the settings that control the Payment form for the transaction.


The transactionRequest element contains transaction details and values that can be used to populate the form fields. It uses the same child elements as the transactionRequest element in createTransactionRequest. Only the transactionType and amount elements are required.

Example:    var transactionRequest = new transactionRequestType


transactionType = transactionTypeEnum.authCaptureTransaction.ToString(),

amount = objPayment.amount,



This is use to control the payment form. There is one element HostedPaymentSettings within the getHostedPaymentPageRequest API call. Below table contains the all the parameters settings. The values for all parameters sent within hostedPaymentSettings are sent as JSON objects, regardless of whether you sent the getHostedPaymentPageRequest API call in JSON or XML format.

Settings Name Parameters Description
hostedPaymentReturnOptions {“showReceipt”: true, “url”: “”, “urlText”: “Continue”, “cancelUrl”: “”, “cancelUrlText”: “Cancel”} Use these options to control the receipt page, return URLs, and buttons for both the payment form and the receipt page.
hostedPaymentButtonOptions {“text”: “Pay”} Use to set the text on the payment button.
hostedPaymentStyleOptions {“bgColor”: “red”} Use to set the accent color of the form, including button and field line colors.
hostedPaymentPaymentOptions {“cardCodeRequired”: false, “showCreditCard”: true, “showBankAccount”: true, “customerProfileId”: false} Use to control which payment options to display on the hosted payment form. By Default card CodeRequired and customerProfileId are false, and showCreditCard and showBankAccount are true.
hostedPaymentVisaCheckoutOptions {“apiKey”:”Your Visa SRC API key”,”displayName”:”DISPNAME”,”message”:”MESSAGE”} Adds Visa SRC as a payment option.
hostedPaymentSecurityOptions {“captcha”: false} Use to enable or disable CAPTCHA security on the form. Defaults to false.
hostedPaymentShippingAddressOptions {“show”: false, “required”: false} Use show to enable or disable the shipping address on the form. Use required to require the shipping address. Both show and required default to false.
hostedPaymentBillingAddressOptions {“show”: true, “required”: false} Use show to enable or disable the billing address on the form. Defaults to true. Use required to require the billing address. Defaults to false.
hostedPaymentCustomerOptions {“showEmail”: false, “requiredEmail”: false, “addPaymentProfile”: true} Use showEmail to enable or disable the email address on the form. Use requiredEmail to require the email address. Both showEmail and requiredEmail default to false.Use addPaymentProfile to enable the customer to add a new form of payment to their customer profile.
hostedPaymentOrderOptions {“show”: true, “merchantName”: “XYZ”} Use show to enable or disable the display of merchantName on the hosted receipt page. Defaults to true. Use merchantName to define how the merchant name appears on the receipt.
hostedPaymentIFrameCommunicatorUrl {“url”: “”} Use url to set the URL of a page that can communicate with the merchant’s site using JavaScript. Required for iframe or lightbox applications.



Below is the Code example to implement Accept Hosted Payment Transaction within mvc


public class PaymentModel


public string token { get; set; }


public string actionURl { get; set; }


public decimal amount { get; set; }


MVC Controller File

public ActionResult DoPayment()




PaymentModel objPayment = new PaymentModel();

objPayment.amount = Convert.ToDecimal(50);

ApiOperationBase<ANetApiRequest, ANetApiResponse>.RunEnvironment = AuthorizeNet.Environment.SANDBOX;

objPayment.actionURl = ConfigurationManager.AppSettings[“PaymentURL”]; ////””;


// define the merchant information (authentication / transaction id)

ApiOperationBase<ANetApiRequest, ANetApiResponse>.MerchantAuthentication = new merchantAuthenticationType()


name = ConfigurationManager.AppSettings[“APILoginId”],//”4J7Z4ymG”,

ItemElementName = ItemChoiceType.transactionKey,

Item = ConfigurationManager.AppSettings[“TransactionKey”] //// “8sM38B8v2Wwcs354”,



settingType[] settings = new settingType[10];


settings[0] = new settingType();

settings[0].settingName = settingNameEnum.hostedPaymentBillingAddressOptions.ToString();

settings[0].settingValue = “{\”show\”: true, \”required\”:true}”;


settings[1] = new settingType();

settings[1].settingName = settingNameEnum.hostedPaymentButtonOptions.ToString();

settings[1].settingValue = “{\”text\”: \”Pay\”}”;


settings[2] = new settingType();

settings[2].settingName = settingNameEnum.hostedPaymentCustomerOptions.ToString();

settings[2].settingValue = “{\”showEmail\”:true,\”requiredEmail\”:true}”;


settings[3] = new settingType();

settings[3].settingName = settingNameEnum.hostedPaymentOrderOptions.ToString();

settings[3].settingValue = “{\”show\”: true}”;


settings[4] = new settingType();

settings[4].settingName = settingNameEnum.hostedPaymentPaymentOptions.ToString();

settings[4].settingValue = “{\”cardCodeRequired\”:false}”;


settings[5] = new settingType();

settings[5].settingName = settingNameEnum.hostedPaymentReturnOptions.ToString();


settings[5].settingValue = “{\”showReceipt\”: true,\”url\”:\”” + Request.Url.AbsoluteUri.Replace(“DoPayment”, “RedirectFromPayment”) + “\”,\”urlText\”:\”Continue\”,\”cancelUrl\”:\”” + Request.Url.AbsoluteUri.Replace(“DoPayment”, “CancelFromPaypal”) + “\”,\”cancelUrlText\”:\”Cancel\”}”;

settings[6] = new settingType();

settings[6].settingName = settingNameEnum.hostedPaymentSecurityOptions.ToString();

settings[6].settingValue = “{\”captcha\”: false}”;


settings[7] = new settingType();

settings[7].settingName = settingNameEnum.hostedPaymentShippingAddressOptions.ToString();

settings[7].settingValue = “{\”show\”:false,\”required\”:false}”;


settings[8] = new settingType();

settings[8].settingName = settingNameEnum.hostedPaymentStyleOptions.ToString();

settings[8].settingValue = “{\”bgColor\”: \”red\”}”;


var orderType = new orderType


description = “Product Registrtion”,



var transactionRequest = new transactionRequestType


transactionType = transactionTypeEnum.authCaptureTransaction.ToString(),    // charge the card

amount = objPayment.amount,

order = orderType,



var request = new getHostedPaymentPageRequest();

request.transactionRequest = transactionRequest;

request.hostedPaymentSettings = settings;


ServicePointManager.SecurityProtocol = SecurityProtocolType.Ssl3 | SecurityProtocolType.Tls12 | SecurityProtocolType.Tls11 | SecurityProtocolType.Tls;


// instantiate the contoller that will call the service

var controller = new getHostedPaymentPageController(request);



// get the response from the service (errors contained if any)

var response = controller.GetApiResponse();



if (response != null && response.messages.resultCode == messageTypeEnum.Ok)


objPayment.token = response.token;



return View(“DoPayment “, objPayment);

} catch (Exception ex)



return Json(new { success = false, message = ex.Message });



public ActionResult RedirectFromPayment ()


// This method calls when payment get success for sure. Write the code after payment successfull


public ActionResult CancelFromPaypal ()

{     // This method calls when payment get cancel or not success. Write the code of cancelation or warning


MVC View – DoPayment.CSHTML

@model PaymentModel



ViewBag.Title = “payment”;

Layout = null;




@*<div id=”iframe_holder” class=”center-block” style=”width:90%;max-width: 1000px”>

<iframe id=”add_payment” class=”embed-responsive-item panel” name=”add_payment” height=”200%” width=”100%” frameborder=”0″ scrolling=”no” hidden=”true”></iframe>


<form name=”formpaynow” id=”formpaynow” method=”post” action=@Model.actionURl >

<input type=”hidden” value=”@Model.token” id=”token” name=”token” />




<script src=”~/Scripts/jquery-1.10.2.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {



var form = $(“form”);


//$(window).scrollTop($(‘#add_payment’).offset().top – 50);




Blog by: Kajal

Get a Quote