You can set the following params for the Payment Widget to add custom information about customer, order, etc:
{
customer_external_id: string;
external_id: string;
external_data: Record<string, string>;
description: string;
name: string;
// Theme is a purely presentational parameter, not used in signature generation
// It has 2 options, "dark" or "light" -
// Choose what better suits your application look & feel
theme: 'dark' | 'light';
};
Here is the only required param: customer_external_id. All other parameters are optional, you can ignore them if you want.
Here is an example of defined params:
const parameters = {
customer_external_id: '[email protected]',
external_id: 'invoice_1',
external_data: { "game_id": "1" },
name: "Invoice #1 from site.com",
description: "Invoice payment from the main page",
}
When you build your params then you need to generate a signature.
Generate Signature
We need a signature to validate that you can use the widget to accept customer payments. Here is an example of signature generation:
JS Example Code
const crypto = require('crypto');
// You should never expose this key to client code (front-end).
// Make sure to generate signatures only on the back-end
const SECRET_KEY = 'PUT_YOUR_API_SECRET_HERE'
const values = {
theme: 'light', // or 'dark'
customer_external_id: '[email protected]',
external_id: 'invoice_1',
external_data: { "game_id": "1" },
name: "Invoice #1 from site.com",
description: "Invoice payment from the main page",
}
const signature = getSignature({
timestamp: 1684241941,
customer_external_id: values.customer_external_id,
external_id: values.external_id,
external_data: JSON.stringify(values.external_data),
description: values.description,
name: values.name,
}).then(signature => console.log(signature));
async function getSignature(data) {
const sortedData = ksortRecursive({ ...data });
const string = implodeRecursive(sortedData);
const message = `POST` + string;
console.log(message);
const signature = hmacSha256(message, SECRET_KEY);
return signature;
}
async function hmacSha256(data, secret) {
const hash = crypto.createHmac("sha-256", secret).update(data).digest('hex');
return hash;
}
function ksortRecursive(obj) {
if (!Array.isArray(obj) && typeof obj !== 'object') {
return obj;
}
const sortedObj = {};
Object.keys(obj)
.sort()
.forEach((key) => {
const value = obj[key];
sortedObj[key] = ksortRecursive(value);
});
return sortedObj;
}
function implodeRecursive(arr) {
if (!Array.isArray(arr) && typeof arr !== 'object') {
throw new Error('implodeRecursive: argument must be an array or object');
}
let output = '';
Object.keys(arr).forEach((key) => {
const item = arr[key];
if (Array.isArray(item)) {
output += implodeRecursive(item);
} else {
output += item;
}
});
return output;
}
Generate Widget Link
Let's generate query params for the Payment Widget URL:
