-
Home
Training
Interviews
Resources
Blog
Developer Relations Conference
Developer Marketing Summit
Evans Data Corp.
Conference Slides
Jobs
Post a Job
Directory
Using C#, MVC and .NET to build an eCommerce Hosted Checkout Application
This Vantiv Development-in-Action topic, digs into the Hosted Checkout application development integration capability using the Vantiv eCommerce platform. This Vantiv Developer-in-Action will show you how to use the eCommerce platform with the .NET SDK and C#. The Vantiv eCommerce platform provides rich payment processing features that developers can use to build flexible and powerful payment enabled applications. In most cases, all of the advanced features of Vantiv’s eCommerce platform are available regardless of the integration method chosen. The exception is batch functionality with requires that transactions be submitted as XML . The eCommerce SDKs are designed for use with online processing only.
Using the video, knowledge and resources on this page you will learn how to download the sample MVC based C# .NET project, load the project into Visual Studio, explore the sample application source code, see the application in action, and learn how to find additional resources to help you in your own application development projects.
Index
- Overview
- New to the eCommerce API? Read this First
- Tools/APIs/SDKs used
- Demo Video – Hosted Checkout
- Step by Step Tutorial / Code Snippets
- Sample Code, SDKs and Tools Downloads
- Supported Browsers
- Supported Devices
- Additional Development Resources
- See Also
Overview
The Visual Studio C# MVC .NET website sample application shows how to integrate to Vantiv’s eCommerce Hosted Checkout platform. The sample application uses an iFrame and performs styling of the hosted site using CSS.
The sample application implements a Vantiv Pro Shop application that allows golfers to reserve tee times and purchase some golf balls. After the user clicks the “book” button, the browser is redirected to the hosted checkout page embedded in an iFrame. The user enters their credit card information, and the authorization happens on the eCommerce platform. After the authorization occurs, the code calls the VerifyPayment to get additional transaction information to display to the golfer.
Hosted Checkout also allows developers to do some CSS styling for the browser interface. This sample application includes code to upload the CSS to the eCommerce platform.
New to the eCommerce API? Read this First
If you are new to the Vantive Commerce API, you might start by reading the blog post, “Getting started with Vantiv’s eCommerce SDK“. This article gives you an overview of how to get started using the eCommerce API and shows how you can quickly be productive testing payment transactions against Vantiv’s eCommerce sandbox.
Tools/APIs/SDKs used
- Microsoft Visual Studio Express 2013 for Web
- eCommerce API
- .NET SDK
Demo Video – Hosted Checkout
By Dan Ourada, Technology Evangelist, Vantiv
Video posted on the Vantiv Developers YouTybe Channel on Sep 26, 2016
Duration: 8 minutes and 25 seconds
Resolution: 720p
Step by Step Tutorial / Code Snippets
Complete Step by Step Tutorial with screen shots and code – Coming Soon 🙂
Screen Shots of the Hosted Checkout Application

Web home page for the Hosted Checkout sample Application

iFrame asking for the credit card information

Page showing the payment authorization returned response information
Payment Processing
Step 1: Initialize Payment
Note: req.DisplayStyle = “custom” — this allows for custom styling attributes via a CSS upload mechanism.
HCService.HCServiceSoapClient client = new HCService.HCServiceSoapClient(); HCService.InitPaymentRequest req = new HCService.InitPaymentRequest(); req.MerchantID = merchantId; req.Password = password; req.Invoice = "1234"; req.TotalAmount = 1.23; req.TaxAmount = 0; req.TranType = "Sale"; req.Frequency = "OneTime"; req.Memo = "dano test"; req.ProcessCompleteUrl = "http://localhost:51619/Home/Complete"; req.ReturnUrl = "http://localhost:51619/Home/Return"; req.OperatorID = "test"; req.DisplayStyle = "custom"; req.CancelButton = "on"; var resp = client.InitializePayment(req);
Step 2: Display HostedCheckout
In the Home Controller’s Buy action we are setting the ViewBag.URL property to the URL of the hosted checkout page and appending the PaymentID returned in the response. We will use this ViewBag property when rendering the page in the View.
ViewBag.URL = "https://hc.mercurycert.net/CheckoutIFrame.aspx?ReturnMethod=get&pid=" + resp.PaymentID;
This code is in the Buy.cshtml View. Notice we are setting the src property of the iframe to the ViewBag.URL that we set above. When we set this src property and the iframe renders the iframe will be redirected to the Hosted Checkout page where the customer will enter their card data.
<div class="row"> <iframe id="ifrm" style="text-align: center;" src="@ViewBag.URL" width="550" height="550" frameborder="0" scrolling="auto"> Your browser does not support iFrames. To view this content, please download and use the latest version of one of the following browsers: Internet Explorer, Firefox, Google, Chrome or Safari. </iframe> </div>
Step 3: Verify Payment
After the customer enters their card data and presses submit the payment is processed. When payment processing is complete the browser is redirected to the ProcessCompleteUrl sent during InitializePayment. At that point the VerifyPayment method is called to gain access to all of the properties of the response.
HCService.HCServiceSoapClient client = new HCService.HCServiceSoapClient(); HCService.PaymentInfoRequest req = new HCService.PaymentInfoRequest(); req.MerchantID = merchantId; req.Password = password; req.PaymentID = PaymentID; var resp = client.VerifyPayment(req);
CSS Styling
Make sure to set DisplayStyle = “custom” in the InitPayment call to allow CSS customization.
There are two webmethods that will help you perform CSS styling of the hosted page and are shown below. After uploading the initial CSS you can modify the CSS by calling UploadCSS again which will overwrite the original. The only reason to call RemoveCSS is if you no longer require CSS customization or to test/validate that your CSS customizations are taking effect.
UploadCSS
HCService.CssUploadRequest request = new HCService.CssUploadRequest(); request.MerchantID = merchantId; request.Password = password; request.Css = "{Include Valid CSS here}"; HCService.HCServiceSoapClient client = new HCService.HCServiceSoapClient(); HCService.CssAdminResponse response = new HCService.CssAdminResponse(); response = client.UploadCSS(request);
RemoveCSS
var request = new HCService.CssRemoveRequest(); request.MerchantID = merchantId; request.Password = password;var client = new HCService.HCServiceSoapClient(); var response = client.RemoveCSS(request);
Hosted Checkout Guides
- Hosted Checkout eCommerce Integration Guide – https://developer.vantiv.com/docs/DOC-1354
- Hosted Checkout POS Integration Guide – https://developer.vantiv.com/docs/DOC-1437
- Hosted Checkout POS E2E Integration Guide – https://developer.vantiv.com/docs/DOC-1447
- Hosted Checkout CSS Functionality – https://developer.vantiv.com/docs/DOC-1442
- Hosted Checkout Testing Guide – https://developer.vantiv.com/docs/DOC-1349
Sample Code, SDKs and Tools Downloads
- Visual Studio C# Sample Project – https://github.com/MercuryPay/HostedCheckout.MVC.CSharp
- .NET SDK for eCommerce – https://github.com/LitleCo/litle-sdk-for-dotNet/releases
- Visual Studio Community Edition (formerly known as Express Edition) – https://www.visualstudio.com/vs/visual-studio-express/
Supported Browsers
(Note: from the reference document last updated September 2016)
- Internet Explorer 10
- Firefox 32.0.3
- Google Chrome 38.0.2125.104
- Safari 5 on iPhone
Supported Devices
(Note: from the reference document last updated September 2016)
- iPhone4 and 5, iOS 6.1.6
- HTC Windows Phone
- Galaxy S
- Android Smartphone and Tablet/Android 2.2, 2.3
- BlackBerry/OS6, OS7
- Windows Phone 7.5
- Kindle Fire
Additional Development Resources
- Choosing the right integration method – https://developer.vantiv.com/docs/DOC-1151
- About the eCommerce SDKs – https://developer.vantiv.com/docs/DOC-1144
- XML Integrations – https://developer.vantiv.com/docs/DOC-1137
- eCommerce Blog – https://developer.vantiv.com/community/ecommerce/blog
See Also
- Technical Product Demos – Integrated Payments YouTube Channel Playlist – https://www.youtube.com/playlist?list=PLpj0a-Besn69ZTqdoFwU_IO17X9Vz69mR
- Getting started with Vantiv’s Express API – https://developer.vantiv.com/community/ecommerce/blog/2016/05/18/getting-started-with-vantiv-s-ecommerce-sdk
- Hosted Checkout Sample PHP Integration – https://github.com/MercuryPay/HostedCheckout.PHP
- Payment APIs Demystified – Five Common Types – https://developer.vantiv.com/community/news-and-communications/blog/2017/04/18/payment-apis-demystified-five-common-types
- Mobile Payments and Digital Wallets – https://developer.vantiv.com/community/mobile/pages/ecommerce
- Apple Pay App showing integration to Vantiv Integrated Payments – https://github.com/MercuryPay/applepay-demo-app-swift
- Microsoft MSDN ASP.NET MVC Overview – https://msdn.microsoft.com/en-us/library/dd381412(v=vs.108).aspx
- Join the Vantive Tech Tribe – https://developer.vantiv.com/community/members-corner