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://dev-checkout.instanttempmail.com/api/transaction/initialize/:projectID.

Example Request

JavaScript

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

var requestOptions = {
  method: 'POST',
  body: raw,
  redirect: 'follow'
};

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

Example response

JSON

{
  "status": true,
  "message": "Authorization URL created",
  "data": {
    "authorization_url": "https://etegram-checkout.vercel.app/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.