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:

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 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 responseFailURL = "https://localhost/PaymentResponse/Failed";
let responseSuccessURL = "https://localhost/PaymentResponse/Success";
let transactionNotificationURL = "https://localhost/PaymentResponse/Notify";
let sharedSecret = document.getElementById('sharedSecret').value;

let trxOrigin = document.getElementById('trxOrigin').value; // ECI/PHONE/MAIL
let hashFields = { chargetotal, checkoutoption, currency, hash_algorithm, 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,
    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