Frontend Payment Generator

This page generates a complete Fiserv payment form using only frontend JavaScript. You can customize the hash generation code and all parameters.

Store Name:

Shared Secret:

Transaction Origin:

Order ID (oid) - Optional:

Charge Total (Override): Leave empty to use default value from code

Transaction DateTime (Override): Leave empty to use current date/time

Hash Generation Code (JavaScript):

// Hash generation code - edit this to customize
let chargetotalOverride = document.getElementById('chargetotal').value;
let chargetotal = chargetotalOverride || "20.00";
let checkoutoption = "combinedpage";
let currency = "826";
let hash_algorithm = "HMACSHA256";
let storename = document.getElementById('storeName').value;
let timezone = "Europe/London";
let txndatetimeOverride = document.getElementById('txndatetime').value;
let txndatetime;
if (txndatetimeOverride) {
    txndatetime = txndatetimeOverride;
} else {
    let now = new Date();
    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 baseUrl = window.location.origin;
let responseFailURL = baseUrl + "/PaymentResponse/Failed";
let responseSuccessURL = baseUrl + "/PaymentResponse/Success";
let transactionNotificationURL = baseUrl + "/PaymentResponse/Notify";
let sharedSecret = document.getElementById('sharedSecret').value;

let trxOrigin = document.getElementById('trxOrigin').value; // ECI/PHONE/MAIL
let oid = document.getElementById('oid').value || ""; // Order ID - can be empty
let hashFields = { chargetotal, checkoutoption, currency, hash_algorithm, oid, responseFailURL, responseSuccessURL, storename, timezone, transactionNotificationURL, trxOrigin, txndatetime, txntype };
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);

return {
    chargetotal: chargetotal,
    checkoutoption: checkoutoption,
    currency: currency,
    hash_algorithm: hash_algorithm,
    hashExtended: hashExtended,
    oid: oid,
    responseFailURL: responseFailURL,
    responseSuccessURL: responseSuccessURL,
    storename: storename,
    timezone: timezone,
    trxOrigin: trxOrigin,
    transactionNotificationURL: transactionNotificationURL,
    txndatetime: txndatetime,
    txntype: txntype,
    hashDataString: hashDataString
};

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

Generated Payment Form

HTML Form