ComsGate® Payment Form Quick Start Guide – Charge Anywhere Documentation

1. Initial Setup

This guide will walk you through the Payment Form setup process across all three integration modes. Before using Payment Forms on the merchant website, the following steps must be completed regardless of the integration mode.

For access to Transaction Manager, please contact the Charge Anywhere team at cert.questions@chargeanywhere.com.

1.1 Login to Transaction Manager

1.2 Payment Form Setup

Navigate to Virtual Terminal > Payment Form Setup in Transaction Manager. The Payment Form Setup screen allows you to configure the fields to be displayed, whether they are editable or required to complete the checkout process.

1.3 Payment Form Options

Navigate to Virtual Terminal > Payment Form > Payment Form Options. The Payment Form Options screen allows you to customize the look and feel of the payment form, including items such as background colors, header, footer, company logo, etc.

Note: You must select the correct device under the Device dropdown menu to set the options correctly.

1.3.1 Header Specifications

To apply a setting on the Payment Form, select the corresponding checkbox. Once selected, the page will reload, allowing you to enter the appropriate value for that setting.

Header Company Logo: Browse and select the company logo.
Header Background Color Picker: Select a color for the header background.
Header Text: Enter the text that will appear on the header of the payment form.
Header Text Color Picker: Select a color for the header text.

1.3.2 Form Background and Page Layout

Form Background Color Picker: Select a color for the payment form background.
Form Button Background Color Picker: Select a color for the button background.
Form Button Text Color Picker: Select a color for the payment form button text.

1.3.2.1 Page Layout Selections

Select the Header Alignment: Choose between Left or Center alignment.
Select the Form Alignment: Choose between Left or Center alignment.
Select the Footer Alignment: Choose between Left or Center alignment.

1.3.3 Footer Specifications

Footer Background Color Picker: Select a color for the payment form footer background.
Footer Text: Enter payment footer text.
Footer Text Color Picker: Select a color for the payment form footer text.

Note: Select the option “Same as header” to use the same configuration as the header.

1.3.4 Configuration Form

Merchant DBA: Enter the business name.
Merchant Email: Enter the business email or email to be used.
Merchant Receipt URL: For SIP Basic and SIP Advanced. Provide a valid URL where data will be posted. This feature is used to maintain the look and feel of your website. This is typically used by merchants integrating SIP Advanced to retain the look and feel of their website. If this feature is used, the confirmation page will not be displayed.
Merchant Result URL: For SIP Basic and SIP Advanced. Provide a valid URL where transaction results will be posted. It’s the merchant’s responsibility to have the respective code on their website to receive the results and handle them accordingly like showing the success/error messages etc. The sample code is provided below.
Use Captcha: Check this box to enable Captcha verification.
Description Label: Enter the desired label for the description field.
Invoice Number Label: Enter the desired label for the invoice field.
Customer Number Label: Enter the desired label for the customer number field.
Apply Service Fee to Credit: Check this box to set up a service fee for credit transactions.
Service Fee Type (Credit): Select Amount for a fixed amount or Percentage for a percentage as a service fee.
Service Fee Label (Credit): Enter the desired label for the service fee.
Apply Service Fee to Ach: Check this box to set up a service fee for ACH transactions.
Service Fee Type (Ach): Select Amount for a fixed amount or Percentage for a percentage as a service fee.
Service Fee Label (Ach): Enter the desired label for the service fee.
Use iFrame: Check this box to embed the Payment Form inside an iFrame.
Send Response to iFrame Parent: Check this box to send a response to the iFrame parent. The response will be in JSON format. Below is a sample JSON response:

{
 "ResponseCode":"000",
 "ResponseText":"APPROVED",
 "ApprovalCode":"182944",
 "PaymentType":"2",
 "TransactionType":"Sale",
 "AuthorizedAmount":"123.00",
 "ReferenceNumber":"000002489383",
 "ServiceFee":"1.00",
 "GrandTotal":"123.00"
}

To receive the response in the iFrame parent, you must set up an event listener and ensure that you validate the origin for a proper security check.

<script>
window.addEventListener('message', handleMessage, false);
 function handleMessage(event) {
	
if (event.origin != "https://webtest.chargeanywhere.com") { return; }
	
	//perform custom processing
var customData = event.data;
	alert(JSON.stringify(customData,null,2));   
}
  </script>
<iframe src=" https://webtest.chargeanywhere.com/APIs/PayOnline.aspx?Version=2.0&MerchantId=27680&TerminalId=0001&Amount=10.00&Mode=0" title="PF"></iframe>
</iframe>

2. Integration

Refer to our Payment Form Specifications Guide for more information about supported form types and specifications.

2.1 SIP Basic

SIP Basic is ideal for merchants and developers who want to integrate payments in the easiest way possible. The merchant does not need an SSL certificate for this mode of payment forms. This integration is ideal for merchants using Charge Anywhere’s Payment Form to collect payments.

2.2 SIP Advanced

SIP Advanced is the next level of implementation for users with intermediate technical knowledge. This mode allows merchants to use their own URL for the payment form. The merchant does not need an SSL certificate for this mode of payment forms. This integration is ideal for merchants using their own Payment Form to collect payments.

2.3 AIP

AIP is an advanced integration that requires the intervention of a developer. Please refer to our Payment Form Specifications document for more details.

2.4 Sample Code Integration for SIP Basic and SIP Advanced

After completion of the initial setup, the steps below need to be followed to generate the HTML code you will include on your website:

Navigate to Payment Form Code Generator under the Virtual Terminal.
Select your device from the dropdown.
HTML code for both POST (Payment Button) and GET (Payment Link) will be generated simultaneously.

2.5 SIP Basic Fixed Amount Code Sample

The example below is a sample code of a fixed amount from a test website. Use the generated code in the appropriate code section on your website.

<FORM name="MyPaymentForm" action="https://sandbox.chargeanywhere.com/APIs/PayOnline.aspx" method="post">
    <input type="hidden" name="Version" value="2.0">
    <input type="hidden" name="MerchantId" value="29951">
    <input type="hidden" name="TerminalId" value="0001">
    Amount: <input name="Amount" value="10.00">
    <input type="hidden" name="Mode" value="0">
    <input type="Submit" name="Submit" value="Pay Now">
</FORM>

After submitting the donation, users will be redirected to the Charge Anywhere’s Payment Form.

2.6 Process Payment

After the Charge Anywhere’s Payment Form is displayed, users can enter all the required fields and payment information and then process the payment.

Options displayed in the following payment form have been configured by the merchant as per Payment Forms Options in section 3.

2.7 SIP Basic Variable Amount Code Sample

The example below is a sample code of a variable amount from a test website. Use the generated code in the appropriate code section on your website. This allows the merchant/user to change the amount before making the payment.

Check the box to implement a payment form with a fixed amount that needs to be selected so that the code generator tool can generate code for the variable amount.

<FORM name="MyPaymentForm" action="https://sandbox.chargeanywhere.com/APIs/PayOnline.aspx" method="post">
    <input type="hidden" name="Version" value="2.0">
    <input type="hidden" name="MerchantId" value="29951">
    <input type="hidden" name="TerminalId" value="0001">
    Amount: <input name="Amount" value="10.00">
    <input type="hidden" name="Mode" value="0">
    <input type="hidden" name="varamount" value="TRUE">
    <input type="Submit" name="Submit" value="Pay Now">
</FORM>

After submitting the donation, users will be redirected to the Charge Anywhere’s Payment Form.

2.8 Process Payment

After the Charge Anywhere’s Payment Form is displayed, users can enter all the required fields and payment information and then process the payment.

2.9 SIP Advanced Code Sample

The example below is a sample code from a test website. Use the generated code in the appropriate code section on your website.

<FORM name="form1" action="https://sandbox.chargeanywhere.com/APIs/PayOnline.aspx" method="post">
    <input type="hidden" name="Version" value="2.0">
    <input type="hidden" name="MerchantId" value="29951">
    <input type="hidden" name="TerminalId" value="0003">
    Amount: <input name="Amount" value="0.00"><br>
    <input type="hidden" name="Mode" value="1">
    CardNumber:<input name="CardNumber"><br>
    ExpMonth(mm):<input name="ExpMonth"><br>
    ExpYear(yy):<input name="ExpYear"><br>
    <input type="Submit" name="Submit" value="Pay Now">
</FORM>

All data including payment information will be collected at the merchant’s website and then sent to Charge Anywhere’s gateway for processing.

2.10 Payment Receipt

For both SIP Basic and SIP Advanced, a confirmation page is displayed to the customer where a receipt can be generated, printed, and emailed.

2.11 Merchant Receipt URL

This feature is used in SIP Basic and SIP Advanced. Merchants who prefer to display their own receipts must provide a valid Merchant Receipt URL where the data will be posted. This is typically used by merchants integrating SIP Advanced to retain the look and feel of their website. If this feature is used, the confirmation page will not be displayed.

2.11.1 Example of a merchant-generated receipt page

2.12 Merchant Result URL

Merchant Result URL is a feature used in SIP Basic and SIP Advanced. Merchants who prefer to receive the results of the transaction must provide a valid Merchant Result URL where the data will be posted.