====== ePayment Form v2.13.0 ======
===== Overview =====
The payment form allows a merchant to send the customer to USAePay for the collection of secure payment information. This eliminates the need for individual merchants to maintain their own SSL certificates. To implement the payment form, the merchant's website needs to redirect the customer to a specially formatted URL, display a form that will post to the USA ePay site, or display a button that's connected to the form. Before creating the URL/form/button please see the [[http://wiki.usaepay.com/merchant/console/sources|sources]] section in order to setup the source key within the USAePay Merchant Console. You will need the source key to connect to the gateway.
===== Creating a Buy Now Button on your website =====
- **Things to know**:
- This section teaches you how to place a button image on a web page of your website which links to USAePay's secure Payment Form for collection of funds. You will need access to edit your own website and be able to upload an image to your website via a service such as FTP or something similar. Most companies that host your website have a tool that will allow you to upload files. Please check their documentation before proceeding.
- **Collecting the pieces**:
- You will need to have an image that appears to look like a button. If you do not wish to create one you can use one of several USAePay pre-built buttons available [[downloads/logos#secure_logos|here]].
- In order to create the link you will need to use a text editor or your favorite editor such as Notepad, TextEdit, Dreamweaver, etc.
- Almost no HTML knowledge is required as most of the pieces are here for you to put together. However it does help to know several HTML tags, specifically the anchor tag > and the image tag . You will be using these.
- The most important part is having your source key ready. For information on how to generate it please visit [[merchant/console/sources|here]]. Once you have it be ready to copy and paste.
- **Putting it together**
- Open your favorite web page editor as specified above in "Collecting the pieces".
- Begin with typing the image tag and it's associated attributes namely the src which is the source of the button image (where it comes from) and the alt which is the text displayed when a curser is hovered over the image:
- As you can tell the source of our button is an image called "usaepaysecurebuttongray3.gif". You can use your own image. For this example our stock button image is used. It looks like this: {{:merchants:images:usaepaysecurebuttongray3.gif}}The path of the images is the same as the web page that image will be on. If you have your images in a directory called "images" for example, the link will be "src="images/usaepaysecurebuttongray3.gif". The alt attribute has the text "Click to Pay". This is optional as well is customizable to anything you want.
- Now wrap the image tag with an anchor tag IMAGE TAG GOES HERE> to make it look like this:
- There is only one attribute that was populated within the anchor tag, the href. This is the URL that will be requested when the button is clicked. It needs to be specially formatted to connect to USAePay, authenticate you as a valid merchant on our system and pass in the required information to make a payment. Let's break it down:
- There are several parts that make up the URL and they are all concatenated (attached) but the ampersand character "&".
- The first part is the Payment Form URL on USAePay's servers: https://www.usaepay.com/interface/epayform/_YOUR_SOURCE_KEY_HERE_/sale?. The only thing that you need to edit here is the source key. As you can see there is a dummy key placed for security. You will need to remove it and paste your own source key after "epayform/" and before "/sale?". The "sale?" command tells USAePay this is a credit card charge. Your option is "authonly?" to authorize payment only.
- After that you will see an ampersand, "&", to concatenate the amount of your transaction. This is done by attaching UMamount (all fields are case sensitive) and equaling it to the dollar amount including the cents separated by a decimal point. This piece will be UMamount=10.00
- Once again after adding another ampersand, "&", the invoice of the order is attached. This piece will be UMinvoice=123456. It is highly recommended that you pass in this value. It designates the invoice or order number of your transaction.
- The final piece is the description of your transaction. After adding the last ampersand, "&", type UMdescription setting it equal to the actual text description. If there are spaces in your description as there are in this example they need to be separated by "%20". This is the code that browsers use instead of space because URL's by nature do not have spaces. This piece will be UMdescription=Thank%20You%20For%20Your%20Payment
- Close the first part of the href tag with a greater than carrot symbol ">" and close the entire tag AFTER the image tag with a ""
- You should now have a complete link as in section 3.III.
- An HTML page with the example and button is available for you {{:merchant:buynowcode.zip|here}} to download. Don't forget to place YOUR own source key inside the code.
- **Testing the Buy Now Link**
- Save the file with the .html extention or unzip the file from our example. Open your favorite browser and locate the file->open menu and find the file you saved or unziped. Open it. You should now see the button and you should be able to click it. If you see a broken image make sure the button image is located at the same place as the files you saved such as the Desktop. Click the button and if everything is correct it will lead you to your secure Payment Form on USAePay's servers. Don't forget to place YOUR source key in the code. The Order Summary block should be filled out completely. If not make sure you're passing the UMamount, UMinvoice, and UMdescription correctly along with the values in quotes. The fields are case sensitive.
- Checklist:
- Can you open your own file?
- When the file is open do you see the button image?
- Is the button image clickable?
- When you click on an image does it lead you to YOUR secure Payment Form hosted by USAePay?
- Does the Order Summary block contain all the information and none of it is blank including the Order Date, Order Amount, Order Number, Customer IP, and Description? It should look like this:
- {{:merchant:picture_1.png}}
- If all of the following are yes then you are ready to make it live.
- **Making it live**
- If you have a designated web page on your website that will need the button then edit the web page, place the code somewhere within the
tag of the page, save it, and upload it to your website. Also upload the button image to the same place or wherever your images are located on your website file structure. You should now be able to browse your website to that specific page and see the button. Make sure to refresh the page if you don't see the button appear. Go down the checklist in section 4.II starting with c-f.
- **Further reading**
- How to customize the form on USAePay's end: [[merchant/console/sources#payment_form_template|here]]
- Where to generate the source key from your account: [[merchant/console/sources#adding_a_source_key|here]]
- Where are more buttons that USAePay already pre-built: [[downloads/logos#secure_logoshere|here]]
- [[http://www.w3schools.com/html/html_links.asp|More]] on the anchor tag
- [[http://www.w3schools.com/html/html_images.asp|More]] on the image tag
- [[http://www.w3schools.com/html/html_intro.asp|Basic]] HTML tutorial
- [[http://www.ftpplanet.com/ftpresources/basics.htm|Basic]] FTP tutorial
===== Payment Form URL =====
If you need to provide your customers with a link that directs them to our secure ePayment form the customer can click on a direct link, or the merchant's site can redirect the customer to a URL in the following format:
https://www.usaepay.com/interface/epayform/[key]/[command]?UMamount=[amount]&UMinvoice=[invoice]&UMmd5hash=[hash]
Where [key] is the [[merchant:sourcekey|source key]] copied from the sources screen, [command] is either sale, credit or authonly, [amount] is the total monetary amount of the transaction, [invoice] is the invoice or order number and [hash] is the md5hash pin (See Source Pin Code). Pin and hash are optional.
==== Example Links ====
* Simple sale form with a hard-coded final amount of 100.00
* https://www.usaepay.com/interface/epayform/aJxT847qH_YOUR_SOURCE_KEY_6GK3QW3/sale?&UMamount=100.00
* Simple authorization only form with a hard-coded final amount of 100.00
* https://www.usaepay.com/interface/epayform/aJxT847qH_YOUR_SOURCE_KEY_6GK3QW3/authonly?&UMamount=100.00
*Simple authorization only form with a hard-coded final amount of 100.00, a description of "ePaymentForm, and the Order Number 123456
* https://www.usaepay.com/interface/epayform/aJxT847qH_YOUR_SOURCE_KEY_6GK3QW3/authonly?&UMamount=100.00&UMdescription=ePaymentForm&UMinvoice=123456
===== Using the Payment Form =====
==== Payment Form via POST ====
The customer can also post data directly to the payment form. The merchant's website would just need to present the customer with an HTML page containing the following form:
Any of the form fields, will be managed by the API. If you create a custom payment form, you must make sure to include a hidden form field for any field you wish to pass through to the API.
If the amount will not be fixed, but will instead be entered manually by the merchant, change the input type from "hidden" to "text" as shown below:
==== Case Study: Donation Form ====
The following is a case study for creating a simple donation page hosted on your website that connects to USAePay for secure processing. This is a great starting off point for religious donations, non-profit organizations, or any merchant accepting a variable dollar amount from the client through a payment form. Below you can download the necessary source code files. Edit the HTML source code with your favorite editor (Notepad, TextEdit, Dreamweaver) to input your source key and edit any of the templated text already there for you. Save the files in the original format. These files will need to be uploaded via a service such as FTP, or something similar, to your website. Once you've uploaded the files you can access them through the browser. Clicking on the button submits the form to USAePay and brings the customer to the secure payment area on USAePay's servers. The customer completes the payment process by entering their payment information. For information on editing USAePay's hosted paymet form click [[http://wiki.usaepay.com/merchant/console/sources|here]].
=== Download zip with HTML source (XHTML 1.0 Transitional) and button image ===
- {{:merchant:usaepaydonationcasestudy.zip|Source Code}}
- More buttons available [[http://wiki.usaepay.com/downloads/logos|here]]
=== ePayment Form fields used ===
The form uses the following fields to post to USAePay:
-**UMkey** - This is the source key that connects you as a valid merchant on our gateway (Required)
-**UMcommand** - This indicates the type of a transaction, sale. (Required)
-**UMinvoice** - This allows you to pass a numerical invoice number for record keeping. (Required)
-**UMamount** - A text box displayed for customer to enter a decimal (0.00) amount. (Required)
-**UMdescription** - A text box for any comments left by the donor
-**UMcustemail** - A place for the donor to enter their email address for a confirmation receipt.
The form is not limited to only these fields. Others may be used. Please customize based on your preferences.
=== HTML Source for Donation form ===
==== Case Study: Recurring Subscription Form ====
The following is a case study for creating a simple recurring or subscription page hosted on your website that connects to USAePay for secure processing. This is a great starting off point for service fee merchants that want to accept a variable or fixed dollar amount from the client through a payment form. Below you can download the necessary source code files. Edit the HTML source code with your favorite editor (Notepad, TextEdit, Dreamweaver) to input your source key and edit any of the templated text already there for you. Save the files in the original format. These files will need to be uploaded via a service such as FTP, or something similar, to your website. Once you've uploaded the files you can access them through the browser. Clicking on the button submits the form to USAePay and brings the customer to the secure payment area on USAePay's servers. The customer completes the payment process by entering their payment information. For information on editing USAePay's hosted paymet form click [[http://wiki.usaepay.com/merchant/console/sources|here]].
=== Download zip with HTML source (XHTML 1.0 Transitional) and button image ===
{{:merchant:usaepayrecurringcasestudy.zip|Source Code}}
- More buttons available [[http://wiki.usaepay.com/downloads/logos|here]]
=== ePayment Form fields used ===
The form uses the following fields to post to USAePay:
-**UMkey** - This is the source key that connects you as a valid merchant on our gateway (Required)
-**UMcommand** - This indicates the type of a transaction, sale. (Required)
-**UMcustreceipt** - This flags USAePay to send a customer receipt via email through a value of 'yes'.
-**UMrecurring** - This flags USAePay to add this transaction as a customer record in Customers & Billing area of the Merchant Console.
-**UMinvoice** - This allows you to pass a numerical invoice number for record keeping. (Required)
-**UMamount** - A text box displayed for customer to enter a decimal (0.00) amount. (Required)
-**UMbillamount** - Sets the monetary amount to charge on each cycle. If this field is left blank the UMamount will be used instead. This is NOT the “initial” charge or “setup” charge, this is only the “recurring” charge. UMamount determines the initial charge.
-**UMschedule** - Determines the recurring billing schedule. Possible values are daily, weekly, biweekly, monthly, bimonthly, quarterly, biannually, or annually. (defaults to monthly)
-**UMnumleft** - Number of transactions remaining in recurring billing cycle. If the recurring billing should go on indefinitely, set this to *. (defaults to *)
-**UMstart** - Start date. Default is tomorrow. Must be entered in YYYYMMDD format. If set to UMstart=next the date of the next billing cycle will be used. For example if today is 1/10/2009 and UMschedule=monthly then UMstart will be set to 2/10/2009.
-**UMdescription** - A text box for any comments left by the donor
-**UMcomments** - Optional transaction comments field. Comments are displayed on the transaction details page.
-**UMemail** - A place for the donor to enter their email address for a confirmation receipt.
-**Billing Fields** - All the billing fields that will be transferred over to the secure payment form.
The form is not limited to only these fields. Others may be used. Please customize based on your preferences.
=== HTML Source for Recurring form ===
Recurring Payment Form
==== Adding a "Same as Billing" Checkbox ====
This code will allow you to add a box to your form that automatically duplicates the Billing information for use in the Shipping fields. This will save your customers some time while filling out the form.
- Log into your USAePay merchant gateway. Go to "Settings", then "Source Keys". Select the source key you are using and click "Edit". Click "Edit Customization to Epay Form".
- Click in the text box, then hit Ctrl-F on your keyboard to search the text. Search for "Shipping Information". It should take you to a portion of code that looks like:
-
Shipping Information:
- Add the following code to the next line:
-
Same as Billing:
- Insert a new line and add the following between tags:
-
- Save the changes to your form. This will create a checkbox on your payment form that looks like this:
{{merchant:sameasbillbox.gif}} \\
Once you have saved changes to your payment form, you will be able to instantly fill out the Shipping fields with Billing information.
==== Adding a Convenience Fee ====
This code is for adding a flat fee to each transaction that occurs on your payment form. This is not a split payment. For information on split payments, please see [[http://wiki.usaepay.com/developer/transactionapi#split_payments|Split Payments]]. The below example assumes you are using the default payment form without any changes.
- Log into your USAePay merchant gateway. Go to "Settings", then "Source Keys". Select the source key you are using and click "Edit". Click "Edit Customization to Epay Form".
- In the header of the document, add the following code:
-
- "servicefee" will be the amount that you are adding on to the transaction. Locate the below command in the list of hidden values, and delete it:
-
- Find the following code in your form:
-
Order Amount:
[UMamount]
- Replace it with the following:
-
Payment Amount:
Service Fee ($5):
5.00
Total Charge:
- Save the changes to your form. Once the form is saved, the customer will be able to type in the amount they are paying and automatically have a convenience fee added to the transaction total. The customer will not be able to edit the amount of the fee or the grand total of the transaction.
==== Adding a Convenience Fee as a Percentage (Not a Split Payment) ====
Follow the above instructions for adding a flat-rate convenience fee to your account, but use the following Javascript:
And the following HTML:
Payment Amount:
Service Fee (2%):
// Change the percentage here as well!
Total Charge:
==== Generating a unique invoice number with Javascript ====
You can generate a unique invoice number with every ePayment Form submisson using a small piece of Javascript code just below the form itself. It's not visible to the payee. You can use it for reporting and searching for specific transactions within your USAePay account. Providing an invoice number with every transaction may also give you a better qualifying transaction rate.
=== Source Code ===
=== Don't forget! ===
Add a "name" attribute within the