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
npm install etegram-pay
if you are using yarn
yarn install etegram-pay
Usage
Basic Example
Here's what implementation of Etegram checkout on a checkout page in React could look like:
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 |
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
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
// 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);
?>
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
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
{
"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.