API Reference

Etegram checkout

Etegram checkout is the easiest way to collect payments on your website: Import our lightweight JavaScript library on your checkout page, then call the startPayment() function when the customer clicks on your payment button. We'll handle the payment and return to you when it's done. In this guide, we'll walk you through using Etegram checkout on your site.

Here's what the implementation of Etegram Inline on a checkout page could look like:

An Example:

Here's what implementation of Etegram checkout on a checkout page could look like:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Etegrampay | Demo</title>
</head>
<body>

  <!--<form id="paymentForm">-->
  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" value="[email protected]" id="email-address" placeholder="Enter details" required/>
  </div>

  <div class="form-group">
    <label for="amount">Amount</label>
    <input type="tel" value="2500" id="amount" placeholder="Enter details" required/>
  </div>

  <div class="form-submit">
    <button type="button" onclick="startPayment();"> Pay </button>
  </div>

  <!--</form>-->
 <script src="https://appapi.etegram.com/checkout/inline/script.js"></script>

<script>
    function startPayment(){

        var paymentInfo = {
        public_key: "YOUR PUBLIC KEY",
        ref: "titanic-48981487343MDI0NzMx",
        amount: document.getElementById("amount").value,
        currency: "NGN",
        meta: {
          customer_id: 23,
          customer_mac: "92a3-912ba-1192a"
        },
        customer: {
          email: document.getElementById("email-address").value,
          phone_number: "08102909304",
          name: "Rose DeWitt Bukater",
        },
        redirect_url: "https://etegram.co",
        customizations: {
          title: "The Titanic Store",
          description: "Payment for an awesome cruise",
          logo: "https://www.logolynx.com/images/logolynx/22/2239ca38f5505fbfce7e55bbc0604386.jpeg",
        }
    };

    payWithEtegram(paymentInfo);

  }
</script>
</body>
</html>