The CreditCheck.aspx page is linked from the SubmitForm.aspx page, having been passed form information concerning the customer's order. The page shown below is displayed to collect credit card information and to pass approval and processing results back to the eCommerce site. This page is assumed to be external to the eCommerce site. Often times the credit card processing service permits use of logos and styling schemes to format the page to resemble a page from the merchant site.
Credit Processing Form
The layout of the CreditCheck.aspx page is shown below. No special form display or editing controls are used. Standard server controls are formatted in a table for layout.
<html> <head> <title>Credit Check</title> <link href="stylesheetEC.css" rel="stylesheet"> </head> <body> <form Runat="Server"> <table id="MasterTable" border="0" cellspacing="0" width="100%"> <tr> <td id="HeaderCell"> webWarehouse.com </td> </tr> </table> <br/> <asp:Label id="ReturnURL" Visible="False" Runat="Server"/> <asp:Label id="Instructions" Runat="Server" Text="Enter the requested information to complete your order with "/> <asp:Label id="MerchantID" Font-Bold="True" Runat="Server"/>.<br/><br/> <table border="0"> <tr> <th> Customer ID: </th> <td colspan="5"> <asp:Label id="CustomerID" Runat="Server" Font-Bold="True"/> <asp:Label id="Approved" Runat="Server" ForeColor="#FF0000" Font-Bold="True"/> </td> </tr> <tr> <th> Order Amount: </th> <td colspan="5"> <asp:Label id="OrderTotal" Runat="Server" Font-Bold="True"/></td> </tr> <tr> <td colspan="6"> </td> </tr> <tr> <th> Credit Card: </th> <td colspan="5"> <asp:DropDownList id="CreditCard" Runat="Server"> <asp:ListItem>Discover</asp:ListItem> <asp:ListItem>MasterCard</asp:ListItem> <asp:ListItem>Visa</asp:ListItem> <asp:ListItem>Discover</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <th> Account: </th> <td colspan="5"> <asp:TextBox id="Account" Runat="Server" Text="1111 1111 1111 1111" Size="16" MaxLength="19"/> </td> </tr> <tr> <th> Expiration Date: </th> <td colspan="5"> Month: <asp:DropDownList id="ExpMonth" Runat="Server"> <asp:ListItem>01</asp:ListItem> <asp:ListItem>02</asp:ListItem> <asp:ListItem>03</asp:ListItem> <asp:ListItem>04</asp:ListItem> <asp:ListItem>05</asp:ListItem> <asp:ListItem>06</asp:ListItem> <asp:ListItem>07</asp:ListItem> <asp:ListItem>08</asp:ListItem> <asp:ListItem>09</asp:ListItem> <asp:ListItem>10</asp:ListItem> <asp:ListItem>11</asp:ListItem> <asp:ListItem>12</asp:ListItem> </asp:DropDownList> Year: <asp:DropDownList id="ExpYear" Runat="Server"> <asp:ListItem>2003</asp:ListItem> <asp:ListItem>2004</asp:ListItem> <asp:ListItem>2005</asp:ListItem> <asp:ListItem>2006</asp:ListItem> <asp:ListItem>2007</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td colspan="6"> </td> </tr> <tr> <th> Name: </th> <td colspan="5"> <asp:TextBox id="Name" Runat="Server" Text="Your Name" Size="30" MaxLength="50"/></td> </tr> <tr> <th> Address: </th> <td colspan="5"> <asp:TextBox id="Address" Runat="Server" Text="Your Address" Size="30" MaxLength="50"/></td> </tr> <tr> <th> City: </th> <td><asp:TextBox id="City" Runat="Server" Text="Your City" Size="30" MaxLength="30"/></td> <th> State: </th> <td><asp:TextBox id="State" Runat="Server" Text="ST" Size="2" MaxLength="2"/></td> <th> Zip: </th> <td><asp:TextBox id="Zip" Runat="Server" Text="55555" Size="10" MaxLength="10"/></td> </tr> <tr> <th> Email: </th> <td colspan="5"> <asp:TextBox id="Email" Runat="Server" Text="your@email.net" Size="30" MaxLength="50"/></td> </tr> </table><br/> <asp:Panel id="ContinuePanel" Runat="Server"> <asp:Button id="ContinueButton" Text="Continue Purchase" Runat="Server" OnClick="CheckCredit"/> <asp:Button id="CancelButton" Text="Return to Shopping" Runat="Server" OnClick="Cancel_Order"/> <asp:Label id="Message" EnableViewState="False" Runat="Server" style="color:#FF0000"/> </asp:Panel> <asp:Panel id="CompletePanel" Visible="False" Runat="Server"> Click to <asp:Button Text="Complete Order" Runat="Server" OnClick="Submit_Order"/> or <asp:Button Text="Return to Shopping" Runat="Server" OnClick="Cancel_Order"/> </asp:Panel> </form> </body> </html>
Capturing Form Information
This page is linked from the SubmitForm.aspx page which submits a form to this page containing order information. The Page_Load script for this page captures the submitted information from the Request.Form collection, using the specified field names.
<%@ Page Language="vb" Debug="True"%> <SCRIPT Runat="Server"> Sub Page_Load If Not Page.IsPostBack Then ReturnURL.Text = Request.Form("ReturnURL") MerchantID.Text = Request.Form("MerchantID") CustomerID.Text = Request.Form("CustomerID") OrderTotal.Text = String.Format("{0:C}", Request.Form("OrderTotal")) End If End Sub ... </SCRIPT>
Request.Form values are available to the page only the first time the page loads. If the page is posted back to the server, as is done when confirming and submitting order information, the Request.Form collection is lost. It does not take part in the page's View State. Therefore, the four received fields are saved to Label controls when the page loads. These Label values are display on the form except for the passed ReturnURL value. It is not intended to be displayed, but is needed later to redirect back to the eCommerce site. Its Label control is made invisible.
Normally, TextBox controls on the form would be blank for customers to enter their personal information. These controls have been prefilled with example data. You will need, however, to enter your real email address if you wish to receive an email confirmation for your example order. No other use is made of this entered address.
Checking Credit
After the form is filled out by the customer, it is submitted for approval by clicking the "Continue Purchase" button. This button calls the Check_Credit subprogram. In this example, the customer's credit isn't actually checked. The order is simply approved and confirmation is sent back to the eCommerce site. Changes that the subprogram causes in the page display are shown in the following illustration.
The Credit_Check subprogram that processes the form and produces this output is shown below. A modest check is made for a valid email address. Then all form controls are disabled and a different set of buttons are provided to finalize the order. The Approved Label is set to "Approved."
Sub Check_Credit (Src As Object, Args As EventArgs) Dim ValidEmail As Boolean = True If Email.Text <> "" Then If InStr(Email.Text, "@") = 0 Then ValidEmail = False Message.Text = "Invalid email address" ElseIf Mid(Email.Text, Len(Email.Text) - 3, 1) <> "." Then ValidEmail = False Message.Text = "Invalid email address" End If Else ValidEmail = False Message.Text = "Missing email address" End If If ValidEmail = True Then CreditCard.Enabled = False Account.Enabled = False ExpMonth.Enabled = False ExpYear.Enabled = False Name.Enabled = False Address.Enabled = False City.Enabled = False State.Enabled = False Zip.Enabled = False Email.Enabled = False Instructions.Text = "Click the ""Complete Order"" button to " & _ "complete your order with " Approved.Text = "Approved" ContinuePanel.Visible = False CompletePanel.Visible = True End If End Sub
Returning Credit Approval Information
Clicking the "Complete Order" button returns order approval and customer information back to the merchant site—to the return URL address provided by the received form. In this example, return is to the OrderCapture.aspx page.
As is typical, the credit card processing service returns information as a form submission to the return URL. In this case, though, it is not necessary to use a separate form page to collect and submit form information as was done previously when submitting a form to this page. Since the CreditCheck.aspx page is not embedded inside a master page, a standard HTML form can appear on this page and submit directly back to the return URL.
It is not entirely true that an ASP.NET page cannot contain more than one form. Certainly, it can contain only a single <form Runat="Server"> form. However, it can contain a second form if (1) the form is a standard HTML form, and (2) this HTML form appears outside the server form.
The following listing shows the code added to the CreditCheck.aspx page in order to create and submit an HTML form for return of order confirmation and customer information to the merchant site.
Dim SubmitForm As Boolean = False Sub Submit_Order (Src As Object, Args As EventArgs) SubmitForm = True End Sub Sub Cancel_Order (Src As Object, Args As EventArgs) Approved.Text = "Cancel" Submit_Order(Nothing, Nothing) End Sub ... <body> <form Runat="Server"> ... </form> <form name="ReturnOrder" action='<%= ReturnURL.Text %>' method="post"> <input type="hidden" name="ReturnApproved" value='<%= Approved.Text %>'/> <input type="hidden" name="ReturnMerchantID" value='<%= MerchantID.Text %>'/> <input type="hidden" name="ReturnCustomerID" value='<%= CustomerID.Text %>'/> <input type="hidden" name="ReturnOrderTotal" value='<%= OrderTotal.Text %>'/> <input type="hidden" name="ReturnName" value='<%= Name.Text %>'/> <input type="hidden" name="ReturnAddress" value='<%= Address.Text %>'/> <input type="hidden" name="ReturnCity" value='<%= City.Text %>'/> <input type="hidden" name="ReturnState" value='<%= State.Text %>'/> <input type="hidden" name="ReturnZip" value='<%= Zip.Text %>'/> <input type="hidden" name="ReturnEmail" value='<%= Email.Text %>'/> </form> <% If SubmitForm = True Then %> <script type="text/javascript"> ReturnOrder.submit() </script> <% End If %> </body> </html>
Pay particular attention to placement of the HTML form. It physically follows the server form, appearing after its closing </form> tag, and it appears before the closing </body> and </html> tags for the page.
All form <input> tags that hold values to be returned to the merchant site are defined as "hidden" fields (textboxes). There is no reason these fields need to be visible on the page. Form submission takes places behind the scenes without user involvement; there is no "submit" button. Also, embedded scripts supply the values for these fields. These values, along with the return URL for the form's action attribute, come from corresponding server controls on the page. When the page loads, these values automatically appear in the form ready for submission.
HTML form submission cannot be triggered by a server script. It must come either through a click on a "submit" button (missing in this case) or through a browser script written in JavaScript. Recall in the previous form submission that it came through a script that was run when the page loaded: <body onLoad="SubmitForm.submit()">. Here, though, this technique cannot be used; i.e., the form cannot be submitted immediately when the CreditCheck.aspx page loads. It is submitted after the customer enters personal information onto the page and clicks the "Complete Order" button to finalize the purchase.
The trigger for submitting the form, then, is the "Complete Order" button click. This event calls subprogram "Submit_Order". As shown in the above listing, this subprogram includes a single statement, SubmitForm = True, which sets the value of a previously declared global variable. Setting this variable sets the condition for submitting the form.
Notice that the HTML form is accompanied by a JavaScript that is enclosed inside an in-line server script. This code is repeated below.
<% If SubmitForm = True Then %> <script type="text/javascript"> ReturnOrder.submit() </script> <% End If %>
The JavaScript contains a single statement to submit the HTML form named ReturnOrder. This script runs only if server variable SubmitForm = True, which happens when the "Complete Order" button is clicked and the Submit_Form subprogram is run. Thus, through a combination of server and browser scripts the HTML form is submitted to the return URL, in this case to the OrderCapture.aspx page.
Cancelling an Order
At any time during the credit approval process the customer can click the "Return to Shopping" button to exit this process. This button calls the Cancel_Order subprogram (repeated below). Here, the Approved Label is given the value "Cancel" prior to calling the Submit_Order subprogram and submitting the form.
Sub Cancel_Order (Src As Object, Args As EventArgs) Approved.Text = "Cancel" Submit_Order(Nothing, Nothing) End Sub
The Submit_Order subprogram is normally called on a click of the "Complete Order" button. Therefore, it has the normal signature and arguments of a subprogram called in this fashion. When calling this subprogram from the Cancel_Order subprogram, however, there are no button arguments involved. Still, the subprogram expects passed arguments. Here, null arguments (Nothing, Nothing) are passed to satisfy signature expectations.
At this point, with HTML form submission, control returns to the local OrderCapture.aspx page in order to receive and process order confirmation and customer information returned from the credit card processing service through its submitted form.