HTML Checkout

Our HTML checkout option is done entirely in HTML. You create a regular HTML form containing the payment details. When the customer submits the form, they'll be redirected to our payment page where they can complete the payment.

An example

Here’s an example of how you’d implement HTML checkout:

Walkthrough

Let’s take a closer look at what this code is doing.

First, we create a regular HTML form. The form must have the method as POST, and the action pointing to Chapa’s hosted checkout page.

Second up is setting the your public api key. You can get your public api key from your dashboard after signing up. Here is a link on how you can get it.

Next up is the payment button. This is the button the customer clicks after they’ve reviewed their order and are ready to pay you. Make sure it’s inside the form and set to type="submit" so the form submits when it’s clicked.

Finally, we add hidden input fields to the form containing the payment options. These payment options are the same values used in the Standard flows, converted into form fields. Object fields are referenced with square brackets.


NOTE

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

Transaction verification should always be done on the server, as it makes use of your secret key, which should never be exposed publicly.


What if the payment fails?

If the payment attempt fails (for instance, due to insufficient funds), you don’t need to do anything. We’ll keep the payment page open, so the customer can try again until the payment succeeds or they choose to cancel.

All done!


Split Payments
Webhooks
Next →