Tell Lovable (or similar system…) that you want to integrate HolestPay payments/fiscal/shipping and give it this MD markup: https://apps.holest.com/holest-pay/Lovable_or_similar_ai_system.MD.txt
Lovable will know then what to ask you and what to instruct you to do…
Make sure to SET UP FIRST ALL methods you plan to use on https://sandbox.pay.holest.com/ (payment | fiscal | shipping) and test them using “pay-by-link” (entirely off-site). If everything is configured properly, the integration will go smoothly with just a few queries.
HolestPay FrontCore Guide for Lovable and Similar AI Site Builder Systems – MD file…
# HolestPay FrontCore Integration — Guide for Lovable / AI Code Generators
> **Full technical reference:** https://apps.holest.com/holest-pay/AI_INTEGRATION_GUIDE_FRONTCORE.md.txt
> **Working sample (sandbox):** https://apps.holest.com/holest-pay/test/sandbox-164-hpay-frontcore-sample.html
> (View page source and inspect `<code>` tags for real implementation examples.)
>
> **Sample data files — read these to understand real data structures:**
> - `pos_as_read.json` — https://apps.holest.com/holest-pay/pos_as_read.json
> Full `client.POS` (same as HPay.POS) object as returned by `HPayInit()`. Contains `payment`, `shipping`, and `fiscal` method arrays with all their properties (`Uid`, `HPaySiteMethodId`, `Name`, `Hidden`, `SubsciptionsType`, `POps`, `PayInputUrl`, `Use IFRAME`, etc.). **Read this to know what payment/shipping methods look like before building any selector UI.**
> - `response_sample.json` — https://apps.holest.com/holest-pay/response_sample.json
> Full `hpay_response` object as received in `onHPayResult` event and as POST-back `hpay_forwarded_payment_response`. Contains `payment_status`, `status`, `transaction_uid`, `transaction_user_info`, `vault_token_uid`, `vault_card_brand`, `vault_card_umask`, `vault_exp`, `payment_html`, `fiscal_html`, `integr_html`, `shipping_html`, and all other result fields. **Read this to know what data is available when displaying the thank-you / order confirmation page.**
---
## ?? FIRST ACTION — Ask the User for Their FrontCore Script URL
**Before writing any code, ask the user:**
> *"Please give me your HolestPay FrontCore script URL. It looks like this:*
> `<script src="https://sandbox.pay.holest.com/clientpay/handlers/pos/YOUR-UID/frontend-script-core.js"></script>`
> *Do you have it?"*
**If the user says they don't have it, or doesn't know what it is, explain:**
> *"This is a unique `<script>` tag that HolestPay generates specifically for your POS/site. It contains your Merchant Site UID in the URL and acts as the authorization key for the JavaScript-only checkout — no backend signature is needed because of it.*
>
> *Here is how to get it:*
> 1. Go to https://sandbox.pay.holest.com (if you are testing) or https://pay.holest.com (if you are going live). Create an account if you don't have one.
> 2. Create a **company** on the HPay panel.
> 3. Create a **POS / site** for that company.
> 4. Add the **payment methods** you want to offer. You can test them right away using the built-in **Pay-By-Link** feature (no integration needed for that).
> 5. *(Optional)* Add **fiscal**, **integration**, and/or **shipping** modules if you need them.
> 6. In the top bar, select your company and site, then go to **Site Settings**.
> 7. Find the field **"Frontend Script-Core Origins"** and enter your site's domain (one per line, wildcards allowed — e.g. `*.mysite.com`). Save.
> 8. The panel will immediately display the full `<script>` tag. Copy it and paste it here."*
**Do not proceed with implementation until the user provides this script tag.**
Once you have it, extract the `src` URL — that is all you need to continue.
> ### ?? IMPORTANT — Tell the user this before any code is written:
>
> *"Before we start the implementation, please make sure you have done the following on the HolestPay panel:*
>
> - ? **All payment methods** you want to offer are added to your POS and working
> - ? **Shipping methods** are added and configured (if you need shipping)
> - ? **Fiscal / integration modules** are added and configured (if you need fiscalization)
> - ? **Every method has been tested using the HPay panel's Pay-By-Link feature** — this lets you create a real test payment link without any code and confirm each method actually processes correctly
>
> *This is critical. If a payment method is missing, misconfigured, or untested on the HPay panel, the implementation here will point in the wrong direction and you will waste time debugging something that is actually a panel configuration problem, not a code problem. Fix the HPay panel first, then come back here."*
Then ask the user the following **before starting to build**:
> *"A few things to know before we start:*
>
> - **Existing payment and shipping methods on your site do not need to be removed.** HolestPay payment and shipping methods are added **alongside** whatever you already have. You can keep PayPal, Stripe, manual bank transfer, COD — all of it — and HolestPay methods appear as additional options in the same selectors.
>
> - **Tip:** HolestPay also supports defining **generic payment methods** directly in the HPay panel — cash on delivery (COD), manual bank transfer, and other custom manual methods. If you want everything managed in one place through HolestPay (instead of mixing HolestPay with your platform's built-in methods), that is possible. Just add those methods on the HPay panel as well. But this is entirely optional — you decide what goes through HolestPay and what doesn't.
>
> *Do you also need:*
> - ?? **Shipping modules** — HolestPay can provide shipping method selection with carrier integrations, address autocomplete, and shipping labels/receipts. Do you have shipping methods configured on your HPay POS?
> - ?? **Fiscalization** — HolestPay can issue fiscal receipts automatically after payment (required by law in some countries). Do you have a fiscal module configured on your HPay POS?"*
- ?? **Subscriptions / card saving** — HolestPay can save a card token after the first payment so the buyer doesn't need to re-enter card details next time, or for automatic recurring charges. **Note: not all payment methods support this** — only methods where `pm.SubsciptionsType` contains `"cof"` or `"mit"` do. Do you plan to offer subscriptions or saved-card checkout?
- ?? **Backend admin commands (refunds, captures, cancellations, etc.)** — HolestPay provides admin operations that can be triggered from your order detail / order list pages (e.g. capture a reservation, issue a refund, resend a fiscal receipt). These require the **Merchant Site Secret Key** on the server side.
- **If the site runs on Shopify, BigCommerce, or a similar hosted platform** — skip this, backend is not needed.
- **If you are building a custom backend or the user's platform allows custom server code** — ask: *"Do you want admin payment actions (refund, capture, cancel, etc.) available on your order detail or order list pages?"*
- ?? **Shopify payment method name parity (Shopify only)** — If the user is on Shopify, ask them to create a custom/manual Shopify payment method with the **exact same name** as configured in HolestPay admin. If the name is changed later, it must be updated in **both** Shopify and HolestPay admin to stay aligned.
- ?? **Shopify shipping method/price parity (Shopify only)** — If the user is on Shopify, ask them to configure Shopify shipping rates using the **same shipping method names** as in HolestPay POS, and keep names synchronized in both systems if they are renamed.
- ?? **Footer bank/card/3DS logotypes** — Do you want us to implement the footer branding strip with card logos, bank logos, and 3DS logos sourced from HolestPay POS parameters (as required by banks for production approval)? These logotypes should be visible in the site footer on **all site pages**, not only on checkout.
- ?? **Terms of Service source strategy** — Do you want to use the HolestPay-provided Terms of Service page directly, compare it and merge equivalent clauses into your existing Terms page, or handle Terms in another way?
- ?? **Checkout acceptance checkbox** — Do you need an `I accept Terms of Service` checkbox on checkout, where `Terms of Service` is clickable (opens your TOS page or modal)?
Implement shipping, fiscalization, subscription/card-saving, and backend admin commands **only if the user confirms they need them.** If unsure, tell them they can add it later — the POS configuration drives what is available (`client.POS.shipping`, `client.POS.fiscal`, `pm.SubsciptionsType`, `pm.POps`) and nothing breaks if a feature is not configured.
---
## What FrontCore Is
FrontCore is a **JavaScript-only** HolestPay integration. No backend signature is required for checkout — the POS-specific script URL acts as the authorization token. A secret key is only needed on the server for backend charges and admin operations.
## HolestPay Order Status Format
```shell
[PAYMENT:payment_status][ (fmethod1_uid)_FISCAL:(fmethod1_status) [(fmethod2_uid)_FISCAL:(fmethod2_status)]...][ (imethod1_uid)_INTEGR:(imethod1_status) [(imethod2_uid)_INTEGR:(imethod2_status)]...][ (smethod1_uid)_SHIPPING:packet_no@shipping_status [(smethod2_uid)_SHIPPING:packet_no@shipping_status]...]
```
- ORDER OF SUB-STATUSES SECTIONS PAYMENT -> FISCAL & INTEGRATION -> SHIPPING IS IMPORTANT.
- ORDER OF METHOD STATUSES WITHIN SAME SUB-STATUSES SECTION IS NOT IMPORTANT.
- ONE AND ONLY ONE SPACE CHARACTER AS SUB-STATUSES SEPARATOR IS IMPORTANT.
```shell
Possible payment status:
SUCCESS (alias of PAID)
PAID
PAYING (partially paid, indicates all partial payments are on time; used for advance payments or multi-source payments)
AWAITING (waiting bank transfer, for example)
REFUNDED
PARTIALLY-REFUNDED
VOID
OVERDUE
RESERVED (amount is reserved but still not captured from buyer card)
EXPIRED (used with methods that have expiration)
OBLIGATED (same as AWAITING but when service delivery has started or there is legal means to guarantee payment will happen)
REFUSED
FAILED
CANCELED
```
`PAYMENT:payment_status` may not exist if HolestPay payment module is not used and you do not set it explicitly.
```shell
Possible fiscal module status:
- varies depending on module
```
Fiscal/Integration statuses exist only if fiscal/integration modules add status and are executed.
```shell
Possible packet shipping status:
PREPARING - initial status if shipping address is OK; instructions can be submitted to courier from this status
READY - used by some companies to indicate goods are checked and ready for courier submission
SUBMITTED - request submitted to courier
DELIVERY - under delivery
DELIVERED - delivered
ERROR - error in courier API request
RESOLVING - shipping address (or something else) needs backend attention
FAILED - delivery permanently failed, or courier API refused the request
REVOKED - explicitly canceled by buyer or company
```
Shipping statuses exist only when packets are handled by HolestPay shipping modules.
### ?? FrontCore Security Trade-off — Amount Manipulation
Because everything runs on the frontend without a server-side signature, **FrontCore does not protect against amount manipulation**. A technically skilled buyer could in theory alter the `order_amount` in the JavaScript before the payment is submitted (e.g. change 3000 RSD to 30 RSD) and the payment would succeed at the tampered amount.
**When this is acceptable (most cases):**
- Sites selling **physical/tangible goods** — the merchant sees 30 RSD was paid instead of 3000 RSD and simply does not ship the order. No automated fulfillment happens before a human reviews it.
- Low-risk digital goods or services where order values are small or fixed.
- Situations where the webhook (`notify_url`) result is verified server-side before fulfillment is triggered.
**When you should use the Standard integration instead (server-side signature):**
- Automatic digital fulfillment (license keys, downloads, subscriptions activated instantly)
- High-value orders where manual review of every payment is not practical
- Any case where the server automatically fulfills the order based solely on the payment result without a human check
> **Tell the user this before implementing FrontCore:**
> *"FrontCore is the simplest integration but it does not prevent a determined buyer from manipulating the payment amount on the frontend. For most shops selling physical goods this is fine — you simply don't ship if the paid amount doesn't match the order. If your site automatically delivers digital goods or activates services immediately after payment, you need the **Standard integration with server-side signature** instead — see https://apps.holest.com/holest-pay/AI_INTEGRATION_GUIDE_STANDARD.md.txt — which cryptographically signs each request on your server so the amount cannot be tampered with on the frontend."*
---
## What You Need from the User Before You Start
**The user must provide one thing to start: their FrontCore script `<script>` tag.**
It looks like this (sandbox example):
```html
<script src="https://sandbox.pay.holest.com/clientpay/handlers/pos/07f689c5-5bc8-44b6-a563-8facc6870fab/frontend-script-core.js"></script>
```
The UID segment in the URL (`07f689c5-...`) is the Merchant Site UID — it is embedded in the URL itself.
**If the user confirms they need backend implementation** (admin actions, backend charges — see pre-build questions above), they must also provide:
- **Merchant Site UID** — visible in HPay panel ? Site Settings (also in the FrontCore script URL)
- **Merchant Site Secret Key** — visible in HPay panel ? Site Settings (keep this server-side only, never expose on frontend)
### ?? Configuration values must be easily changeable by the user
Store all three of these as **user-editable configuration** (environment variables, a settings screen, or a clearly marked config file) — **never hardcode them**:
| Value | Where used | Why it changes |
|---|---|---|
| FrontCore script `src` URL | Frontend, global `<script>` tag | Different URL for sandbox vs production, or when switching POS |
| Merchant Site UID | Backend charge requests, admin ops | Changes with sandbox ? production swap or different POS |
| Merchant Site Secret Key | Backend only (charges, admin, webhook verification) | Changes with sandbox ? production swap or different POS |
The most common user action after initial setup is **swapping sandbox ? production** — this should require changing only these three values and nothing else.
---
## Integration Steps
### Step 1 — Add the FrontCore Script
Add the user's script tag **once**, in a global location so it is available on all pages/views. This is important for payment methods like Apple Pay / Google Pay that can be triggered from a product listing page.
```html
<!-- Place in global layout, e.g. <head> or before </body> -->
<!-- USER PROVIDES THIS TAG — store src as a config value so sandbox?production swap is one edit -->
<script src="FRONTCORE_SCRIPT_URL_FROM_USER"></script>
```
When the HPay script is loaded, it also exposes these globals on `window`:
- `window.presentHPayPayForm` — function
- `window.HPayIsSandbox` — environment flag variable
Add a startup check to catch misconfiguration early:
```javascript
// After page load — warn developer if FrontCore failed to initialize
setTimeout(function() {
if (typeof HolestPayCheckout === 'undefined') {
console.error(
'HolestPay FrontCore script did not load. ' +
'Check that the current origin is listed in "Frontend Script-Core Origins" in the HPay panel.'
);
}
}, 5000);
```
---
### Step 2 — Initialize HPay and Load Payment/Shipping Methods
Call `HPayInit()` once when the checkout page loads (or when the user reaches it). It returns a Promise.
- `merchant_site_uid` and environment (`sandbox`/`production`) are **not** parameters — they come from the script URL automatically.
- Language is optional — if omitted, HPay uses the `<html lang="...">` attribute or the language set in HPay panel POS settings.
```javascript
// Save this after HPayInit so it can be used in charge_request and admin ops later
let hpayMerchantSiteUid = null;
HPayInit(/* language optional, e.g. 'en' */).then(async client => {
hpayMerchantSiteUid = client.MerchantsiteUid;
// Filter available methods by buyer's country (recommended)
const country = 'RS'; // use actual buyer country, ISO 3166-1 alpha-2
let availablePayment = [], availableShipping = [];
try { availablePayment = await HPay.availablePaymentMethods(country, orderAmount, orderCurrency); } catch(e) {}
try { availableShipping = await HPay.availableShippingMethods(country, orderAmount, orderCurrency); } catch(e) {}
// Populate payment method selector
client.POS.payment.forEach(pm => {
if (!pm.Hidden && (!availablePayment.length || availablePayment.find(m => m.Uid == pm.Uid))) {
// Add pm to your UI selector
// pm.HPaySiteMethodId ? use as pay_request.payment_method
// pm.Name ? display name (use this — do NOT invent a name)
// pm.SubsciptionsType ? contains "cof" or "mit" ? card saving is supported for this method
// pm.POps ? e.g. "charge,refund" ? backend operations available
// pm.PayInputUrl ? if set, this method supports docking (embedded payment input)
// pm['Use IFRAME'] ? if false, method uses redirect flow (bank page POST redirect)
}
});
// Populate shipping method selector (if POS has shipping configured)
if (client.POS.shipping) {
client.POS.shipping.forEach(sm => {
if (!sm.Hidden && (!availableShipping.length || availableShipping.find(m => m.Uid == sm.Uid))) {
// sm.HPaySiteMethodId ? use as pay_request.shipping_method
// sm.Name ? display name
}
});
}
});
```
> **Make sure existing payment methods in your UI have a name and description.** Use `pm.Name` from the POS config — do not hardcode or invent names.
---
### Step 3 — Build the `pay_request` and Initiate Payment
```javascript
const pay_request = {
// NOTE: merchant_site_uid is NOT included here for FrontCore — the script handles auth automatically
hpaylang: 'en', // optional
order_uid: 'ORDER-20260425-001', // required — unique per order
order_name: '#Order 204', // optional
order_amount: '15000.00', // required — string, in smallest currency unit or decimal
order_currency: 'RSD', // required — ISO 4217
payment_method: '179', // required — pm.HPaySiteMethodId from Step 2
shipping_method: '45', // optional — sm.HPaySiteMethodId
order_user_url: 'https://yoursite.com/thanks', // recommended — redirect/thank-you page URL
notify_url: 'https://yoursite.com/webhook', // optional — server-to-server webhook (must be publicly reachable)
cof: 'optional', // optional — 'optional'|'required'|'none' — enables card saving
vault_token_uid: '', // optional — saved token UUID, or 1|true|new to force new token
order_billing: { // optional but recommended
email: 'customer@example.com',
first_name: 'TEST',
last_name: 'TEST',
phone: '+38111111111',
is_company: 0,
company: '', // company legal name
company_tax_id: '', // company tax ID in merchant's country
company_reg_id: '', // company registration ID in merchant's country
address: 'TEST', // street name
address2: '', // recommended for street number / address addition
city: 'Beograd',
country: 'RS',
state: 'Beograd',
postcode: '11000',
lang: 'sr_RS' // language from merchant platform/system
},
order_shipping: { // optional
shippable: false,
is_cod: 1, // set to 1 when COD logic is used/allowed
first_name: '',
last_name: '',
phone: '',
company: '',
address: '', // street name
address2: '', // recommended for street number / address addition
city: '',
country: '',
state: '',
postcode: ''
},
order_items: [ // strongly recommended for reconciliation
{
posuid: 114, // merchant's own internal item ID (string or number)
type: 'product',
name: 'Sample product name',
sku: '000550',
qty: 1,
price: 4695.99,
subtotal: 4695.99,
tax_label: '',
tax_amount: 0,
length: '', // always in centimeters (cm)
width: '', // always in centimeters (cm)
height: '', // always in centimeters (cm)
weight: '', // always in grams (g)
split_pay_uid: '',
virtual: true,
tax_percent: 0
}
]
};
// Remove empty fields before sending
Object.keys(pay_request).forEach(k => { if (pay_request[k] === '') delete pay_request[k]; });
// Initiate payment — shows modal or triggers redirect depending on payment method
HPay.presentHPayPayForm(pay_request);
```
**Important — `order_items` field naming must match HolestPay template keys:**
- Use `name`, not `title`
- Use `posuid`, not `variantId`
- Use `qty`, not `quantity`
- `subtotal` is mandatory for each item line
- `posuid` can be any identifier from the merchant's system (SKU/variant/product/internal DB ID)
If source platform fields are Shopify-style, map them explicitly before sending:
- `variantId -> posuid`
- `title -> name`
- `quantity -> qty`
- top-level `items -> order_items`
The same order payload structure is used across all three markups/docs (Lovable prompt, FrontCore guide, Standard guide).
Address convention recommendation: use `address` for street name and `address2` for street number/additional address details.
---
### Step 4 — Docking (Embedded Payment Input)
Some payment methods support an embedded payment input directly in the page (e.g. card form inline). Check `pm.PayInputUrl` — if it is set, docking is supported for that method.
Call `HPay.setPaymentMethodDock()` **when the user selects a payment method or when any checkout field changes** (amount, currency, etc.).
```html
<!-- Place dock container below payment method description in your checkout UI -->
<div id="paymentMethodDock" style="max-width:460px;"></div>
```
```css
#paymentMethodDock { background: #ffffff9e; }
```
```javascript
function updateDock() {
const selectedPm = /* pm object for selected payment method */;
if (selectedPm && selectedPm.PayInputUrl) {
HPay.setPaymentMethodDock(
pay_request.payment_method,
{
order_amount: pay_request.order_amount,
order_currency: pay_request.order_currency,
monthly_installments: null,
vault_token_uid: pay_request.vault_token_uid || null,
hpaylang: pay_request.hpaylang,
cof: pay_request.cof
},
document.getElementById('paymentMethodDock')
);
} else {
document.getElementById('paymentMethodDock').innerHTML = '';
}
}
```
---
### Step 5 — Handle Results
#### A — Event handler (iframe / modal methods)
Most payment methods return the result via this event, fired on the current page:
```javascript
document.addEventListener('onHPayResult', function(e) {
const r = e.hpay_response;
if (!r) return;
if (r.error && r.error.code) {
// Payment error — retry
HPay.presentHPayPayForm(pay_request);
return;
}
if (/PAID|RESERVED|SUCCESS|PAYING|OBLIGATED|AWAITING/i.test(r.payment_status)) {
// Payment completed or pending payment instructions (AWAITING/OBLIGATED are NOT failed)
// Clear cart for PAID/RESERVED and also for PAYING/AWAITING/OBLIGATED.
// Display HTML receipts in dedicated containers on your thank-you page:
// r.payment_html ? payment receipt HTML
// r.fiscal_html ? fiscal receipt HTML (if fiscal module active)
// r.integr_html ? integration module HTML
// r.shipping_html ? shipping label/receipt HTML (if shipping module active)
// r.transaction_user_info ? object with card brand, masked number, etc.
if (r.vault_token_uid) {//only if card save is on for some reason subscription or simply token save for faster checkout
// IMPORTANT: save this to your database linked to the user account — do NOT only store in browser
const saveCardData = {
vault_token_uid: r.vault_token_uid, //e.g. hJ0khUi67856765rtyrytrytry 12 up to 128 characters
vault_card_brand: r.vault_card_brand, // e.g. "MASTERCARD"
vault_card_umask: r.vault_card_umask, // e.g. "544358******4639"
vault_exp: r.vault_exp, // e.g. "12/26"
vault_scope: r.vault_scope, // e.g. can be Terminal ID fro payment method config or soemthinglike that
vault_onlyforuser: r.vault_onlyforuser, //subscription falsy | fast checkout 0
pay_method_uid: r.pay_method_uid //Uid of payment method from HPay.POS.payment[N].Uid
};
// POST saveCardData to your backend
}
// Redirect to thank-you page if needed:
// window.location.href = r.order_user_url;
}
// r.status ? order status (always present)
});
document.addEventListener('onHPayPanelClose', function(e) {
const r = e.hpay_response; // null if user closed without completing
const reason = String((r && r.reason) || '').toLowerCase();
// If pay button was locked during payment start, unlock it on close reasons below.
if (/^(user|timeout|cancel|error)$/.test(reason)) {
const payBtn = document.getElementById('do-pay');
if (payBtn) payBtn.disabled = false;
}
if (r && r.reason === '' && /* user wants retry */ false) {
setTimeout(() => HPay.presentHPayPayForm(pay_request), 300);
}
});
```
#### B — POST-back redirect (redirect methods)
Some payment methods (e.g. certain bank integrations) require a **full page redirect to the bank**. `HPay.presentHPayPayForm()` handles this automatically with a POST redirect. After the bank interaction, the user is returned to `order_user_url` via a POST-back.
On `order_user_url` (your thank-you/return page), read the result from the POST body:
```javascript
// Server-side (Node.js example)
// The POST body contains: hpay_forwarded_payment_response = JSON string
const result = JSON.parse(req.body.hpay_forwarded_payment_response);
// result is the same structure as e.hpay_response from onHPayResult
```
> Implement **both** the event handler (Step 5A) and the POST-back handler (Step 5B). Which one fires depends on the payment method the buyer chooses — you cannot predict it at build time.
#### C — Webhook topics, panel URL, and `notify_url` override
If server-to-server notifications are needed, configure panel setting:
- `I(P|S|F|I)N - Link za instant notifikacije - plaćanje/isporuka/fiskal/integracije`
- `I(P|S|F|I)N - Instant payment/shipping/fiscal/integation notification url`
If request payload includes `notify_url`, it overrides panel-level `I(P|S|F|I)N` URL for that request.
HPay appends query string parameter `topic` and sends POST JSON.
`topic` can be:
- `payresult` — same shape as `onHPayResult` / `https://apps.holest.com/holest-pay/response_sample.json`
- `orderupdate` — root includes `order_uid`, `status`, `vhash`; payload fields are the same as `payresult`; and has `order` property with HolestPay order object in the same format as `ord` from `HPay.getOrder(order_uid).then(ord => {...})` (`https://apps.holest.com/holest-pay/hpay_order_sample.json`) (`"id"` is ID from HPay system); validate `vhash` the same way as `payresult`
- `posconfig-updated` — contains POS object (`HPay.POS` format plus non-public fields), `environment`, and `checkstr = md5(${merchant_site_uid}${secret_token})`
Important payload mapping note:
- Request and response payloads are similar in shape; response usually contains request fields plus normalization and additional result fields.
- Hash field names are different by direction: request -> `verificationhash`, response -> `vhash`.
- `order` payload is a different model (same as `HPay.getOrder(...)` `ord` object), so do not map it as request/response.
- Example key differences:
- request/response `order_uid`, `order_amount`, `order_currency` -> order object `Uid`, `Amount`, `Currency`
- request/response `order_items`, `order_billing`, `order_shipping` -> order object `Data.items`, `Data.billing`, `Data.shipping`
- fiscal method specific data -> `order.FiscalData[fiscal_method_uid] = {...}` (module-specific payload)
- integration method data -> `order.Data[integr_method_uid] = {...}` (may exist or may be empty/missing)
- shipping method data -> `order.ShippingData[real_or_temp_shipping_code] = { method_uid: shipping_method_uid, ... }`
The same result may arrive from browser callback and webhook; use `vhash` (plus order/transaction IDs) to prevent duplicate processing.
#### D — Redirect POST-back parse robustness
For redirect methods, HPay can return result via:
```html
<form method='POST' id='frmRedirect' action='${order_user_url}'>
<input type='hidden' name='hpay_forwarded_payment_response' id='hpay_response' />
</form>
<script nonce='${csp_nonce}'>
document.getElementById('hpay_response').value = JSON.stringify(hpay_result);
document.getElementById('frmRedirect').submit();
</script>
```
If `JSON.parse` fails on first try, normalize escaped payload and retry:
```javascript
function parseForwardedHPayResponse(raw) {
if (!raw) return null;
if (typeof raw === 'object') return raw;
try { return JSON.parse(raw); } catch (_) {}
const unescaped = String(raw).replace(/\\\\\"/g, '"').replace(/\\\\\\\\/g, '\\');
try { return JSON.parse(unescaped); } catch (_) {}
return null;
}
```
---
### Step 6 — Display HTML Receipts on Thank-You Page
On the thank-you page, always render data in this order:
1) `transaction_user_info` block first
2) `payment_html`, `fiscal_html`, `shipping_html`, `integr_html` blocks
For bank production approval, thank-you page must also show complete order summary for all outcomes (success, failed, awaiting payment):
- buyer/customer identity data
- billing and email data
- shipping data
- order number
- ordered products list with quantity, unit price, and line totals
- shipping cost
- payment method name and shipping method name
- grand total amount
If any field is missing in response, keep the block visible and show a placeholder message.
Create containers for transaction details and each receipt type:
```html
<div id="hpay-transaction-user-info"></div> <!-- translated keys, original values -->
<div id="hpay-receipt-payment"></div> <!-- payment receipt -->
<div id="hpay-receipt-fiscal"></div> <!-- fiscal receipt (white background recommended for legibility) -->
<div id="hpay-receipt-integr"></div> <!-- integration module output -->
<div id="hpay-receipt-shipping"></div> <!-- shipping label / receipt -->
```
```javascript
function renderTransactionUserInfo(info, keyMap) {
const host = document.getElementById('hpay-transaction-user-info');
if (!host) return;
host.innerHTML = '';
if (!info || typeof info !== 'object' || !Object.keys(info).length) {
host.innerHTML = '<p class="hpay-placeholder">Transaction details are not available.</p>';
return;
}
const dl = document.createElement('dl');
Object.entries(info).forEach(([k, v]) => {
const dt = document.createElement('dt');
const dd = document.createElement('dd');
dt.textContent = keyMap[k] || k; // keys can be translated
dd.textContent = String(v ?? ''); // values must stay original
dl.appendChild(dt);
dl.appendChild(dd);
});
host.appendChild(dl);
}
renderTransactionUserInfo(r.transaction_user_info, {
'Order UID': 'Order UID',
'Payment Status': 'Payment Status',
'Transaction Time': 'Transaction Time',
'Amount in order currency': 'Amount in order currency',
'Amount in payment currency': 'Amount in payment currency',
'Bank Account': 'Bank Account',
'REF MOD97 PNB': 'REF MOD97 PNB',
'Purphose': 'Purpose'
});
const FALLBACK_HTML = '<p class="hpay-placeholder">Not available for this payment.</p>';
document.getElementById('hpay-receipt-payment').innerHTML = r.payment_html || FALLBACK_HTML;
document.getElementById('hpay-receipt-fiscal').innerHTML = r.fiscal_html || FALLBACK_HTML;
document.getElementById('hpay-receipt-shipping').innerHTML = r.shipping_html || FALLBACK_HTML;
document.getElementById('hpay-receipt-integr').innerHTML = r.integr_html || FALLBACK_HTML;
```
Example `transaction_user_info` payload:
```json
{
"transaction_user_info": {
"Order UID": "NIPI-1777290504591-8X6YD2",
"Payment Status": "AWAITING",
"Transaction Time": "2026-04-27 13:48:27.847Z",
"Amount in order currency": "1360.00 RSD",
"Amount in payment currency": "1360.00 RSD",
"Bank Account": "160-6000002552312-02",
"REF MOD97 PNB": "(97) 2726042713",
"Purphose": "Order npinipi17772905045918x6yd2"
}
}
```
Rule: keys may be translated for UI labels, but values should be displayed exactly as received. If any section is missing, render a visible placeholder instead of hiding the section.
For `AWAITING` and `OBLIGATED`, always render `payment_html` on the thank-you page. These are not failed statuses; they are commonly used for account/invoice payment instructions (bank transfer details).
Cart handling rule: clear cart for `PAID`, `RESERVED`, `PAYING`, `AWAITING`, and `OBLIGATED` (same cart behavior for all these statuses).
---
### Step 7 — Verify Response `vhash` on Server (Node.js)
Important naming:
- request to HPay (`pay_request` / `charge_request`) -> field `verificationhash` -> generate with `generatePOSRequestSignature(...)`
- response from HPay (browser callback / webhook) -> field `vhash` -> validate with `verifyHPayResponse(...)`
Always verify response `vhash` server-side before marking order as paid/fulfilled.
```javascript
const crypto = require('crypto');
const md5 = require('md5');
function generatePOSRequestSignature(merchant_site_uid, secretKey, payload) {
const amount = Number(payload.order_amount ?? 0).toFixed(8);
const src =
String(payload.transaction_uid ?? '').trim() + '|' +
String(payload.status ?? '').trim() + '|' +
String(payload.order_uid ?? '').trim() + '|' +
amount + '|' +
String(payload.order_currency ?? '').trim() + '|' +
String(payload.vault_token_uid ?? '').trim() + '|' +
String(payload.subscription_uid ?? '').trim() +
String(payload.rand ?? '').trim();
const srcMd5 = md5(src + merchant_site_uid);
return crypto.createHash('sha512').update(srcMd5 + secretKey).digest('hex').toLowerCase();
}
function verifyHPayResponse(result, merchant_site_uid, secretKey) {
if (!result || !result.vhash) return false;
if (!result.order_uid || !String(result.order_uid).trim()) return false;
const expected = generatePOSRequestSignature(merchant_site_uid, secretKey, {
transaction_uid: result.transaction_uid ?? '',
status: result.status ?? '',
order_uid: result.order_uid,
order_amount: result.order_amount ?? 0,
order_currency: result.order_currency ?? '',
vault_token_uid: result.vault_token_uid ?? '',
subscription_uid: result.subscription_uid ?? '',
rand: result.rand ?? ''
});
return expected === String(result.vhash).toLowerCase();
}
```
---
## Optional — Advanced: Backend Charges (Server-Side, Subscriptions / MIT)
> **Skip this section** unless the user explicitly asked for subscriptions or automatic recurring charges. This is used by a small fraction of integrations. The standard checkout flow (Steps 1–6—6) is completely independent of this.
### What it is
A backend charge lets your **server** silently charge a customer's saved card without any buyer interaction — no payment form, no redirect. This is used for:
- Recurring subscription billing (charge every month automatically)
- MIT (Merchant Initiated Transactions) — charging after service delivery
### Prerequisites for backend charge
- A payment method with `pm.SubsciptionsType` containing `"cof"` or `"mit"` must be active on the POS
- `pm.POps` must contain `"charge"` for that method
- A `vault_token_uid` saved from a previous successful checkout (from `r.vault_token_uid` in `onHPayResult`) must exist in your database for that customer
- **Merchant Site UID** and **Merchant Site Secret Key** (server-side only)
### How the token gets saved
During a normal checkout (Step 5), if card saving was enabled (`cof: 'optional'|'required'`), the `onHPayResult` response will contain a `vault_token_uid`. You **must save this to your database** linked to the user's account. The backend charge uses this token later.
### Backend charge request (Node.js)
```javascript
// SERVER-SIDE ONLY — never run this on the frontend
const crypto = require('crypto');
const md5 = require('md5');
// Signature function — required to authenticate the charge request
function generatePOSRequestSignature(merchant_site_uid, secretKey, request) {
const amt = parseFloat(request.order_amount || 0).toFixed(8);
let cstr = [request.transaction_uid, request.status, request.order_uid,
amt, request.order_currency, request.vault_token_uid,
request.subscription_uid].map(v => String(v || '').trim()).join('|');
cstr += String(request.rand || '').trim();
return crypto.createHash('sha512')
.update(md5(cstr + merchant_site_uid) + secretKey)
.digest('hex').toLowerCase();
}
// charge_request has same structure as pay_request but:
// - merchant_site_uid IS required (backend operation)
// - vault_token_uid IS required (the saved token from your DB)
// - order_user_url is NOT needed (no buyer to redirect)
// - cof is NOT needed
const charge_request = {
merchant_site_uid: MERCHANT_SITE_UID, // from config — never hardcode
order_uid: 'ORDER-20260425-001', // unique per charge attempt
order_amount: '15000',
order_currency: 'RSD',
payment_method: '179', // pm.HPaySiteMethodId
vault_token_uid: 'saved-token-from-db', // from your database for this customer
};
charge_request.verificationhash = generatePOSRequestSignature(
charge_request.merchant_site_uid, MERCHANT_SITE_SECRET, charge_request
);
const BASE_URL = 'https://sandbox.pay.holest.com'; // or https://pay.holest.com for production
const response = await fetch(BASE_URL + '/clientpay/charge', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(charge_request)
});
const result = await response.json();
// result has same structure as e.hpay_response from onHPayResult
// check result.payment_status for PAID|RESERVED|SUCCESS|PAYING|OBLIGATED|AWAITING
if (/PAID|PAYING|RESERVED|OBLIGATED|AWAITING/i.test(result.payment_status)) {
// charge succeeded
}
```
---
## Optional: Shipping Address Autocomplete (AdaptCheckout)
If the user uses HolestPay shipping modules, some methods provide address autocomplete/suggestion UI. Call `adaptCurrentShipping()` whenever the selected shipping method changes. Pass `null` to destroy the adapter when no shipping method is selected.
The selector strings map your existing checkout input fields to HolestPay's address model — **update them to match your actual input selectors**.
```javascript
let adapted_checkout_destroy = null;
let adapted_shipping_method_uid = null;
function adaptCurrentShipping(shipping_method_uid) {
try {
if (shipping_method_uid) {
if (shipping_method_uid === adapted_shipping_method_uid) return;
const smethod = HPay.POS.shipping.find(s => s.Uid == shipping_method_uid);
if (smethod && smethod.AdaptCheckout) {
adapted_checkout_destroy = smethod.AdaptCheckout({
billing: {
address: "#addressInput[name='address1']", // update selectors to match your inputs
address_num: "#addressLine2Input[name='address2']",
postcode: "#postCodeInput[name='postalCode']",
city: "#cityInput[name='city']",
municipality: "#provinceInput[name='stateOrProvince']",
phone: "#phoneInput[name='phone']",
country: "#countryCodeInput[name='countryCode']",
is_company: "#companyInput[name='company']",
company: "#companyInput[name='company']",
company_tax_id: "",
company_reg_id: ""
},
shipping: {
address: "#addressInput[name='shippingAddress.address1']",
address_num: "#addressLine2Input[name='shippingAddress.address2']",
postcode: "#postCodeInput[name='shippingAddress.postalCode']",
city: "#cityInput[name='shippingAddress.city']",
municipality: "#provinceInput[name='shippingAddress.stateOrProvince']",
phone: "#phoneInput[name='shippingAddress.phone']",
country: "#countryCodeInput[name='shippingAddress.countryCode']",
is_company: "#companyInput[name='shippingAddress.company']",
company: "#companyInput[name='shippingAddress.company']",
company_tax_id: "",
company_reg_id: ""
}
}) || null;
adapted_shipping_method_uid = shipping_method_uid;
}
} else {
if (adapted_checkout_destroy) {
adapted_checkout_destroy();
adapted_checkout_destroy = null;
adapted_shipping_method_uid = null;
}
}
} catch(ex) { console.error(ex); }
}
```
---
## No Backend Needed for Basic Checkout
If the site runs on Shopify, BigCommerce, or any platform where you cannot run custom server code, the FrontCore flow (Steps 1–6—6) is fully self-contained — no backend is required for standard checkout. Backend code is only needed if you implement:
- **Backend charges** (subscription / MIT auto-charge)
- **Admin operations** (refunds, captures, etc.)
- **Webhook verification** (verify response `vhash` from `notify_url` payload)
For webhooks and backend operations you also need the **Merchant Site Secret Key** (from HPay panel ? Site Settings).
---
## Checklist
- [ ] FrontCore `<script>` tag added globally (all pages/views)
- [ ] Script URL stored as a single config value (easy sandbox ? production swap)
- [ ] `HPayInit()` called on checkout page load; `client.MerchantsiteUid` saved
- [ ] Payment method selector populated from `client.POS.payment` using `pm.Name` and `pm.HPaySiteMethodId`
- [ ] Shipping method selector populated from `client.POS.shipping` (if applicable)
- [ ] `onHPayResult` event handler implemented
- [ ] POST-back handler implemented on `order_user_url` page (for redirect-type methods)
- [ ] Receipt containers (`payment_html`, `fiscal_html`, `integr_html`, `shipping_html`) present on result page
- [ ] If card saving used: `vault_token_uid` saved to database on successful payment
- [ ] Dock container present if any payment method supports docking (`pm.PayInputUrl`)
- [ ] Footer logotypes rendered from `HPay.POS.pos_parameters` (cards, banks, 3DS)
- [ ] TOS checkbox present near Pay button; TOS content from `/clientpay/tos/<uid>`
---
## Required for Bank Production Approval — Logotypes and Terms of Service
> ?? **This section has nothing to do with payment functionality** — payments work without it. However, **almost all banks in the region will require these elements to be present on the site before approving the POS for production use.** Implement these alongside the payment integration.
---
### Footer Logotypes (Card logos, Bank logos, 3DS logos)
Banks require card brand logos, acquiring bank logos, and 3DS security logos to appear in the site footer — in a single horizontal line, **no taller than approximately 1 cm visually**. Order: card logos first, bank logos in the middle (with some spacing on both sides), 3DS logos on the right. Bank and 3DS logos must be linked. The footer strip must be visible across **all pages of the website**, not just the checkout page.
HolestPay provides all logo image URLs and link targets via `HPay.POS.pos_parameters` after `HPayInit()`. Use them — do not source logos elsewhere.
**CSS for the footer branding strip:**
```css
.hpay_footer_branding_wrapper {
width: 100%;
padding: 8px 0;
border-top: 1px solid #e0e0e0;
}
.hpay_footer_branding {
display: flex;
align-items: center;
gap: 0;
flex-wrap: nowrap;
}
.hpay-footer-branding-cards,
.hpay-footer-branding-bank,
.hpay-footer-branding-3ds {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.hpay-footer-branding-bank { margin: 0 12px; }
.hpay_footer_branding img { height: 1cm; width: auto; display: inline-block; }
```
**JavaScript — call this after `HPayInit()` resolves:**
```javascript
function renderHPayFooterLogotypes() {
if (!(typeof HPay !== 'undefined' && HPay && HPay.POS)) return;
if (!HPay.POS.pos_parameters) return;
let card_images_html = '';
let banks_html = '';
let threes_html = '';
if (HPay.POS.pos_parameters['Logotypes Card Images']) {
HPay.POS.pos_parameters['Logotypes Card Images'].split('\n').forEach(src => {
if (src.trim()) card_images_html += `<img src="${src.trim()}" alt="Card" />`;
});
}
if (HPay.POS.pos_parameters['Logotypes Banks']) {
HPay.POS.pos_parameters['Logotypes Banks'].split('\n').forEach(line => {
if (!line.trim()) return;
// format: "imageUrl:linkUrl" — colons in URLs are escaped before splitting
const t = line.replace(/https:/gi, '-PS-').replace(/http:/gi, '-P-')
.split(':').map(r => r.replace(/-P-/g, 'http:').replace(/-PS-/g, 'https:'));
banks_html += t.length > 1
? `<a href="${t[1]}" target="_blank"><img src="${t[0]}" alt="Bank" /></a>`
: `<img src="${t[0]}" alt="Bank" />`;
});
}
if (HPay.POS.pos_parameters['Logotypes 3DS']) {
HPay.POS.pos_parameters['Logotypes 3DS'].split('\n').forEach(line => {
if (!line.trim()) return;
const t = line.replace(/https:/gi, '-PS-').replace(/http:/gi, '-P-')
.split(':').map(r => r.replace(/-P-/g, 'http:').replace(/-PS-/g, 'https:'));
threes_html += t.length > 1
? `<a href="${t[1]}" target="_blank"><img src="${t[0]}" alt="3DS" /></a>`
: `<img src="${t[0]}" alt="3DS" />`;
});
}
const logotypesDiv = document.createElement('div');
logotypesDiv.className = 'hpay_footer_branding';
logotypesDiv.innerHTML =
`<div class="hpay-footer-branding-cards">${card_images_html}</div>` +
`<div class="hpay-footer-branding-bank">${banks_html}</div>` +
`<div class="hpay-footer-branding-3ds">${threes_html}</div>`;
const wrapper = document.createElement('div');
wrapper.className = 'hpay_footer_branding_wrapper';
wrapper.appendChild(logotypesDiv);
(document.querySelector('footer') || document.querySelector('main') || document.body)
.appendChild(wrapper);
}
// Call after HPayInit resolves:
// HPayInit().then(client => { renderHPayFooterLogotypes(); });
```
---
### Terms of Service Acceptance Checkbox
Almost all banks in the region require the customer to explicitly accept the site Terms of Service before payment — typically a checkbox with a link to the TOS content.
**HolestPay provides a ready-to-use Terms of Service / Purchase Conditions template page for each POS/site:**
```
https://sandbox.pay.holest.com/clientpay/tos/<merchant_site_uid>?lang=rs
https://pay.holest.com/clientpay/tos/<merchant_site_uid>?lang=en
```
Supported `lang` values: `en`, `rs`, `bs`, `hr`, `me`, `de`, `es`, `gr`, `tr`, `mk`, and others.
This URL returns HTML content (no `<html>` wrapper) and can be:
- Loaded in an `<iframe>`
- Fetched with `fetch()` / AJAX and injected into a modal
- Opened directly in the browser (use `target="_blank"`)
> ?? **Important:** This is **not** a separate "second HolestPay Terms" that replaces your site Terms. The `/clientpay/tos/<merchant_site_uid>` content is a merchant-specific **template/proposal of your own purchase Terms** (with your POS/merchant context), meant to be used as the same Terms of Service page your checkout checkbox points to. Keep one coherent TOS page for customers (your site TOS), and ensure it includes the required payment clauses.
**Implementation — TOS modal using HolestPay built-in dialog** (`hpay_dialog_open` becomes available after `client.loadHPayUI()` resolves):
```javascript
// Call client.loadHPayUI() first to make hpay_dialog_open available:
// HPayInit().then(client => client.loadHPayUI()).then(() => { /* hpay_dialog_open is ready */ });
function openTOS(merchant_site_uid, lang) {
const tos_url = `https://sandbox.pay.holest.com/clientpay/tos/${merchant_site_uid}?lang=${lang || 'en'}`;
// Replace sandbox host with pay.holest.com for production
hpay_dialog_open('tos', 'Terms of Service', tos_url, 'large', {
['I understand and accept these Terms of Service']: {
Run: function(dlg) {
dlg.close();
if (dlg.parentNode) dlg.parentNode.removeChild(dlg);
// Mark TOS as accepted — enable the Pay button or proceed with payment
},
action_position: 'center',
style: { 'min-width': '120px' }
}
});
}
```
**Minimum required UI — add this near the Pay button:**
```html
<label style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
<input type="checkbox" id="tos-accept" required />
<span>
I accept the
<a href="#" onclick="openTOS(MERCHANT_SITE_UID, 'en'); return false;">Terms of Service</a>
</span>
</label>
<!-- Disable Pay button until checkbox is checked -->
```
```javascript
document.getElementById('tos-accept').addEventListener('change', function() {
document.getElementById('do-pay').disabled = !this.checked;
});
```
**Checklist for bank approval:**
- [ ] Card brand logos visible in footer (from `HPay.POS.pos_parameters['Logotypes Card Images']`)
- [ ] Bank logos visible in footer, linked (from `HPay.POS.pos_parameters['Logotypes Banks']`)
- [ ] 3DS logos visible in footer, linked (from `HPay.POS.pos_parameters['Logotypes 3DS']`)
- [ ] All logos in a single horizontal line, max ~1 cm height
- [ ] TOS checkbox present near the Pay button, Pay button disabled until checked
- [ ] TOS content matches or includes HolestPay-provided TOS (`/clientpay/tos/<uid>`)
---
## Test Cards for Sandbox Testing
Test card numbers for almost all supported banks and payment methods can be found directly on the **dashboard page** of the HolestPay sandbox panel at https://sandbox.pay.holest.com — no need to search elsewhere. Log in and check the dashboard.
---
## Terms of Service Page — Required Content
The "Terms of Service" page that the customer checks before payment must be **comprehensive and self-contained**. Because the customer ticks a single "I accept the Terms of Service" checkbox that links to this one page, **everything required by the bank and by law must be covered on that exact page** — not spread across separate pages.
The following must be present in the Terms of Service content (either written directly or clearly summarized with a reference to the full document inline):
- **Purchase conditions** — what is being sold, pricing, order confirmation process
- **Delivery policy** — delivery methods, timeframes, costs, geographic coverage
- **Refund and return policy** — conditions, process, and timeframes for refunds and returns
- **PCI DSS statement** — explicit confirmation that card data transfer/processing is secured according to PCI DSS standards and that the merchant does not store raw card data (HolestPay handles card processing on the merchant's behalf)
- **Merchant contact information** — legal business name, address, email, and phone number for customer support
> The merchant may have separate dedicated pages for privacy policy, delivery conditions, refund policy, etc. — that is fine. But **all of the above topics must also appear on the single Terms of Service page** that the payment checkbox links to, because that is the only page the customer is asked to review and accept before paying.
> HolestPay provides a base TOS/purchase-conditions text via `/clientpay/tos/<merchant_site_uid>` that already includes payment-security wording (including PCI DSS transfer handling). Treat it as baseline content for the merchant's own single Terms page, then extend it with delivery, refund, and contact details — not as a separate second TOS document.
---
## Before Requesting Bank Production Approval — Site Readiness
Before the merchant contacts their bank to activate the POS for production, the site must be genuinely complete. A bank technician will review the site manually and will reject it if it does not look like a real, finished online store.
**The following will cause immediate rejection:**
- **Placeholder content** — any "Lorem ipsum", "Coming soon", "Test product", dummy images, or unfilled template text anywhere on the site
- **Mixed languages** — site content, product names, descriptions, and all pages must be consistently in one language (or properly localized if multilingual); a mix of languages on the same page signals an unfinished site
- **Missing or incomplete pages** — the site must have real products/services with actual descriptions and prices, a working checkout flow, and all required legal pages (Terms of Service, Privacy Policy, Contact/About)
- **Non-functional links or broken pages** — every linked page must load and contain real content
- **Test or sandbox data visible** — no test order UIDs, sandbox URLs, or debug output visible to visitors
> Tell the user: *"Before you ask your bank to approve the POS for production, make sure the site looks like a finished, real store. Bank technicians visit the site in person before approving. If they see Lorem ipsum text, empty product pages, mixed languages, or anything that looks unfinished, they will ask you to complete the site first and resubmit — which adds weeks to the process."*
---
## Bank Validation Testing Before Production Approval
Most banks require a **formal validation test** to be performed before activating the POS for production. This is separate from the developer's own sandbox testing.
What this typically involves:
- The bank provides a set of **specific test scenarios** that must be completed successfully (e.g. approved payment, declined payment, 3DS challenge flow, cancellation)
- Tests are performed using **test cards provided by the bank** (which may differ from the general sandbox test cards on the HPay dashboard)
- Results are reported back to the bank (sometimes automatically via their test monitoring system, sometimes manually by the merchant)
- **Whether validation testing is required, and exactly how it is done, depends on the bank and the specific payment method** — some banks require it for every new integration, others only for certain card brands or 3DS configurations
> Tell the user: *"Before your bank activates the production POS, they will likely ask you to run a set of validation test payments using specific test cards they provide. This is a standard bank requirement and is separate from the testing you did during development. Contact your bank's technical integration team to find out exactly what tests are required for your payment method — HolestPay sandbox will be used for these tests as well."*
---
## Shipping Method UI — Required `hpay-sm-options` Placeholder
In the UI element that displays a shipping method's description (the area shown to the buyer when they select a shipping method), you **must include an empty `<span>` with the class `hpay-sm-options` and attribute `hpay_shipping_method_id="<hpay_shipping_method.HPaySiteMethodId>"`**:
```html
<span class="hpay-sm-options" hpay_shipping_method_id="<hpay_shipping_method.HPaySiteMethodId>"></span>
```
HolestPay uses this element to inject additional shipping options and information (e.g. parcel locker selector, delivery time slots, carrier tracking info) for the selected shipping method. Without this placeholder, those features will silently fail to render.
Place it inside the shipping method description container, after any static description text:
```html
<div class="shipping-method-description">
<!-- your static description text here -->
<span class="hpay-sm-options" hpay_shipping_method_id="45"></span>
</div>
```
---
## Content Security Policy (CSP) and Site Configuration Requirements
For HolestPay to function correctly, the site must permit the following — ensure these are not blocked by Content Security Policy headers, server configuration, or any firewall/proxy:
### Allowed origins (iframes, scripts, XHR/fetch, content)
The site must allow iframes, scripts, and content loaded from:
```
https://pay.holest.com
https://sandbox.pay.holest.com
```
If the site sets a `Content-Security-Policy` header, include these in all relevant directives:
```
Content-Security-Policy:
script-src 'self' https://pay.holest.com https://sandbox.pay.holest.com ...;
frame-src 'self' https://pay.holest.com https://sandbox.pay.holest.com ...;
connect-src 'self' https://pay.holest.com https://sandbox.pay.holest.com ...;
img-src 'self' https://pay.holest.com https://sandbox.pay.holest.com data: ...;
```
### `eval()` must be permitted
HolestPay internally uses `eval()` to deserialize and execute certain POS method action functions returned from the server (`initActions`, `orderActions`). The site must **not** block `eval()`.
If a CSP header is set, `'unsafe-eval'` must be present in `script-src`:
```
Content-Security-Policy:
script-src 'self' 'unsafe-eval' https://pay.holest.com https://sandbox.pay.holest.com ...;
```
> ?? If the site uses a strict CSP that blocks `eval()` or restricts iframes/scripts to specific origins, HolestPay will fail silently or partially. This is one of the most common causes of "nothing happens when I click Pay" during integration.
---
## Dock Container Placement
For each payment method row, use this visual order:
1) method **name/label**
2) method **description**
3) method **dock container** (if that method supports docking)
The dock container must be below the description of the same method, and before the next method name is rendered. It must **not** be placed after the full list of all payment methods.
Each payment method in the list that supports docking (`pm.PayInputUrl` is set) needs its own dock container adjacent to it. Best practice is to wrap **description + dock** in one method-details wrapper that is shown only when that method is selected. When the buyer selects that method, `HPay.setPaymentMethodDock()` renders the embedded payment input directly inside that container.
**Correct structure:**
```html
<label>
<input type="radio" name="payment_method" value="179" />
Credit Card
</label>
<div class="method-details is-selected" data-method="179">
<div class="method-description">Card payment description...</div>
<div id="paymentMethodDock-179" class="hpay-dock-container"></div>
</div>
<label>
<input type="radio" name="payment_method" value="180" />
Bank Transfer
</label>
<div class="method-details" data-method="180">
<div class="method-description">Bank transfer description...</div>
<!-- no dock here — this method does not support docking -->
</div>
```
---
## Always Render Method Description When Selected
Whenever a payment method or shipping method is selected by the buyer, **always display its description**. Do not skip or hide descriptions.
Method descriptions sometimes contain **functionally important content** — instructions the buyer must read (e.g. bank account number for manual transfer, pickup location details, special conditions). Hiding or omitting descriptions can cause buyer confusion and failed orders.
For shipping methods, the description container must also include the `<span class="hpay-sm-options" hpay_shipping_method_id="<hpay_shipping_method.HPaySiteMethodId>"></span>` placeholder (see earlier section) so HolestPay can inject carrier-specific UI into it.
---
## Shopify-Specific Notes (if building a Lovable app for Shopify)
### Order creation timing
If this integration is for a Shopify storefront, **all communication with the Shopify API (order creation, order update, fulfillment, etc.) must happen only after receiving the HolestPay payment result** — i.e. inside the `onHPayResult` handler or the POST-back handler on `order_user_url`. Do not create or confirm the Shopify order before payment is confirmed. The HolestPay result contains the definitive payment status (`payment_status: PAID|RESERVED|...`) that should trigger the Shopify order write.
### Shopify API credentials with `write_orders` permission
Shopify access tokens that merchants create themselves in the Shopify admin expire after **24 hours** and cannot be used for permanent integrations.
If a permanent Shopify API access token with `write_orders` permission is needed, the merchant can **borrow the credentials from the HolestPay Shopify app**:
1. In the HolestPay panel, go to site/POS settings for the Shopify site.
2. Find the **SHOPIFY CLIENT SECRET** parameter.
3. Use the **Copy All Shopify APP Credentials...** next to it to copy the credentials.
> ?? **Security warning — tell the user this explicitly:**
> *"These are shared API credentials tied to the HolestPay Shopify app. Do not share them with anyone, do not commit them to a public repository, and do not expose them in frontend code. Store them as private environment variables on your server only."*
---
## HolestPay Language Codes
HolestPay uses its own language code convention — **do not use standard ISO/BCP-47 codes** for Serbian:
| Language | HolestPay code | ? Do NOT use |
|---|---|---|
| Serbian Latin | `rs` | `sr`, `sr-Latn`, `sr-YU`, `sr-lat` |
| Serbian Cyrillic | `rs-cyr` | `sr-Cyrl`, `sr-cyr`, `cyr` |
| Bosnian | `bs` | |
| Croatian | `hr` | |
| Slovenian | `si` | |
| Macedonian | `mk` | |
| English | `en` | |
| German | `de` | |
| Italian | `it` | |
| Spanish | `es` | |
| French | `fr` | |
| Portuguese | `pt` | |
| Dutch | `nl` | |
| Greek | `el` | `gr` |
| Turkish | `tr` | |
Pass this value as the `language` parameter to `HPayInit()` and as `hpaylang` in `pay_request`.
