HTML Checkout

Embed AdmasPay checkout directly into your website using a simple HTML form.

Overview

HTML Checkout provides the simplest integration method for accepting payments. It’s ideal for static websites or platforms where you cannot use server-side code.

How It Works

Customer clicks the “Pay” button on your website
A form submits payment details to AdmasPay
Customer completes payment on AdmasPay’s secure checkout page
Customer is redirected back to your website after payment

Basic Implementation

Add this HTML form to your website:


<form action="https://api.admaspay.com/api/v1/checkout" method="POST">
  <!-- Required Fields -->
  <input type="hidden" name="api_key" value="YOUR_PUBLIC_KEY" />
  <input type="hidden" name="amount" value="100" />
  <input type="hidden" name="txn_ref" value="ORDER_12345" />
  <input type="hidden" name="currency_code" value="ETB" />
 
  <!-- Optional Fields -->
  <input type="hidden" name="return_url" value="https://yoursite.com/success" />
  <input type="hidden" name="callback_url" value="https://yoursite.com/api/webhook" />
  <input type="hidden" name="email" value="customer@email.com" />
  <input type="hidden" name="first_name" value="John" />
  <input type="hidden" name="last_name" value="Doe" />
  <input type="hidden" name="phone_number" value="0912345678" />
 
  <button type="submit">Pay with AdmasPay</button>
</form>

Form Parameters

Parameter	Type	Required	Description
`api_key`	String	Yes	Your public API key
`amount`	Number	Yes	Payment amount
`txn_ref`	String	Yes	Your unique transaction reference
`currency_code`	String	No	Currency code (ETB or USD)
`return_url`	String	No	URL to redirect after payment
`callback_url`	String	No	URL for payment notifications
`email`	String	No	Customer’s email
`first_name`	String	No	Customer’s first name
`last_name`	String	No	Customer’s last name
`phone_number`	String	No	Customer’s phone number

Styled Example

Here’s a more polished example with CSS styling:


<style>
  .admaspay-btn {
    background-color: #3AB54A;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .admaspay-btn:hover {
    background-color: #2d8a3a;
  }
</style>
 
<form action="https://api.admaspay.com/api/v1/checkout" method="POST">
  <input type="hidden" name="api_key" value="YOUR_PUBLIC_KEY" />
  <input type="hidden" name="amount" value="100" />
  <input type="hidden" name="txn_ref" value="ORDER_12345" />
  <input type="hidden" name="return_url" value="https://yoursite.com/success" />
 
  <button type="submit" class="admaspay-btn">
    Pay 100 ETB with AdmasPay
  </button>
</form>

Dynamic Transaction Reference

For production use, generate a unique transaction reference for each order:


<script>
  // Generate unique transaction reference
  function generateTxnRef() {
    return 'TXN_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
  }
 
  // Set the transaction reference before form submission
  document.querySelector('form').addEventListener('submit', function() {
    document.querySelector('input[name="txn_ref"]').value = generateTxnRef();
  });
</script>

Security Considerations

Use your public key only - Never expose your secret API key in HTML
Verify payments server-side - Always verify payments using the Verify Payment endpoint before fulfilling orders
Use HTTPS - Ensure your website uses SSL encryption
Validate return data - Don’t trust the return URL parameters; always verify with the API

After Payment

When the customer completes payment:

They are redirected to your return_url with query parameters:
- txn_ref - Your transaction reference
- status - Payment status
Your callback_url receives a POST request with payment details
Important: Always verify the payment status using the Verify Payment API before confirming the order.

Need More Control?

If you need more control over the checkout experience, consider using:

Standard Checkout - Server-side integration with full API access
Direct Payment - Build your own checkout UI