Building the Checkout Form

Table of Contents

1. Add the checkout script
2. Build the payment form
3. Why the hidden fields matter
4. Beginner Pitfalls

1. Add the checkout script

<script src="https://checkout.payway.com.kh/plugins/checkout2-0.js" defer></script>

This script URL is the same for both sandbox and production — unlike the API endpoint, which does have a separate checkout-sandbox.payway.com.kh host for testing (you'll see that host in Part 3).

2. Build the payment form

PayWay expects specific fields, submitted as a form, including a security hash. A simplified example:

<form method="POST" target="aba_webservice" id="aba_merchant_request"
  action="https://checkout-sandbox.payway.com.kh/api/payment-gateway/v1/payments/purchase">
  <input type="hidden" name="merchant_id" value="YOUR_SANDBOX_MERCHANT_ID">
  <input type="hidden" name="tran_id" value="">
  <input type="hidden" name="amount" value="1.00">
  <input type="hidden" name="req_time" value="">
  <input type="hidden" name="hash" value="">
  <!-- more fields as required by PayWay's docs, e.g. currency, payment_option -->
  <button type="submit" id="pay-btn">Pay Now</button>
</form>

Notice tran_id, req_time, and hash start empty — they get filled in dynamically by your backend, right before the form is submitted. That's the point of the next chapter: the hash must be generated server-side, because it requires secret key material that must never reach the browser.

3. Why the hidden fields matter

The form's id, target, and action attributes matter. PayWay's checkout script looks up the form by the exact id aba_merchant_request and reads its target/action. Get these wrong — a different id, or a plain type="button" instead of submitting the form — and AbaPayway.checkout() throws a DOM error trying to work with a form it can't find.

AbaPayway.checkout() is provided by the script from Section 1 — it reads your form and opens the hosted checkout popup automatically, once you've filled in the three empty fields.

Heads up: this widget-driven flow is PayWay's documented default. This course's own runnable example takes a different path instead — it hit an unresolved issue with the widget and calls the Purchase API directly from the server. Part 3 covers both, and why.

4. Beginner Pitfalls

• The form's id must be exactly aba_merchant_request — the checkout script looks it up by that literal string, not by any form on the page.
• A plain <button type="button"> won't trigger PayWay's script the way a real form submission does. Submit the form; don't just handle a click.
• Filling in tran_id, req_time, and hash is not optional cosmetics — the popup opens fine either way, but PayWay rejects the request server-side if any of them are missing or wrong.