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

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

 

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, SDKs and Tools Downloads

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

See Also