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 payWithEtegram function when the customer clicks 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-pay on a checkout page could look like:

Installation

Shell

npm install etegram-pay

if you are using yarn

Shell

yarn install etegram-pay

Usage

Basic Example

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

checkout.jsx

import { payWithEtegram } from 'etegram-pay';
import { useForm } from 'react-hook-form';

export default function CheckoutFormSample(

	const {register, handleSubmit} = useForm();

	const onSubmit = async (data) => {
		/* Here you would send the data from your form to the payWithEtegram.*/

   	//You can pass your reference to the function otherwise one will be generated for you

            const dataToSubmit = {
			  projectID: data.projectID,
			  publicKey: data.publicKey,
			  amount: data?.productPrice,
			  email: data.email,
			  phone: data?.phone,
			  firstname: data?.firstName,
			  lastname: data?.lastName,
		}
      		await payWithEtegram(dataToSubmit);
	};
	return (
	     <form onSubmit={handleSubmit(onSubmit)}>
	        <div>
	            <label htmlFor="firstName">FirstName</label>
	            <input {...register("firstName")} />
	        </div>
					<div>
	            <label htmlFor="lastName">FirstName</label>
	            <input {...register("lastName")} />
	        </div>
	        //Rest of your form
	        ...
	
	        <button>Submit</button>
	    </form>
  	)
)

When you use the payWithEtegram function, a checkout window will open, showing the account details and the amount your customer needs to transfer. Once the transfer is complete, and they click the confirmation button, they’ll be redirected to the callback URL you set up in your dashboard.

---

Parameter

Parameter	Type	Required	Description
projectID	string	Yes	The project ID is in your dashboard. Go to settings -> API & Keys to find it
publicKey	string	Yes	The API Key is in project dashboard. You can choose either test or live key.
amount	number	Yes	The amount you want your customer to pay
email	string	Yes	Your customer's email
phone	string	Yes	Your customer's phone
firstname	string	Yes	Your customer's firstname
lastname	string	Yes	Your customer's lastname
reference	string	No	You can provide a reference otherwise one will be generated for you.

Etegram Pay API

If you prefer to call our API to initialize a transaction, you can start by sending a POST request to our endpoint https://api-checkout.etegram.com/api/transaction/initialize/:projectID.

Example Request

JavaScript

var raw = {
	amount: 100,
	email: [email protected],
	phone: 080*******,
	firstname: John,
	lastname: Doe,
}

//public key from your dashboard is required
var requestOptions = {
  method: 'POST',
  body: raw,
  redirect: 'follow'
  headers: {
    "Content-Type": "application/json",
  "Authorization": `Bearer ${your_public_key}`,
  
  },
};

fetch("https://api-checkout.etegram.com/api/transaction/initialize/66cc9f4ad602e72ea995b728", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

php

<?php
// Define the raw data
$data = [
    "amount" => 100,
    "email" => "[email protected]",
    "phone" => "080*******",
    "firstname" => "John",
    "lastname" => "Doe"
];

// Convert the data to JSON
$jsonData = json_encode($data);

// Initialize cURL
$ch = curl_init();

// Set the cURL options
curl_setopt($ch, CURLOPT_URL, "https://api-checkout.etegram.com/api/transaction/initialize/66cc9f4ad602e72ea995b728");
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $jsonData);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "Content-Type: application/json", // Set content type to JSON
    "Content-Length: " . strlen($jsonData), // Include the length of the JSON data
   "Authorization": `Bearer ${your_public_key}`//Public key from dashboard is required
]);

// Execute the request and capture the response
$response = curl_exec($ch);

// Check for cURL errors
if (curl_errno($ch)) {
    echo 'Error: ' . curl_error($ch);
} else {
    // Print the response
    echo $response;
}

// Close the cURL session
curl_close($ch);
?>

Ruby

require 'net/http'
require 'json'
require 'uri'

# Define the raw data
data = {
  amount: 100,
  email: "[email protected]",
  phone: "080*******",
  firstname: "John",
  lastname: "Doe"
}

# Convert data to JSON
json_data = data.to_json

# Define the API endpoint
uri = URI("https://api-checkout.etegram.com/api/transaction/initialize/66cc9f4ad602e72ea995b728")

# Create a POST request
http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true
request = Net::HTTP::Post.new(uri.path, { 
  "Content-Type" => "application/json",
  "Authorization" => "Bearer #{your_public_key}" # Replace with actual key
})
request.body = json_data

# Send the request and get the response
begin
  response = http.request(request)
  puts response.body
rescue StandardError => e
  puts "Error: #{e.message}"
end

ASP.NET

using System;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Newtonsoft.Json; // Install Newtonsoft.Json via NuGet

class Program
{
    static async Task Main(string[] args)
    {
        // Define the raw data
        var raw = new
        {
            amount = 100,
            email = "[email protected]",
            phone = "080*******",
            firstname = "John",
            lastname = "Doe"
        };

        // Convert the raw data to JSON
        string jsonData = JsonConvert.SerializeObject(raw);

        // Define the API endpoint
        string url = "https://api-checkout.etegram.com/api/transaction/initialize/66cc9f4ad602e72ea995b728";

        using (HttpClient client = new HttpClient())
        {
            try
            
              client.DefaultRequestHeaders.Add("Authorization", "Bearer your_public_key");
                // Create the request content
                var content = new StringContent(jsonData, Encoding.UTF8, "application/json");

                // Send the POST request
                HttpResponseMessage response = await client.PostAsync(url, content);

                // Get the response content
                string responseBody = await response.Content.ReadAsStringAsync();
                Console.WriteLine(responseBody);
            }
            catch (Exception ex)
            {
                // Handle any errors
                Console.WriteLine($"Error: {ex.Message}");
            }
        }
    }
}

Example response

JSON

{
  "status": true,
  "message": "Authorization URL created",
  "data": {
    "authorization_url": "https://checkout.etegram.com/74ec0351774543da8926deb27bbe19dd",
    "access_code": "74ec0351774543da8926deb27bbe19dd",
    "reference": "tyrhndjhfd"
  }
}

Please direct your customers to the authorization_url to complete their purchase. Once finished, they'll be redirected back to the Callback URL you provided.