Tuesday, 11 March 2014

Secure Payment Form (SPF) integration using QSS service of Quadrant.




As we know that online payment processing of credit cards is very common now a days in e-commerce web applications. But frauds related to credit card uses has also increased and to avoid that PCI compliance has been published for sites which are providing online payment processing. 

Know more about PCI compliance at below URL.

But this is not possible for all the e-commerce sites to fulfill all PCI compliance. So, there are some providers who provides feature of payment gateway integration as per PCI compliance through exposed web services. QSS is similar service provided by Quadrant. Today we are going to integrate Payment gateway using QSS secure payment form option which is PCI compliance.

Below are the steps to load Secure Payment Form (SPF) in your application.
1.       Add page to load SPF form.
2.       Collect all required data to load SPF form.
3.       Create SPF form URL to load in iframe.
4.       Create and add postback page in your application.
5.       Test loaded SPF form with test credit card.

Step 1: - Add page to load SPF form.
Create an intermediate page (ProcessPayment.aspx) to load SPF form in your application to process payment and add below code.
<iframe id="Iframe1" src="<%# spfURLWithParams %>" runat="server" frameborder="0"
            marginwidth="1" style="position: absolute; top: 100px; width: 800px; height: 400px;
            border: solid 1 px"></iframe>

Above iframe is used to load SPF form according to parameters provided in “spfURLWithParams”.
Add hidden field to contain generated URN (Unique Reference Number) after payment submission as shown below.
    <%--Updated with URN number from Quadrant--%>
    <asp:HiddenField ID="hdncardpayments" runat="server" />




Now add JavaScript function as below and call on OnLoad event of html body as shown below.
<script language="Javascript" type="text/javascript">
        function OnLoadEvent() {
            if (window.location.hash.length > 1) {
                var d = window.location.hash;
                if (d.indexOf('#', 0) == 0) {
                    d = d.substr(1, d.length - 1);
                }
                var doc = parent.parent.document;
                var hf = doc.getElementById('hdncardpayments');
                if (hf) {
                    hf.value = d;
                    doc.forms[0].submit();
                }
            }
        }
</script>

 <body onload="OnLoadEvent();">

So finally your page should look as below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProcessPayment.aspx.cs"
    Inherits="ProcessPayment" %>

<% Response.CacheControl = "no-cache"; %>
<% Response.AddHeader("Pragma", "no-cache"); %>
<% Response.Expires = -1; %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="Javascript" type="text/javascript">
        function OnLoadEvent() {
            if (window.location.hash.length > 1) {
                var d = window.location.hash;
                if (d.indexOf('#', 0) == 0) {
                    d = d.substr(1, d.length - 1);
                }
                var doc = parent.parent.document;
                var hf = doc.getElementById('hdncardpayments');
                if (hf) {
                    hf.value = d;
                    doc.forms[0].submit();
                }
            }
        }
    </script>
</head>
<body onload="OnLoadEvent();">
    <form id="form1" runat="server">
    <div>
        <iframe id="Iframe1" src="<%# spfURLWithParams %>" runat="server" frameborder="0"
            marginwidth="1" style="position: absolute; top: 100px; width: 800px; height: 400px;
            border: solid 1 px"></iframe>
    </div>
   
    <%--Updated with URN number from Quadrant--%>
    <asp:HiddenField ID="hdncardpayments" runat="server" />

    </form>
</body>
</html>

Step 2: - Collect all required data to load SPF form.

Fetch and collect following required data to load SPF form as shown below.

//Required input parameters
//Fill properties
string _name = string.Empty;
string _address1 = string.Empty;
string _address2 = string.Empty;
string _city = string.Empty;
string _county = string.Empty;
string _postCode = string.Empty;
string _country = string.Empty;
string _emailID = string.Empty;
string _isContinuous = string.Empty; //False for subscription.

string _priceData = string.Empty;
string _CartID = "0"; // string.Empty;
string _publisherCode = string.Empty; //Company Account name which has membership for QSS service.
string _jCode = string.Empty; //”FWE” as default
string _channelCode = "0";
string _customerPresent = "True"; //“True” or “False” (use false if site if for agents or customer services) Must be True for real-time payments.
string _site = string.Empty;
//string _sessionID = string.Empty;
string _collectionType = "Batch"; //“Batch” or “Authorise”. What type of collection is this payment? “Batch” for Batch Payments, “Authorise” for Authorised Payments.
string _returnType = "BatchID"; //Unspecified or "BatchID" (see Return Type section)
string _cardType = string.Empty;
string _showInvoice = "N";
string _collectionSource = "AMPS";
string _countryCode = string.Empty;
string _CVV = string.Empty;

Provide comma separated list of values to allow card types for payment as per below values.

Switch = 1,
Maestro = 2,
Visa = 3,
American_Express = 4,
Mastercard = 5,
Diners_Club = 6


So, if you want to provide Visa and Master card as choice for payment then _cardType variable should be configured to following value.
_cardType = "3,5";

Price data is requested in a specific format to process as below.
ST*1Y-99.00

Where
ST is currency.
1Y is 1 year subscription (can be used as default).
99.00 is amount to be processed.

Step 3: - Create SPF form URL to load in iframe.
Now as we have all required data with us. So next step is to create URL with all data as parameter to load SPF form. SPF URL generation contains three steps as below.

a)      Create Hash table with all parameter data.
Add all parameter in hash table as shown below.
//Build hash table.

inputParams.Add("Name", _name);
inputParams.Add("Add1", _address1);
inputParams.Add("Add2", _address2);
inputParams.Add("City", _city);
inputParams.Add("County", _county);
inputParams.Add("Postcode", _postCode);
inputParams.Add("Country", _country);
inputParams.Add("EmailID", _emailID);
inputParams.Add("JCode", _jCode);
inputParams.Add("PriceData", _priceData);
inputParams.Add("IsContinuous", _isContinuous);
inputParams.Add("countryCode", _countryCode);
inputParams.Add("CardTypes", _cardType);
inputParams.Add("CVV", _CVV);
inputParams.Add("CartID", _CartID); //No longer required.
inputParams.Add("PublisherCode", _publisherCode);
inputParams.Add("ChannelCode", _channelCode);
inputParams.Add("CustomerPresent", _customerPresent); //“True” or “False” (use false if site if for agents or customer services) Must be True for real-time payments.
inputParams.Add("Site", _site);
inputParams.Add("SessionID", Session.SessionID.ToString()); //sessionID);
inputParams.Add("CollectionType", _collectionType);
inputParams.Add("ReturnType", _returnType);
inputParams.Add("collectionSource", _collectionSource);
inputParams.Add("ShowInvoiceOption", _showInvoice);


b)      Convert to single string separated by separator (i.e. ‘|’) as below.
//To do: Build separator separated string.
      string qString = string.Empty;
   foreach (string k in inputParams.Keys)
   {
                    qString += k + "=" + inputParams[k].ToString() + "|";
}

c)       Encrypt data as shown below with encryption method as provided in class library available for members of QSS service after account purchase.
// Encrypt string.
QSS.Security.Cryptography cp = new QSS.Security.Cryptography();
qString = cp.Encrypt(qString);

d)      Append encrypted data in base SPF URL as below for UAT. (This is dummy URL, There are different real URLs for UAT/Live environment as will be provided with your account details)
string spfURL = "https://ServiceDomain.com/form.aspx";
string spfURLWithParams = spfURL + "?cardselected=True?";

e)      Append postback page URL. (Update accordingly when deploying on server)
string postBackURL = "http://localhost/payment.aspx";
spfURLWithParams  += postBackURL + "?" + HttpUtility.UrlEncode(encryptedInputParams);

Finally bind data to page using below line of code.
Page.DataBind();

Step 4: - Create and add postback page in your application.
Create a new page in your application and copy and paste below code in it which is used to redirect back to “ProcessPayment.aspx” after processing with generated URN number.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="payment.aspx.cs" Inherits="CRM_Quadrant.payment" %>

<% Response.CacheControl = "no-cache"; %>
<% Response.AddHeader("Pragma", "no-cache"); %>
<% Response.Expires = -1; %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="Javascript" type="text/javascript">
        function OnLoadEvent() {
            if (window.location.hash.length > 1) {
                alert(window.location);
                alert(window.location.hash);
                var d = window.location.hash;
                alert(d);
                alert(d.indexOf('#', 0));
                if (d.indexOf('#', 0) == 0) {
                    d = d.substr(1, d.length - 1);
                }
                var doc = parent.parent.document;
                var hf = doc.getElementById('hdncardpayments');
                if (hf) {
                    hf.value = d;
                    doc.forms[0].submit();
                }
            }
        }
    </script>
</head>
<body onload="OnLoadEvent();">
    <form id="form1" runat="server">
   
    <div>
        <%--Updated with URN number from Quadrant--%>
        <asp:HiddenField ID="hdncardpayments" runat="server" />
    </div>
    </form>
</body>
</html>

Step 5: - Test SPF form with test credit card.
Now as we done with all coding stuffs to load SPF form. So, when you load ProcessPayment.aspx you should see loaded SPF form with input fields for credit card details. You can use test credit card for testing purpose and if you received URN number in Hidden field as placed on “ProcessPayment.aspx” then we are good.
Test Visa credit card number – 4111111111111111

Important points.
1.       You must have service account in QSS.
2.       Library project should be configured in your application for encryption/decryption as received from QSS with service account.
3.       SPF base URL should be used as per environment being used (i.e. UAT/Live).
Here I have provided very high level integration details for SPF form integration. You can have more details once you purchase service account but you have enough information to explore at your own.
Keep exploring J J J

No comments:

Post a Comment