Initial Setup
This document will guide you through the Payment Form setup in all three integration modes. The following steps must be done before Payment Forms can be used on the merchant website, regardless of which Integration Mode is used.
Please get in touch with the Hipfinity team to get access to Transaction Manager. You can reach out at hipline@hipfinity.co.
Log in to the following URL for testing purposes.https://sandbox.hipfinity.co/transactionmanager/Login.aspx
In the Transaction Manager dashboard navigate to Payment Form Setup under the Virtual Terminal menu. The Payment Form Setup screen allows the merchant to configure the fields that will be displayed, whether editable or not, or required to complete the checkout process.
Navigate to Virtual Terminal -> Payment Form -> Payment Form Options. The Payment Form Options screen allows the merchant to configure the look and feel of the payment form by specifying items such as the background colors, header, footer, company logo, etc.
Note: You need to select the correct device under the Device dropdown menu to set the options correctly.
Please select the checkbox for the setting which you want to apply on the Payment Form. Once it is checked, the page will be reloaded and then allows 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.
- 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.
- Select the Header Alignment: Select from Left or Center alignment.
- Select the Form Alignment: Select from Left or Center alignment.
- Select the Footer Alignment: Select from Left or Center alignment.
- 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: The user can select the option “Same as header” to use the same configuration as the header.
- Merchant DBA: Enter the business name.
- Merchant Email: Enter the business email or email to be used.
- Merchant Receipt URL: This Feature is used in SIP Basic and SIP Advanced. Merchants who desire to display their own receipt will need to provide a valid Merchant Receipt URL to 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.
- Merchant Result URL: Merchant Result URL is a feature used in SIP Basic and SIP Advanced. Merchants who desire to receive the transaction results need to provide a valid Merchant Result URL to which the data 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 mark “Use Captcha” if you want to use the Captcha verification process.
- 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 label.
- Apply Service Fee to Credit: Check mark “Apply Service Fee to Credit” if you want to setup Service Fee for Credit
- Service Fee Type (Credit): Select “Amount” if the user wants to apply a fixed amount as a service fee, and select “Percentage” if the user wants to use a percentage as a service fee.
- Service fee Label (Credit): Enter the desired label for the service fee.
- Apply Service Fee to Ach: Check mark “Apply Service Fee to Credit” if you want to setup Service Fee for Ach
- Service Fee Type (Ach): Select “Amount” if the user wants to apply a fixed amount as a service fee, and select “Percentage” if the user wants to use a percentage as a service fee.
- Service fee Label (Ach): Enter the desired label for the service fee.
- Use iFrame: Check mark “Use iFrame” if you want to embed the Payment Form inside an iFrame
- Send Response to iFrame Parent: Check mark “Send Response to iFrame Parent” if you want the parent of the iFrame to receive a response. The response will be in the form of JSON. The following code is a sample JSON example.
{
"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 need to 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://sandbox.hipfinity.co") { return; }
//perform custom processing
var customData = event.data;
alert(JSON.stringify(customData,null,2));
}
</script>
<iframe src=" https://sandbox.hipfinity.co/APIs/PayOnline.aspx?Version=2.0&MerchantId=27680&TerminalId=0001&Amount=10.00&Mode=0" title="PF"></iframe>
</iframe>
Integration
Refer to our Payment Form Specifications Guide for more information about the form types we support and form specifications.
This mode is ideal for merchants and developers who want to integrate payments in the easiest way possible. This type of transaction is referred to as SIP Basic. The merchant does not need an SSL certificate for this mode of payment forms. Integration is ideal for merchants using Hipfinity’s Payment Form to collect payments.
This is the next level of implementation for users with intermediate knowledge. This mode will allow merchants to use their own URL for the payment form. This type of transaction is referred to as SIP Advanced. The merchant does not need an SSL certificate for this mode of payment forms. Integration is ideal for merchants using their own Payment Form to collect payments.
AIP is an advanced integration that requires the intervention of a developer. Please refer to our Payment Form Specifications document for more details.
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.
The example below is a sample code of a fixed amount from a test website. Please use the generated code in the correct code section on your website.
<FORM name="MyPaymentForm" action="https://sandbox.hipfinity.co/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 Hipfinity’s Payment Form.
After Hipfinity’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.
The example below is a sample code of a variable amount from a test website. Please use the generated code in the correct code section on your website. This will allow 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 will generate code for the variable amount.
<FORM name="MyPaymentForm" action="https://sandbox.hipfinity.co/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 Hipfinity’s Payment Form.
After the Hipfinity’s Payment Form is displayed, users can enter all the required fields and payment information and then process the payment.
The example below is a sample code from a test website. Please use the generated code in the correct code section on your website.
<FORM name="form1" action="https://sandbox.hipfinity.co/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 Hipfinity’s gateway for processing.
Whether it is SIP Basic or SIP Advanced, a confirmation page is displayed to the customer from where a receipt can be generated, printed, and emailed.
This feature is used in SIP Basic and SIP Advanced. Merchants who desire to display their own receipts will need to provide a valid MerchantReceiptURL where the data will be posted to. 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.
MerchantResultURL is a feature used in SIP Basic and SIP Advanced. Merchants who desire to receive the results of the transaction will need to provide a valid MerchantResultURL where the data will be posted to.
