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
- Tools/APIs/SDKs used
- Demo Video - Hosted Checkout
- Step by Step Tutorial / Code Snippets
- Sample Code and Tools Downloads
- 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 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
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 CSS Functionality - https://developer.vantiv.com/docs/DOC-1442
- Hosted Checkout Testing Guide - https://developer.vantiv.com/docs/DOC-1349
Sample Code and Tools Downloads
- Visual Studio C# Sample Project - https://github.com/MercuryPay/HostedCheckout.MVC.CSharp
- Visual Studio 2017 Community Edition (an updated alternative to Visual Studio Express) - https://www.visualstudio.com/vs/visual-studio-express/
Additional Vantiv eCommerce (Litle) Development Resources
- Choosing the right integration method - https://developer.vantiv.com/docs/DOC-1151
- About the Vantiv 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-ecomm...
- 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-demystif...
- 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
