Frontend Payment Generator (With URLs)

This page generates a complete Fiserv payment form using only frontend JavaScript, including success and failure URLs in the hash calculation.

Store Name:

Shared Secret:

Response Success URL:

Response Fail URL:

Transaction Notification URL:

Transaction Origin:

Hash Generation Code (JavaScript):

// Hash generation code - edit this to customize
let chargetotal = "20.00";
let checkoutoption = "combinedpage";
let currency = "826";
let hash_algorithm = "HMACSHA256";
let responseFailURL = document.getElementById('responseFailURL').value;
let responseSuccessURL = document.getElementById('responseSuccessURL').value;
let transactionNotificationURL = document.getElementById('transactionNotificationURL').value;
let storename = document.getElementById('storeName').value;
let timezone = "Europe/London";
let now = new Date();
let txndatetime = now.getFullYear() + ':' + 
    String(now.getMonth() + 1).padStart(2, '0') + ':' + 
    String(now.getDate()).padStart(2, '0') + '-' + 
    String(now.getHours()).padStart(2, '0') + ':' + 
    String(now.getMinutes()).padStart(2, '0') + ':' + 
    String(now.getSeconds()).padStart(2, '0');
let txntype = "sale";

let sharedSecret = document.getElementById('sharedSecret').value;

let trxOrigin = document.getElementById('trxOrigin').value;
let hashFields = { chargetotal, checkoutoption, currency, hash_algorithm, responseFailURL, responseSuccessURL, storename, timezone, transactionNotificationURL, txndatetime, txntype };
if (trxOrigin) { hashFields.trxOrigin = trxOrigin; }
let stringToHash = Object.keys(hashFields).sort().map(k => hashFields[k]).join('|');
let hashDataString = stringToHash;
let hash = CryptoJS.HmacSHA256(stringToHash, sharedSecret);
let hashExtended = hash.toString(CryptoJS.enc.Base64);

let formDataToReturn = {
    chargetotal: chargetotal,
    checkoutoption: checkoutoption,
    currency: currency,
    hash_algorithm: hash_algorithm,
    hashExtended: hashExtended,
    responseFailURL: responseFailURL,
    responseSuccessURL: responseSuccessURL,
    storename: storename,
    timezone: timezone,
    transactionNotificationURL: transactionNotificationURL,
    txndatetime: txndatetime,
    txntype: txntype,
    hashDataString: hashDataString
};
if (trxOrigin) { formDataToReturn.trxOrigin = trxOrigin; }
return formDataToReturn;

Generated Hash Data String:

                            Click "Generate Payment Form" to see the hash data string
                        

Generated Hash (Base64):

                            Click "Generate Payment Form" to see the generated hash
                        

Frontend Payment Generator (With URLs)

Generated Payment Form

HTML Form