davidi99

Using C#, MVC and .NET to build an eCommerce Hosted Checkout Application

Blog Post created by davidi99 on May 9, 2017

This blog post, digs into the Hosted Checkout application development integration capability using the MercuryPay platform. I've collected several Vantiv O.N.E. resources into a single post to show you how to use the various eCommerce solutions, based on the platform merchants can onboard for live transaction processing. I successfully tested the example using the latest Visual Studio 2017 Community Edition.

 

The  Vantiv eCommerce platform (originally Litle) 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 Hosted Checkout and Hosted Payments. These two solutions run on the Integrated Payments platform (originally Element and Mercury).

 

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

The Visual Studio C# MVC .NET website sample application shows how to integrate to Vantiv's eCommerce Hosted Checkout solution. 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.

 

Tools/APIs/SDKs used

  • Microsoft Visual Studio 2017 Community Edition
  • eCommerce API
  • .NET SDK

 

Demo Video - Hosted Checkout

 

YouTube: Hosted Checkout video by Dan Ourada

By Dan Ourada, Technology Evangelist, Vantiv

Video posted on the Vantiv Developers YouTube Channel on Sep 26, 2016

Duration: 8 minutes and 25 seconds

Resolution: 720p

 

Step by Step Tutorial / Code Snippets

 

The following screen shots, code snippets, and notes are taken from the GitHub readme file. I successfully tested the Hosted Checkout application using the latest Visual Studio 2017 Community Edition.

 

Screen Shots of the Hosted Checkout Application

 

screenshot1

Web home page for the Hosted Checkout sample Application

 

screenshot2

iFrame asking for the credit card information

 

screenshot3

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

 

Sample Code and Tools Downloads

 

Additional Vantiv eCommerce (Litle) Development Resources

 

See Also

Outcomes