HTML Checkout

Our HTML Checkout works similarly to PayChangu Inline, but it’s built entirely with HTML. Just create a standard HTML form containing the necessary payment details. When the customer submits the form, they’ll be redirected to our secure payment page to complete their transaction.

Let’s break down what this code is doing:

To begin with, we’re creating a standard HTML form. It’s important that the form uses the POST method and sets its action attribute to PayChangu’s checkout URL.

<form 
      method="POST" 
      action="https://api.paychangu.com/hosted-payment-page" >
    
</form>

Next is the payment button. This is what the customer clicks after reviewing their order and deciding to proceed with the payment. Ensure the button is placed inside the form and set its type attribute to "submit" so that the form is submitted when clicked.

<form method="POST" action="https://api.paychangu.com/hosted-payment-page" >
      <input type="submit" value="submit" />
</form>

Finally, we include hidden input fields in the form to define the payment options. These options use the same values as those in the Inline and Standard flows but are represented as form fields. For nested object fields, use square bracket notation to reference them.

Parameter	Required	Description
public_key	Yes	This is important for creating payment links
callback_url	Yes	This is your IPN URL, which is essential for receiving payment notifications. Successful transactions will redirect to this URL after payment. The {tx_ref} is returned, so you don’t need to include it in your URL.
return_url	Yes	Once the customer cancels or after multiple failed attempts, we will redirect to the return_url with the query parameters tx_ref and status of failed.
tx_ref	Optional	Your transaction reference. This must be unique for each transaction. Alternatively, you can leave this field out, and we’ll generate one for you.
first_name	Optional	This is the first name of your customer.
last_name	Optional	This is the last name of your customer.
email	Optional	This is the email address of your customer. Transaction notification will be sent to this email address
currency	Yes	Currency to charge in. [ 'MWK', 'USD' ]
amount int32	Yes	Amount to charge the customer.
description	Optional	Payment Description
meta array	Optional	You can pass on extra information here.

    <input type="hidden" name="public_key" value="{public_key}" />
    <input type="hidden" name="callback_url" value="https://example.com/callbackurl" />
    <input type="hidden" name="return_url" value="https://example.com/returnurl" />
    <input type="hidden" name="tx_ref" value="2346vrcd" />
    <input type="hidden" name="amount" value="100" />
    <input type="hidden" name="currency" value="MWK" />
    <input type="hidden" name="email" value="[email protected]" />
    <input type="hidden" name="first_name" value="Mac" />
    <input type="hidden" name="last_name" value="Phiri" />
    <input type="hidden" name="title" value="Test Payment" />
    <input type="hidden" name="description" value="Payment Description" />
    <input type="hidden" name="meta" value="" />

That’s all for the HTML checkout setup. Once the customer submits the form, they’ll be redirected to the payment page to complete their transaction.

Full Sample

<form method="POST" action="https://api.paychangu.com/hosted-payment-page" >
    <input type="hidden" name="public_key" value="{public_key}" />
    <input type="hidden" name="callback_url" value="https://example.com/callbackurl" />
    <input type="hidden" name="return_url" value="https://example.com/returnurl" />
    <input type="hidden" name="tx_ref" value="2346vrcd" />
    <input type="hidden" name="amount" value="100" />
    <input type="hidden" name="currency" value="MWK" />
    <input type="hidden" name="email" value="[email protected]" />
    <input type="hidden" name="first_name" value="Mac" />
    <input type="hidden" name="last_name" value="Phiri" />
    <input type="hidden" name="title" value="Test Payment" />
    <input type="hidden" name="description" value="Payment Description" />
    <input type="hidden" name="meta" value="" />
    <input type="submit" value="submit" />
</form>

After the Payment

Four things will happen when a payment is successful:

We’ll redirect you to your callback_url with status tx_ref after payment is complete.
We’ll send you a webhook if you have it enabled. Learn more about webhooks and see examples here.
We’ll send an email receipt to your customer if the payment was successful (unless you’ve disabled this feature).
We’ll send you an email notification (unless you’ve disabled this feature).

On your server, you should handle the redirect and always verify the final state of the transaction.

What if the Payment Fails?

If the payment attempt fails (for instance, due to insufficient funds), you don’t need to take any action. The payment page will remain open, allowing the customer to try again until the payment succeeds or they choose to cancel. Once the customer cancels or after multiple failed attempts, we will redirect to the return_url with the query parameters tx_ref and status of failed.

If you have webhooks enabled, we’ll send you a notification for each failed payment attempt. This can be useful if you want to reach out to customers who experienced issues with their payment. See our webhooks guide for an example.