Skip to main content

​
Hosted Checkout Page

QFPay provides a prebuilt, secure checkout interface that allows merchants to accept multiple payment methods via simple redirection. This solution:
  • Requires minimal development effort
  • Supports both desktop and mobile browsers
  • Supports multi-language UI
  • Is maintained and secured by QFPay

​
UI Preview

Hosted Checkout UI
The checkout page is fully responsive and adapts automatically to different screen sizes.

​
Customisation Options

If a merchant wishes to customise the checkout page, the following elements are currently supported. Elements not listed below are not supported for modification.

​
Supported Customisable Elements

​
1 Branding Elements

  • Browser favicon (tab icon)
  • Page logo
  • Header horizontal stripe background colour

​
2 Payment Method Display

  • Custom sorting order of payment methods

​
3 Payment Button

  • Custom colour for the “Pay Now” button
Any UI components not explicitly listed above are currently not customisable.

​
How to Request Customisation

To request checkout customisation, please provide the following information to technical support:
  • app_code
  • client_key
  • Detailed customisation requirements
  • Brand assets (logo files, colour codes, etc.)
Contact: technical.support@qfpay.com

​
Static Asset Requirements

Please ensure all submitted branding assets follow the specifications below:
  • Height: 40px
  • No horizontal padding (no blank space on left or right)

​
WAP Logo (Mobile)

  • Height: 25px
  • No horizontal padding

​
Favicon

  • Size: 15 × 15 px
PNG format with transparent background is recommended.

​
Environment Notice

If test transactions are performed in the Live Testing environment, please refund them immediately to avoid reconciliation discrepancies.
For environment details, refer to: Environment Documentation

​
Process Flow

Checkout Flow
  1. Customer proceeds to checkout on the merchant website
  2. Merchant redirects the customer to the QFPay hosted checkout page
  3. Customer selects a payment method and completes payment
  4. Customer is redirected back to the merchant website

​
API Request

​
Endpoint

TEXT
https://<base-url>/checkstand/#/?

​
Method

TEXT
GET

​
Request Parameters

ParameterTypeRequiredDescription
appcodeString(64)YesStore identifier issued by QFPay
sign_typeStringYesSHA256 (recommended) or MD5
signStringYesGenerated signature
paysourceStringYesMust end with _checkout
txamtIntYesAmount in cents (e.g. 1099 = HKD 10.99)
txcurrcdString(3)YesCurrency code (e.g. HKD)
out_trade_noString(128)YesUnique merchant transaction ID
txdtmStringYesTimestamp (YYYY-MM-DD HH:mm:ss)
return_urlStringYesRedirect URL after successful payment
failed_urlStringYesRedirect URL after failed payment
notify_urlStringYesAsynchronous notification URL
mchntidString(16)NoRequired in agent scenarios
goods_nameString(64)NoProduct name
udidString(40)NoDevice identifier
expired_timeStringNoQR expiry time (5–120 minutes)
checkout_expired_timeStringNoCheckout session expiry
limit_payStringNono_credit disables credit cards
langStringNozh-hk, zh-cn, en
cancel_urlStringNoRedirect URL if user cancels

​
Creating a Checkout Order

Each out_trade_no must be unique to prevent duplicate transactions.
Generate the signature using your client_key, then redirect the customer to the constructed checkout URL.

​
Example: Signature & Redirect

JavaScript
const params = {
  appcode: "YOUR_APPCODE",
  goods_name: "checkout_product",
  out_trade_no: "TXN1234567890",
  paysource: "remotepay_checkout",
  return_url: "https://merchant.com/success",
  failed_url: "https://merchant.com/failed",
  notify_url: "https://merchant.com/notify",
  sign_type: "SHA256",
  txamt: "1000",
  txcurrcd: "HKD",
  txdtm: "2025-01-01 12:00:00"
};

const apiKey = "YOUR_CLIENT_KEY";

const sorted = Object.keys(params)
  .sort()
  .map(k => `${k}=${params[k]}`)
  .join("&");

const sign = sha256(sorted + apiKey);

const url = `https://test-openapi-hk.qfapi.com/checkstand/#/?${sorted}&sign=${sign}`;

window.location.href = url;

​
Important Notes

  • Always generate signatures on your server in production.
  • Never expose your client_key in frontend code.
  • Ensure your notify_url accepts POST callbacks.
  • It is recommended to verify final transaction status using the Transaction Enquiry API.