PayAiro-Payment Gateway SDK

Introduction

This SDK allows merchants to integrate a seamless payment gateway into their React, Angular, or Vue applications.

Installation

Install the SDK using npm:

npm install @photos3016/paymenttest

Usage

React

import { createAPI } from "@photos3016/paymenttest";
import React, { useState } from "react";

const PaymentPage = () => {
  const [data, setData] = useState(null);
  const apikey = "YOUR_SECRET_KEY";
  const merchantId = "YOUR_MERCHANT_ID";
  const api = createAPI(apikey, merchantId);

  const handlePayment = async (item) => {
    try {
      const res = await api.paymentTest({
        amount: item.amount,
        json: [
          {
            name: item.name,
            quantity: 1,
            amount: item.amount,
            tax: item.tax,
            price: item.price,
          },
        ],
      });
      setData(res);
    } catch (error) {
      console.error("Transaction failed:", error.message);
    }
  };

  return (
    <div>
      <h1>Payment Gateway</h1>
      <button
        onClick={() => handlePayment({ name: "Test Product", amount: 100 })}
      >
        Pay $100
      </button>
    </div>
  );
};

export default PaymentPage;

Angular

import { Component } from "@angular/core";
import { createAPI } from "@photos3016/paymenttest";

@Component({
  selector: "app-payment",
  template: `<button (click)="handlePayment()">Pay $100</button>`,
})
export class PaymentComponent {
  api = createAPI("YOUR_SECRET_KEY", "YOUR_MERCHANT_ID");

  handlePayment() {
    this.api
      .paymentTest({
        amount: 100,
        json: [
          {
            name: "Test Product",
            quantity: 1,
            amount: 100,
            tax: 0,
            price: 100,
          },
        ],
      })
      .then((res) => console.log(res))
      .catch((error) => console.error("Transaction failed:", error.message));
  }
}

Vue

<template>
  <button @click="handlePayment">Pay $100</button>
</template>

<script>
import { createAPI } from "@photos3016/paymenttest";

export default {
  data() {
    return {
      api: createAPI("YOUR_SECRET_KEY", "YOUR_MERCHANT_ID"),
    };
  },
  methods: {
    async handlePayment() {
      try {
        const res = await this.api.paymentTest({
          amount: 100,
          json: [
            {
              name: "Test Product",
              quantity: 1,
              amount: 100,
              tax: 0,
              price: 100,
            },
          ],
        });
        console.log(res);
      } catch (error) {
        console.error("Transaction failed:", error.message);
      }
    },
  },
};
</script>

Customizing the SDK

You can customize the payment UI with primary/secondary colors, button styles, and logos.

Adding Project URLs

Merchants can add a callback URL and success URL while creating a project.

Getting Your Secret Key

After creating a project, you'll receive a secret key. This key is shown only once.

Merchant Panel

Manage all projects, update callback and success URLs, and view received transactions from users in the Merchant Panel.

🔗 Access the Merchant Panel

Support

For any issues, contact our support team at [email protected].

Note: Replace YOUR_SECRET_KEY and YOUR_MERCHANT_ID with actual values from the Merchant Panel.