Setting Up the WebPay Form

For payment card processing using Merchant Partners, you will need to configure a WebPay form in your Merchant Partners account.

Creating the Credit Card Form

In your Merchant Partners account click on the WebPay link in the Shopping Cart section.


Once on the WebPay Configuration page you will need to create a new WebPay form. For Payment Option, select Credit Card Sale and give the form a unique name.


After clicking Submit, you will be redirected to a page where you can modify the layout of the credit card form. The form can be laid out in a way that meets your business needs or you can use the html from a form that we have set up. To set up a form using our template, follow the directions below:

In the WebPay Configuration screen click on the Advanced tab at the top of the screen. You should see a screen similar to the screen shot below.


Set the host domain to the domain where the borrower portal will be hosted.

In the Header HTML labeled as section 1 above, add the html below.

HTML

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Payment Processing</title>
<style>
   .errormsg
{margin:0; color:red;}
body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #555; }
input[type="submit"], input[type="select"] {
      background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f2f2f2) );
      background: -moz-linear-gradient( center top, #ffffff 5%, #f2f2f2 100% );
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
      background-color: #ffffff;
      -moz-border-radius: 14px;
      -webkit-border-radius: 14px;
      border-radius: 14px;
      border: 1px solid #dddddd;
      display: inline-block;
      color: #333333;
      font-family: arial;
      font-size: 14px;
      font-weight: bold;
      padding: 5px 20px;
      text-decoration: none;
}
input[type="submit"]:hover {
      background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dddddd), color-stop(1, #f2f2f2) );
      background: -moz-linear-gradient( center top, #dddddd 5%, #f2f2f2 100% );
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#f2f2f2');
      background-color: #dddddd;
      cursor: pointer;
}
input[type="submit"]:active {
      position: relative;
      top: 1px;
}
input[type="text"]{
      border: 1px solid #ddd;
      padding: 5px;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: normal;
      font-size: 14px;
      color: #555;
      margin: 5px 0 0;
}
</style>
</head>
<body style="float:left; vertical-align: top;">
<center>
<div style="width:450px; float:left; vertical-align: top;">

 

In the form section labeled as section 2 above, add the html below.

HTML

<div
class="webpay process_payments_progressbar"
id="process_payments_progressbar"
style="display: none;">
::PROCESS_PAYMENTS_PROGRESSBAR_DEFAULT::
</div>
<table style=" float:left; vertical-align: top;" cellpadding="5px">
   <tr>
      <td width="150px">
         <label for="amount" class="webpay" style="color: #555; ">
Amount</label>
      </td>
      <td width="250px">
         <input alt="js_validate_amount" name="amount" class="webpay" type="text" value="0.00" size="10" style="color: #555; ">
      </td>
   </tr>
   <tr>
      <td>
         <label for="ccname" class="webpay" style="color: #555">Cardholder Name</label>
      </td>
      <td>
         <input alt="js_validate_notempty" name="ccname" class="webpay" type="text" value="" size="32" style="color: #555; width:200px;">
      </td>
   </tr>
   <tr>
      <td>
         <label for="ccnum" class="webpay" style="color: #555">Card Number</label>
      </td>
      <td>
         <input alt="js_validate_acctnum" name="ccnum" class="webpay" type="text" value="" size="17" style="color: #555; width:150px;">
      </td>
   </tr>
   <tr>
      <td>
         <label for="expmon" class="webpay" style="color: #555">Expiration Date</label>
      </td>
      <td>
        <select style="color: #555; " alt="js_validate_notempty" name="expmon" size="1" class="webpay">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
	</select>
         <span class="webpay">
<select style="color: #555; " alt="js_validate_notempty" name="expyear" size="1" class="webpay">
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
	</select>
      </td>
   </tr>
   <tr>
      <td>
         <label for="cvv2" class="webpay" style="color: #555">CVV2/CVC2/CID</label>
      </td>
      <td>
         <input alt="" name="cvv2" class="webpay" type="text" value="" size="4" style="color: #555" >::INFOICON_CVV2::
      </td>
   </tr>
   <tr > 
      <td></td>
      <td></td>
   </tr>
   <tr > 
      <td></td>
      <td></td>
   </tr>
</table>

Post-Back URL

Regardless of the layout of your form, the Post-back URL must be set to the HandleCreditCardPayment page of the borrower portal.

Example

If your borrower portal is hosted at:

https://www.website.com/BorrowerPortal

Then the Post-back URL should point to:

For Borrower Portal (2020)

https://www.website.com/BorrowerPortal/HandleCreditCardPayment


For Borrower Portal (LEGACY)

https://www.website.com/BorrowerPortal/forms/HandleCreditCardPayment.aspx

Configuring the Payment Gateway in NLS

After configuring the WebPay form you will need to set up the Payment Gateway in NLS.

After naming this account and giving it a description, set your account ID, account Sub ID, and account password. These values correspond to your Merchant Partners account.

The WebPay URL field corresponds to the WebPay form that you set up in earlier steps. You can get this value from the bottom of the WebPay setup form.


The WebPay Encryption Key is located on Merchant Partners website. Once logged into your Merchant Partners account navigate to the Configure Options page. Once there scroll down to the API Controls section and click on the Edit link on the Account Number 3DES Encryption row.


Once on the Account Number 3DES Encryption page, copy your 3DES Key and paste it in the WebPay encryption key field within NLS.


Add the Merchant Partner account in NLS.

Finally, assign the payment gateway at the loan group level.


Update the Borrower Portal Web.Config File

Only required For Borrower Portal (LEGACY)

Open up the Borrower Portal’s Web.Config file and set the email key value. If any errors occur during the payment processing, the error info will be sent to this email.

<add key="RememberMeExpiration" value="30" />
<add key="PasswordRequiredCharacters" value="!@#$%^" />
<add key="PasswordMinLength" value="8" />
<add key="PasswordMaxLength" value="12" />
<add key="Email" value="test@test.com" />
<!--Email address that password resets will be sent from and payment processing error will be sent to-->